Topic: change jQuery toggle slide in direction?

change jQuery slide in direction? Currently, my custom select slides in form the top left. How can I make it slide in form the bottom right? I looked, but I cannot find this simple answer. Thanks!

Here is the code... The toggle sections are bolded.

$.fn.SelectCustomizer = function(){
    // Select Customizer jQuery plug-in
    // based on customselect by Ace Web Design http://www.adelaidewebdesigns.com/2008/ … ith-icons/
    // modified by David Vian http://www.ildavid.com/dblog
    return this.each(function(){
        var obj = $(this);
        var name = obj.attr('id');
        var id_slc_options = name+'_options';
        var id_icn_select = name+'_iconselect';
        var id_holder = name+'_holder';
        var custom_select = name+'_customselect';
        obj.after("<div id=\""+id_slc_options+"\"> </div>");
        obj.find('option').each(function(i){
            $("#"+id_slc_options).append("<div id=\"" + $(this).attr("value") + "\" class=\"selectitems\"><span>" + $(this).html() + "</span></div>");
        });
        obj.before("<input type=\"hidden\" value =\"\" name=\"" + this.name + "\" id=\""+custom_select+"\"/><div id=\""+id_icn_select+"\">" + this.title + "</div><div id=\""+id_holder+"\"> </div>").remove();
        $("#"+id_icn_select).click(function(){
            $("#"+id_holder).toggle(700);
        });
        $("#"+id_holder).append($("#"+id_slc_options)[0]);
        $("#"+id_holder+ " .selectitems").mouseover(function(){
            $(this).addClass("hoverclass");
        });
        $("#"+id_holder+" .selectitems").mouseout(function(){
            $(this).removeClass("hoverclass");
        });
        $("#"+id_holder+" .selectitems").click(function(){
            $("#"+id_holder+" .selectedclass").removeClass("selectedclass");
            $(this).addClass("selectedclass");
            var thisselection = $(this).html();
            $("#"+custom_select).val(this.id);
            $("#"+id_icn_select).html(thisselection);
            $("#"+id_holder).toggle(700)
        });
    });
}

/* Fire CustomSelect */
$(document).ready(function() { $('#loginselect').SelectCustomizer();

Re: change jQuery toggle slide in direction?

Ideas?

Re: change jQuery toggle slide in direction?

Take a look at http://www.learningjquery.com/2009/02/s … directions

Re: change jQuery toggle slide in direction?

Thanks Ben! That seems to be a good start. I'll play with, but I already know I'm going to have some trouble integrating it. But I don't see in his examples exactly what I'm after. See in my test page here http://www.visibilityinherit.com/projec … select.php how the drop fades in from the top/left corner? I need it to simply fade in from the bottom/right corner. Thanks for looking!

Re: change jQuery toggle slide in direction?

For items to slide in from right bottom, it's required that those items are positioned absolutely WITHIN a relatively positioned block element. Also it has to be aligned by bottom:x and right:x css.

However seeing the hidden select list is positioned absolutely but not within a relatviely positioned element, I can't see any way to achieve what you're trying to do.

However, in my opinion, a select box sliding down is much better and looks correct as opposed to sliding up. tongue

Last edited by BeeDev (2009-10-29 04:21:33)

Re: change jQuery toggle slide in direction?

Hello, smile

But it is in a relative positioned container - the form.  And the look of the direction. Yes for that one, top left looks best. But it's for another where bottom right would look better.

Re: change jQuery toggle slide in direction?

Jeese, it was the easiest fix.

#login #loginselect_holder {
top:auto;
left:auto;
bottom:25px;
right:175px;

}

Re: change jQuery toggle slide in direction?

BeeDev wrote:

For items to slide in from right bottom, it's required that those items are positioned absolutely WITHIN a relatively positioned block element. Also it has to be aligned by bottom:x and right:x css.

yep tongue