devness http://devness.com Just another WordPress weblog Wed, 01 Jul 2009 21:41:37 +0000 http://wordpress.org/?v=2.8 en hourly 1 Indexed Dropdown with jQuery http://devness.com/2009/07/indexed-dropdown-with-jquery/ http://devness.com/2009/07/indexed-dropdown-with-jquery/#comments Wed, 01 Jul 2009 19:39:36 +0000 dmoena http://devness.com/?p=132 Did you note how difficult is to deal with highly populated dropdowns? More than 50 elements can be a real pain… Can we do something about it -specially when this “highly populated dropdown” is necessary-? Thanks to JavaScript/jQuery the answer is a big yes. How? Take a look to the demo and see which dropdown is more friendly to find… lets say: Chile.

Demo Download

Main Structure

Next image presents our target structure. input and image are the visible elements. content is our options container and index, our indexing element.

Now, lets code!

The jQuery Plugin

(function($) {

$.fn.indexedselect = function(options) {

var defaults = {
        defaultText: "Select…"
};
var opts = $.extend(defaults,options);

})(jQuery);

Since we want to customize our plugin -just a little bit by now-, we need to define options. We also need to define defaults since options is not mandatory. Finally, we “merge” both and save the result into opts.

Then, for each select element we apply…

var input = $(‘<input class="indexedselect_input" type="text"/>’);
input.css({width:$(this).outerWidth() + ‘px’,
                height:‘20px’,
                top:$(this).position().top + ‘px’,
                left:$(this).position().left + ‘px’}).
        val(opts.defaultText).
        insertAfter(this);

input.focus(function(){
        $(‘.indexedselect’).hide();
        indexedselect.show();
        content.css(‘height’, index.outerHeight() + ‘px’);
        $(input).select();
});

input.click(function(){
        this.select();
        return false;
});

input.keypress(function(){
        return false;
});

We start by creating input, the visible element, which is in charge of replacing our old dropdown and to show the current selected element.

Since our new element should behave like any dropdown element, we need to simulate this. Our first step into this matter, is to show available options when the new dropdown has the focus. To do this, we simply set the focus event of input to do exactly that.

Next two events, click and keypress, are there only for consistency -strictly only keypress event is needed-. They are in charge of avoiding any manual edition of the current selected option.

var hidden = $(‘<input type="hidden"/>’).insertAfter(input);
if($.trim($(this).attr(‘name’)) != ”){
        hidden.attr(‘name’,$(this).attr(‘name’));
        $(this).attr(‘name’,”)
}

Now, we need a way to receive our selected value in our server and this is hidden’s work. This element takes the name of the original select, so it will be sent as part of our form.

var img = $(‘<img class="img" src="./indexed_select.png"/>’).insertAfter(input);
img.css({position:‘absolute’,
                left:(img.position().left – 18) + ‘px’,
                top:(input.position().top + 1) + ‘px’});

img.mouseover(function(){
        $(this).attr(’src’,‘./indexed_select_hover.png’);
});

img.mouseout(function(){
        $(this).attr(’src’,‘./indexed_select.png’);
});

img.click(function(e){
        if(!$(indexedselect).is(‘:visible’)){
                $(‘.indexedselect’).hide();
                $(indexedselect).show();
                content.css(‘height’, indexedselect.find(‘.index’).height() + ‘px’);
                $(input).select();
        } else {
                $(‘.indexedselect’).hide();
        }
        return false;
});

Working again with consistency, img is added to be part of the dropdown element simulation. It acts like any show/hide toggle element when is clicked.

var indexedselect = $(‘<ul class="indexedselect">’ +
                                                ‘<li class="index">’ +
                                                        ‘<ul>’ +
                                                        ‘</ul>’ +
                                                ‘</li>’ +
                                                ‘<li class="content">’ +
                                                        ‘<ul>’ +
                                                        ‘</ul>’ +
                                                ‘</li>’ +
                                        ‘</ul>’).insertAfter(input);

Our options and indexes container is indexedselect. At this moment, we are only defining its internal structure.

var content = indexedselect.find(‘.content’);

content.
        css(‘width’, $(this).outerWidth() + ‘px’);

content.mouseover(function(e){
        if($(e.target).children().length == 0)
                $(e.target).addClass(‘hover’);
        return false;
});

content.mouseout(function(e){
        if($(e.target).children().length == 0)
                $(e.target).removeClass(‘hover’);
        return false;
});

content.click(function(e){
        input.val(String($.trim($(e.target).html())).replace(‘&amp;’,‘&’));
        hidden.val($(e.target).data(‘value’));
        indexedselect.hide();
        return false;
});

content is part of indexedselect and will store the options of the replaced element.

When any option is clicked, we set input equal to the visible value and hidden to the actual selected value -just like would be with any dropdown element-.

var index = indexedselect.find(‘.index’);

var iul = indexedselect.find(‘.index ul’);
var cul = indexedselect.find(‘.content ul’);

var indexes = Array();
$(this).find(‘option’).each(function(){
        var letter = String($(this).html()).substring(0,1).toLowerCase();
        if(!indexes[letter]){
                iul.append(‘<li>’ + letter + ‘</li>’);
                indexes[letter] = letter;
        }
        $(‘<li>’ + $(this).html() + ‘</li>’).
                data(‘value’,$(this).attr(‘value’)).
                appendTo(cul);
});

index.click(function(e){
        var selectedindex = String($.trim($(e.target).html())).toLowerCase();
        index.find(‘.selectedindex’).removeClass(’selectedindex’);
        content.find(‘.selectedindex’).removeClass(’selectedindex’);
        $(e.target).addClass(’selectedindex’);
        content.find(‘ul li’).each(function(){
                if(String($(this).html()).substring(0,1).toLowerCase() == selectedindex) {
                        $(this).addClass(’selectedindex’);
                        var divOffset = content.offset().top;
                        var pOffset = $(this).offset().top;
                        var pScroll = pOffset – divOffset – 1;
                        content.animate({scrollTop: ‘+=’ + pScroll + ‘px’}, 250);
                        return false;
                }
        });
        return false;
});

index.mouseover(function(e){
        if($(e.target).children().length == 0)
                $(e.target).addClass(‘hover’);
        return false;
});

index.mouseout(function(e){
        if($(e.target).children().length == 0)
                $(e.target).removeClass(‘hover’);
        return false;
});

indexedselect.css(‘top’, input.position().top + input.outerHeight() + ‘px’).
        css(‘left’, input.position().left + ‘px’).
        hide();

index is our help to highly populated dropdown elements. To initialize this element, we need to go option by option taking its first character. Once we have this character, we check whether is already included or not -this is done by checking the indexes variable-. Only if is not, we add it to the index element.

We want to avoid extra work, right? Well, since we are going option by option we also use this to initialize content. This is done by moving option’s visible html into content and linking the corresponding value by using jQuery’s data function. This way, we can set hidden to the correct selected value.

Click event triggers a searching process for the first coincidence with respect to the clicked index -so, is mandatory to order alphabetically all the option elements-. Once the first coincidence is found, we scroll down or up in order to make it visible.

indexedselect.css(‘top’, input.position().top + input.outerHeight() + ‘px’).
                                css(‘left’, input.position().left + ‘px’).
                                hide();

$(document).click(function() {
        $(‘.indexedselect’).hide();
});

$(this).css(‘visibility’,‘hidden’);

Finally, some minor things like setting initial position for our new element, setting hide function when we click outside our element and making not visible the initial dropdown -note the use of visibility instead of display. This is necessary to force the invisible element to still fill its space… try display and you will see-.

Final comments

We have made a very simple substitute for any dropdown element, but there is a lot of room for improvement. You can start with validations, for instance. You can also play with its design or reduce the number of limitations -like that all the options needs to be ordered-. Now, is up to you.

(function($) {

$.fn.indexedselect = function(options) {

        var defaults = {
                defaultText: "Select…"
        };
        var opts = $.extend(defaults,options);

        this.each(function(){
                var input = $(‘<input class="indexedselect_input" type="text"/>’);
                input.css({width:$(this).outerWidth() + ‘px’,
                                height:‘20px’,
                                top:$(this).position().top + ‘px’,
                                left:$(this).position().left + ‘px’}).
                        val(opts.defaultText).
                        insertAfter(this);

                input.focus(function(){
                        $(‘.indexedselect’).hide();
                        indexedselect.show();
                        content.css(‘height’, index.outerHeight() + ‘px’);
                        $(input).select();
                });

                input.click(function(){
                        this.select();
                        return false;
                });

                input.keypress(function(){
                        return false;
                });

                var hidden = $(‘<input type="hidden"/>’).insertAfter(input);
                if($.trim($(this).attr(‘name’)) != ”){
                        hidden.attr(‘name’,$(this).attr(‘name’));
                        $(this).attr(‘name’,”)
                }

                var img = $(‘<img class="img" src="./indexed_select.png"/>’).insertAfter(input);
                img.css({position:‘absolute’,
                                left:(img.position().left – 18) + ‘px’,
                                top:(input.position().top + 1) + ‘px’});

                img.mouseover(function(){
                        $(this).attr(’src’,‘./indexed_select_hover.png’);
                });
               
                img.mouseout(function(){
                        $(this).attr(’src’,‘./indexed_select.png’);
                });

                img.click(function(e){
                        if(!$(indexedselect).is(‘:visible’)){
                                $(‘.indexedselect’).hide();
                                $(indexedselect).show();
                                content.css(‘height’, indexedselect.find(‘.index’).height() + ‘px’);
                                $(input).select();
                        } else {
                                $(‘.indexedselect’).hide();
                        }
                        return false;
                });

                var indexedselect = $(‘<ul class="indexedselect">’ +
                                                        ‘<li class="index">’ +
                                                                ‘<ul>’ +
                                                                ‘</ul>’ +
                                                        ‘</li>’ +
                                                        ‘<li class="content">’ +
                                                                ‘<ul>’ +
                                                                ‘</ul>’ +
                                                        ‘</li>’ +
                                                ‘</ul>’).insertAfter(input);

                var content = indexedselect.find(‘.content’);

                content.
                        css(‘width’, $(this).outerWidth() + ‘px’);

                content.mouseover(function(e){
                        if($(e.target).children().length == 0)
                                $(e.target).addClass(‘hover’);
                        return false;
                });

                content.mouseout(function(e){
                        if($(e.target).children().length == 0)
                                $(e.target).removeClass(‘hover’);
                        return false;
                });

                content.click(function(e){
                        input.val(String($.trim($(e.target).html())).replace(‘&amp;’,‘&’));
                        hidden.val($(e.target).data(‘value’));
                        indexedselect.hide();
                        return false;
                });

                var index = indexedselect.find(‘.index’);

                var iul = indexedselect.find(‘.index ul’);
                var cul = indexedselect.find(‘.content ul’);

                var indexes = Array();
                $(this).find(‘option’).each(function(){
                        var letter = String($(this).html()).substring(0,1).toLowerCase();
                        if(!indexes[letter]){
                                iul.append(‘<li>’ + letter + ‘</li>’);
                                indexes[letter] = letter;
                        }
                        $(‘<li>’ + $(this).html() + ‘</li>’).
                                data(‘value’,$(this).attr(‘value’)).
                                appendTo(cul);
                });

                index.click(function(e){
                        var selectedindex = String($.trim($(e.target).html())).toLowerCase();
                        index.find(‘.selectedindex’).removeClass(’selectedindex’);
                        content.find(‘.selectedindex’).removeClass(’selectedindex’);
                        $(e.target).addClass(’selectedindex’);
                        content.find(‘ul li’).each(function(){
                                if(String($(this).html()).substring(0,1).toLowerCase() == selectedindex) {
                                        $(this).addClass(’selectedindex’);
                                        var divOffset = content.offset().top;
                                        var pOffset = $(this).offset().top;
                                        var pScroll = pOffset – divOffset – 1;
                                        content.animate({scrollTop: ‘+=’ + pScroll + ‘px’}, 250);
                                        return false;
                                }
                        });
                        return false;
                });

                index.mouseover(function(e){
                        if($(e.target).children().length == 0)
                                $(e.target).addClass(‘hover’);
                        return false;
                });

                index.mouseout(function(e){
                        if($(e.target).children().length == 0)
                                $(e.target).removeClass(‘hover’);
                        return false;
                });

                indexedselect.css(‘top’, input.position().top + input.outerHeight() + ‘px’).
                        css(‘left’, input.position().left + ‘px’).
                        hide();

                $(document).click(function() {
                        $(‘.indexedselect’).hide();
                });

                $(this).css(‘visibility’,‘hidden’);
        });
};

})(jQuery);

]]> http://devness.com/2009/07/indexed-dropdown-with-jquery/feed/ 14 Playing with Sprites and jQuery: animated menu http://devness.com/2009/06/playing-with-sprites-and-jquery-animated-menu/ http://devness.com/2009/06/playing-with-sprites-and-jquery-animated-menu/#comments Tue, 23 Jun 2009 14:09:42 +0000 dmoena http://devness.com/?p=54 Sprites are widely used on big sites (Yahoo!, Google, Amazon and more) but rarely for “normal” projects. I think this is due to two questions that usually stop us when it comes to learn something new: “how difficult will be to learn this thing?” and “will I even use it?”. Well, I hope to help you with both questions by showing you how easy is to work with sprites/jQuery and how much this would help you to make a difference in your work, for instance by making a nice animated menu like this one:

