devness » web development 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/ 9