PicnicTutorials Posted October 28, 2009 Report Share Posted October 28, 2009 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(); Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted October 28, 2009 Author Report Share Posted October 28, 2009 Ideas? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted October 28, 2009 Report Share Posted October 28, 2009 Take a look at http://www.learningjquery.com/2009/02/slide-elements-in-different-directions Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted October 28, 2009 Author Report Share Posted October 28, 2009 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! Quote Link to comment Share on other sites More sharing options...
BeeDev Posted October 29, 2009 Report Share Posted October 29, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted October 29, 2009 Author Report Share Posted October 29, 2009 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted October 29, 2009 Author Report Share Posted October 29, 2009 Jeese, it was the easiest fix. #login #loginselect_holder { top:auto; left:auto; bottom:25px; right:175px; } Quote Link to comment Share on other sites More sharing options...
BeeDev Posted October 29, 2009 Report Share Posted October 29, 2009 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.