Our goal

We want to build an animated menu based on sprites just like previous one. In particular, we will use animated elements to make a more attractive menu, but without using flash or another technology different from JavaScript (jQuery in particular), one image file (otherwise wouldn’t justify use ) and a calculator.

Simulating movement

At the sample menu we can see our tiny people running when you put the mouse pointer over their “action zone”. This is accomplished just like any animated image: switching from one image to another and repeating this cycle as long as our character must to run.

In this case we use 4 steps, each one with its respective image (actually we can use only 3 images since we need to repeat one of them during the cycle). Now, lets take this to the sprites world.

Locating an element over the sprite

Working with sprites means that we need to know where is every element related to our animation, but in terms of %.

To calculate this as an approximation, we need to know the image’s width and where our target starts. With this two numbers, we just need to apply simple math to get what we want.

Previous image is 183 pixels width and second step starts at pixel number 57. So, we should be using approximately 31.15% (57/183 = 0.3115) for every instance of second step (we will probably need to adjust this value a little).



By the way, take into account that you can use images as big as this one and even use some subsets (not recommended if you want to save bandwidth). I will leave this image that big so you can play with it.

Masking

Sprites is all about showing only what you need to show and this is done by masking or hiding what you don’t want to show. In other words, you need to know the size of every element in order to force it. In this case we can use a 13 x 20 pixels rectangle to show only one frame.

