catonthecouchproductions
asked on
Custom jquery dropdown - one at a time - buggy
At this site: ryanbent.com I am working on a custom dropdown using jQuery where I have only ONE dropdown box show at a time,
e.g. if you click contact, then click about, contact will slide back up, and about will slidedown.
To be more specific try this, clck: contact then about then portfolio then contact, see on on the last click it just hides and has a different behavior. Now try clicking the others again, see what is happening?
The first three clicks seem to work fine, but after that you will see what happens. It just fades away and the pattern is lost.
My jQuery is below, I broke it in to different sections, and they all look good.
Thoughts?
Thanks,
Ryan
e.g. if you click contact, then click about, contact will slide back up, and about will slidedown.
To be more specific try this, clck: contact then about then portfolio then contact, see on on the last click it just hides and has a different behavior. Now try clicking the others again, see what is happening?
The first three clicks seem to work fine, but after that you will see what happens. It just fades away and the pattern is lost.
My jQuery is below, I broke it in to different sections, and they all look good.
Thoughts?
Thanks,
Ryan
$("#contact,#about,#portfolio").click(function(){
$('#top').css({'z-index':'50'})
$("#fuzz").fadeIn();
return false;
});
function HideMenu(){
//$('.open').stop().animate({'top':'-480px'},500,"linear");
$(this).removeClass("open");
$("#fuzz").fadeOut();
}
function checkMenu(){$('.open').slideUp().removeClass("open")}
$('#contact').toggle(function(){
checkMenu();
$('#contact-pull').show().animate({'top':'-50px'}).addClass("open");
//$('#contact-pull').slideDown();
}, function() {
HideMenu();
$('#contact-pull').animate({'top':'-180px'})
});
$('#about').toggle(function() {
checkMenu();
$('#about-pull').show().animate({'top':'55px'}).addClass("open");
// $('#about-pull').slideDown();
}, function() {
HideMenu();
$('#about-pull').animate({'top':'-465px'})
});
$('#portfolio').toggle(function(){
checkMenu();
$('#portfolio-pull').animate({'top':'75px'}).addClass("open");
}, function() {
HideMenu();
$('#portfolio-pull').animate({'top':'-150px'});
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
granted, you are correct... however what I meant was not to use toggle here at all... you can use the links's custom attributes in order to store content's display state... so then you dont need toggle anymore when you can determine the visibility state of the links content upon clicking on the link
ASKER
Ok, I get that part, that makes sense. But do you see what it does now? If you follow that pattern it works, then after the three I said it gets all messed up.
I will switch toggle to click. I have two functions that check the state.
Ryan
I will switch toggle to click. I have two functions that check the state.
Ryan
also here
function HideMenu(){
//$('.open').stop().animat e({'top':' -480px'},5 00,"linear ");
$(this).removeClass("open" );
$("#fuzz").fadeOut();
}
$(this).removeClass("open" ); - there is no reference for "this" reference... so the class "open" does not get removed when this function gets called
function HideMenu(){
//$('.open').stop().animat
$(this).removeClass("open"
$("#fuzz").fadeOut();
}
$(this).removeClass("open"
ASKER
Let me try this and go through and switch to click, thank you!
ASKER
Then change this to the class?
$(this).removeClass("open" );
$(this).removeClass("open"
ASKER
What do you think of this?
Instead of toggle, use click which just gets fired once, so on click then animate down. This will remove the close function of the toggle, and instead I can have the function test for it?, so all toggles go to click like you suggested and minimize those functions.
Something like that?
Instead of toggle, use click which just gets fired once, so on click then animate down. This will remove the close function of the toggle, and instead I can have the function test for it?, so all toggles go to click like you suggested and minimize those functions.
Something like that?
ASKER
Check out the code, along those lines?
On click, run checkmenu (if open classs then close?)
then animate back down
Thanks,
Ryan
On click, run checkmenu (if open classs then close?)
then animate back down
Thanks,
Ryan
function checkMenu(){$('.open').slideUp().removeClass("open")}
$('#contact').click(function(){
checkMenu();
$('#contact-pull').show().animate({'top':'-50px'}).addClass("open");
//$('#contact-pull').slideDown();
});
$('#about').click(function() {
checkMenu();
$('#about-pull').show().animate({'top':'55px'}).addClass("open");
// $('#about-pull').slideDown();
});
$('#portfolio').click(function(){
checkMenu();
$('#portfolio-pull').animate({'top':'75px'}).addClass("open");
});
ASKER
If you check http://ryanbent.com/ now, i think the code is throwing it in a loop with running that function over again.
Ryan
Ryan
ASKER
What would be the best way to just check for DONt execute on last one clicked.
why cant you use something like this:
$(function(){
$('a.resume').lightBox();
$("#fuzz").css("height", $(document).height());
$('#contact, #about, #portfolio').click(function(){
if ($('#'+$(this).attr('id')+'-pull').hasClass('open')) {
$('#'+$(this).attr('id')+'-pull').removeClass('open');
$("#fuzz").fadeOut();
} else {
$('#top').css({'z-index':'50'});
$("#fuzz").fadeIn();
$('#'+$(this).attr('id')+'-pull').slideToggle().addClass("open");
}
return false;
});
});
even cleaner
$(function(){
$('a.resume').lightBox();
$("#fuzz").css("height", $(document).height());
$('#contact, #about, #portfolio').click(function(){
clicked_link_id = $(this).attr('id');
if ($('#'+clicked_link_id+'-pull').hasClass('open')) {
$('#'+clicked_link_id+'-pull').removeClass('open');
$("#fuzz").fadeOut();
} else {
$('#top').css({'z-index':'50'});
$("#fuzz").fadeIn();
$('#'+clicked_link_id+'-pull').slideToggle().addClass("open");
}
return false;
});
});
ASKER
Ryan