Jump to content


Photo

change jQuery toggle slide in direction?


  • Please log in to reply
7 replies to this topic

#1 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 27 October 2009 - 08:02 PM

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.adelaidew...ect-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();
  • 0

#2 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 28 October 2009 - 10:47 AM

Ideas?
  • 0

#3 Ben

Ben

    Administrator

  • Administrators
  • 5,638 posts
  • LocationChico, CA

Posted 28 October 2009 - 11:35 AM

Take a look at http://www.learningj...rent-directions
  • 0
Benjamin Falk
Falken Creative : Twitter

#4 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 28 October 2009 - 11:51 AM

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.visibilit...ustomselect.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!
  • 0

#5 BeeDev

BeeDev

    Advanced Member

  • Member
  • PipPipPipPip
  • 336 posts

Posted 29 October 2009 - 04:21 AM

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, 29 October 2009 - 04:21 AM.

  • 0

#6 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 29 October 2009 - 06:11 AM

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.
  • 0

#7 PicnicTutorials

PicnicTutorials

    Eric

  • Advanced Member
  • PipPipPipPip
  • 2,431 posts
  • LocationCarlsbad, CA

Posted 29 October 2009 - 06:51 AM

Jeese, it was the easiest fix.

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

}
  • 0

#8 BeeDev

BeeDev

    Advanced Member

  • Member
  • PipPipPipPip
  • 336 posts

Posted 29 October 2009 - 10:05 AM

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
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users