CSS + HTML

We can do the first part of our menu by using CSS+HTML and by “first part” I mean the static one. By using HTML we set the main structure, consisting of 3 div elements (one main container, one for masking and one for the animated element) and one a (hyperlink) element.

<div class="item">
        <div id="doctor" class="object"></div>
        <div id="doctormask" class="mask"></div>
        <a href="#">Parents</a>
</div>
<div class="item">
        <div id="girl" class="object"></div>
        <div id="girlmask" class="mask"></div>
        <a href="#">Geirls</a>
</div>
<div class="item">
        <div id="boy" class="object"></div>
        <div id="boymask" class="mask"></div>
        <a href="#">Boys</a>
</div>
<div class="item">
        <div id="kid" class="object"></div>
        <div id="kidmask" class="mask"></div>
        <a href="#">Kids</a>
</div>

CSS code let us set initial positions for every animated element and its respective mask. Also, each container is set according to our needs.

body {
        background:#eeeeee;
}

#parent {
        width:14px;
        height:20px;
        background:url(people.gif);
        background-position:0% 0%;
        border:none;
        position:absolute;
        z-index:10;
}

#parentmask {
        background:#ffffff;
        width:120px;
        height:20px;
        position:absolute;
        z-index:1;
        margin-left:8px;
}

#girl {
        width:16px;
        height:20px;
        background:url(people.gif);
        background-position:27.2% 0%;
        border:none;
        position:absolute;
        z-index:10;
}

