Jump to content
Stef's Coding Community
PicnicTutorials

change jQuery toggle slide in direction?

Recommended Posts

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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. :P

Edited by BeeDev

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 :P

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...