change jQuery toggle slide in direction?

[PicnicTutorials]

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/08/01/adelaide-web-designs-releases-customselect-with-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("

");

obj.find('option').each(function(i){

$("#"+id_slc_options).append("

" + $(this).html() + "

");

});

obj.before("

" + this.title + "

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

[PicnicTutorials]

Ideas?

[falkencreative]

Take a look at http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

[PicnicTutorials]

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/projects/customselect.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!

[BeeDev]

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.

Edited October 29, 2009 by BeeDev

[PicnicTutorials]

Hello,

 

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.

[PicnicTutorials]

Jeese, it was the easiest fix.

 

#login #loginselect_holder {

top:auto;

left:auto;

bottom:25px;

right:175px;

}

[BeeDev]

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