#girlmask {
        background:#ffffff;
        width:120px;
        height:20px;
        position:absolute;
        z-index:1;
        margin-left:8px;
}

#boy {
        width:16px;
        height:20px;
        background:url(people.gif);
        background-position:53.8% 0%;
        border:none;
        position:absolute;
        z-index:10;
}

#boymask {
        background:#ffffff;
        width:120px;
        height:20px;
        position:absolute;
        z-index:1;
        margin-left:8px;
}

#kid {
        width:16px;
        height:20px;
        background:url(people.gif);
        background-position:79.9% 0%;
        border:none;
        position:absolute;
        z-index:10;
}

#kidmask {
        background:#ffffff;
        width:120px;
        height:20px;
        position:absolute;
        z-index:1;
        margin-left:8px;
}

.item {
        background:#cccccc;
        width:128px;
        height:20px;
}

.item a {
        margin-left:20px;
}

Lets take a look to the #boy element, which tell us that its size is 16×20 pixels, share its background image with the other elements (people.gif, otherwise there is no point to use sprites…) and that we want to show starts at 53.8% from the left side and at 0% starting at the top of the image. The same is valid for any other element.

As a result of this CSS+HTML code, we get something like this, which is nice, but pretty boring.

jQuery

First thing I did, was to create some control variables that allow me to map each element with its respective background position and to keep control of the animation process (lie! some variables were created as needed… but I’ll ignore this for educational purposes), and also a couple of utility functions.

