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();

Vote up Vote down

Re: change jQuery toggle slide in direction?

Ideas?

Vote up Vote down

Re: change jQuery toggle slide in direction?

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

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

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!

Vote up Vote down

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 (October 29, 2009 4:21 am)

Vote up Vote down

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.

Vote up Vote down

Re: change jQuery toggle slide in direction?

Jeese, it was the easiest fix.

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

}

Vote up Vote down

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

Vote up Vote down