Link to home
Start Free TrialLog in
Avatar of catonthecouchproductions
catonthecouchproductionsFlag for United States of America

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
$("#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'});
        });

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of HaloWebProjects
HaloWebProjects

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of catonthecouchproductions

ASKER

this is what I have, check out the source code of the site. I can try click, see the method im doing?

Ryan
Avatar of HaloWebProjects
HaloWebProjects

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
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
also  here

function HideMenu(){
                //$('.open').stop().animate({'top':'-480px'},500,"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
Let me try this and go through and switch to click, thank you!
Then change this to the class?

$(this).removeClass("open");
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?
Check out the code, along those lines?

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");
	});

Open in new window

If you check http://ryanbent.com/ now, i think the code is throwing it in a loop with running that function over again.

Ryan
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;
	});     


});

Open in new window

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


});

Open in new window