var foot = [50,0,100,0];
var step = 12;
var sleeptime = 70;
var mapping = Array();
mapping["parent"] = { xr:20, xl:6.6, np:"0% 0%" };
mapping["girl"] = { xr:47.5, xl:33, np:"27.2% 0%" };
mapping["boy"] = { xr:74, xl:60.4, np:"53.8% 0%" };
mapping["kid"] = { xr:100, xl:87, np:"79.9% 0%" };

px = function(val){
        return String(val)+"px";
}

mpx = function(val){
        if(val == "auto")
                return 0;
        return Number(String(val).substring(0,String(val).length – 2));
}

Since we have all these figures horizontally aligned, we use “foot” as a common variable to set vertical position of each step while running. For instance, first step is at the middle of the image (50%) and second step is on top of the image (0%) moving from top to bottom.

“step” means that we will move our elements at a rate of 12 pixels and waiting 70 miliseconds (sleeptime). “px” and “mpx” are just to add or remove the string “px” of a given argument.

Now, the fun part: animating this menu, which is done by using the next code

$(document).ready(function(){

        $(".item").find(".mask").css("opacity","0.8");

        move = function(el,elmask){
                var newleft;
                if($(el).data("direction") == "R"){
                        if($(el).position().left >= $(el).parent().width()){
                                $(el).css("background-position", mapping[$(el).attr("id")].np);
                                $(el).data("isMoving",false);
                                return;
                        }
                        newleft = $(el).position().left + step;
                        newwidth = $(elmask).width() – step;
                        newwidth = (newwidth < 0)?0:newwidth;
                } else {
                        if($(el).position().left <= step){
                                $(el).css("background-position", mapping[$(el).attr("id")].np);
                                $(el).data("isMoving",false);
                                return;
                        }
                        newleft = $(el).position().left – step;
                        newwidth = $(elmask).width() + step;
                }
                if($(el).data("index") == 4)
                        $(el).data("index",0);
                var y = foot[($(el).data("index"))];
                $(el).data("index",($(el).data("index")+1))
                $(el).css("background-position",$(el).data("x")+"% "+y+"%").css("left",px(newleft));
                $(elmask).css("left",px(newleft)).css("width",px(newwidth));
                setTimeout(function(){ move(el,elmask); },sleeptime);
        }

        $(".item").each(function(){
                $(this).find(".object").data("isMoving",false);
        });

        $(".item").mouseenter(function(e){
                var obj = $(this).find(".object");
                eval($(this).find("a").attr("rel"))
                obj.data("x",mapping[obj.attr("id")].xr);
                obj.data("index",0);
                obj.data("direction","R");
                if(!obj.data("isMoving")){
                        obj.data("isMoving",true);
                        move(obj.get(0),$(this).find(".mask").get(0));
                }
        });

        $(".item").mouseleave(function(e){
                var obj = $(this).find(".object");
                eval($(this).find("a").attr("rel"))
                obj.data("x",mapping[obj.attr("id")].xl);
                obj.data("direction","L");
                if(!obj.data("isMoving")){
                        move(obj.get(0),$(this).find(".mask").get(0));
                }
        });
});

From top to bottom, we set each mask to have an opacity of 80% (0.8). Then we define the “move” function, which takes and element and its corresponding mask, and move then according to its information contained on jQuery “data” container.

Later, we set the “isMoving” to false for every element, since there is no initial movement.

“mouseenter” sets all context variables to indicate movement to the right and then calls “move” function. “mouseleave” do the opposite.

Note that there is two ways to stop movement: when direction has change and when an element reaches any boundary (starting or ending of the respective item element).

Done!

We are done! We just have created an animated menu using sprites. Not too difficult, right? Then we have answer our first question: “how difficult will be to learn this thing?” Not too much.

For the second question, “will I even use it?” the answer would be a big yes. Why? As you can see, doing this kind of elements can help you to create more interactive and attractive elements (not using flash at all, which is a good thing). Plus, you can create lots of more interesting stuff. Just use your imagination.

Improvements

There is a lot of room for improvement, starting with the animation process and ending with whatever you think can -or must- to be improved. If you have some instereting, it will probably interesting for all of us, so let us know :)

Download

If you want to experiment with this menu, you can download a working demo.

Credits

The tiny people you see running was taken from this post, but saw first at this post while I was doing some research.

]]> http://devness.com/2009/06/playing-with-sprites-and-jquery-animated-menu/feed/ 7 Forcing Letter Case with CSS and jQuery http://devness.com/2009/06/forcing-letter-case-with-css-and-jquery/ http://devness.com/2009/06/forcing-letter-case-with-css-and-jquery/#comments Tue, 16 Jun 2009 21:49:33 +0000 dmoena http://devness.com/?p=45

Try this two forms. Both force letter case, but only one of them will send to the server exactly what you see (in terms of lower and upper case).

See? Now, let me explain what just happen and how to avoid the first situation.

Explanation

In each form we just force letter casing by using CSS. In this case, inputs with the “upper” class will be upper cased and those with the “lower” class will be lower cased.

.upper {
        text-transform:uppercase;
}

.lower {
        text-transform:lowercase;
}

The problem is that we get only the impression of lower and/or upper case, but we will actually send data cased as the user has entered. This means that even when you see “ABCD” you could actually receive “aBCd” at the server. I know, is not a big deal since you can (and should) force casing at server side, but sometimes you just want to be sure that your data is sent with the propper format.

A solution

So, how to solve this? jQuery (jQuery makes this easier, but you can use plain JavaScript too). You just need to add this code (plus the previous CSS one) to intercept any form submit, force propper and effective data casing and then continue with the sumbit process.

<script type="text/javascript">
        $(document).ready(function(){
                $("form").submit(function(){
                        $(this).find(".upper").each(function(){
                                $(this).val(String($(this).val()).toUpperCase());
                        });

                        $(this).find(".lower").each(function(){
                                $(this).val(String($(this).val()).toLowerCase());
                        });
                });
        });
</script>

Simple, but useful in case you are working with casing.

]]> http://devness.com/2009/06/forcing-letter-case-with-css-and-jquery/feed/ 3 Livegets: update any WordPress Widget in real time http://devness.com/2009/06/livegets-update-any-wordpress-widget-in-real-time/ http://devness.com/2009/06/livegets-update-any-wordpress-widget-in-real-time/#comments Mon, 15 Jun 2009 21:43:54 +0000 dmoena http://devness.com/?p=34 wordpress-logo

hello world! -not too original, but I had to do it- Let me tell you about Livegets. What is it? Well, Livegets is a Worpress plugin for enabling real time updates for any Wordpress widget. Any widget? Any.

Why? Because real time widget update would be useful for visitors to know what is happening at any time in your blog.

Picture this: a visitor is reading an specific post at your site and you add a new one. Without Livegets, your visitor will probably leave the site if the current post is the lastest at the time he/she arrives. Now, with Livegets he/she will know there is a new post and will probably visit it.

Another example? Think about a “Top 10 Something” widget. Would be great to offer real time updates, don’t you think?

Installation

Livegets installation is divided into two steps: plugin installation as any other plugin and an small modification of a Wordpress core file… I know it sounds painfull, but is really simple.

Lets start with the “core” part. For this, we need to modify just one file ir order to fully integrate Livegets to your Wordpress installation. The file we need to edit is located into wp-includes and it’s named “widgets.php”.

Its modification is pretty simple: just locate dynamic_sidebar function (around line 433 for Wordpress 2.7.1 and 808 for 2.8) inside of “widgets.php” and find this code (line 477 and 855 respectively)

if ( is_callable($callback) ) {
    call_user_func_array($callback, $params);
    $did_one = true;
}

once you have it, change the previous code for this one

$widgets = explode(",",get_option("livegets"));
if ( is_callable($callback) ) {
        if(in_array($id,$widgets)){ ?>
                <script type="text/javascript"> widgets.push("<?php echo $id; ?>"); </script>
                <script type="text/javascript"> widgets_name["<?php echo $id; ?>"] = "<?php echo get_option($id."_updated_text"); ?>"; </script>
                <span id="<?php echo $id; ?>"><?php
        }
        call_user_func_array($callback, $params);
        if(in_array($id,$widgets)){ ?>
                </span><?php
        }
        $did_one = true;
}

Livegets Config

Plugin installation is like the usual thing: decompress livegets into the Wordpress’ plugin directory. Just be sure the final plugin route is like “…/plugins/livegets/livegets.php”.

Once activated, you will see Livegets Configuration options as part of Wordpress’ Settings, just like in the example image.

We are done! Now you just need to select the widgets that will be real time widegts or Livegets and fill its updated text if you want it. After that, Livegets plugin and jQuery will do the rest.

Oh, one more thing! Choose only those widgets which worth to make Livegets, that means, those that reports some kind of “last activity” – last comments, last posts… – otherwise, you will be stressing out your server and bandwith for no reason.

Demo

You can simulate an update for the “Recent Posts” widget by clicking right here. What you see -or will see- is only a jGrowl notification, but when it happens for real, you can see the widget actually updated and you are enable to visit the new event(s) if you want to.

Restrictions

At this time, I found problems with themes where widget’s content is manipulated after being sent. For instance, when you use JavaScript to create rounded corners. So, check this before you use it.

Download

You can download this plugin right here.

Finally

If you find any kind of error, please let me know. The better way is probably by leaving a comment…

]]> http://devness.com/2009/06/livegets-update-any-wordpress-widget-in-real-time/feed/ 8