?
Solved

Custom jquery dropdown - one at a time - buggy

Posted on 2010-01-10
13
Medium Priority
?
328 Views
Last Modified: 2012-05-08
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

0
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
13 Comments
 
LVL 2

Accepted Solution

by:
HaloWebProjects earned 2000 total points
ID: 26279285
much better to use click instead of toggle... esp in this case...

have a attribute added to the menu links which will contain the state of visibility of its content section...

then upon click, you can see what value is set and thus determine what to do, to show or hide the section... and after you done it, set the attribute's value to the newly changed state...
0
 
LVL 1

Author Comment

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

Ryan
0
 
LVL 2

Expert Comment

by:HaloWebProjects
ID: 26279444
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
0
Get proactive database performance tuning online

At Percona’s web store you can order full Percona Database Performance Audit in minutes. Find out the health of your database, and how to improve it. Pay online with a credit card. Improve your database performance now!

 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 26279456
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
0
 
LVL 2

Expert Comment

by:HaloWebProjects
ID: 26279549
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
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 26279581
Let me try this and go through and switch to click, thank you!
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 26279599
Then change this to the class?

$(this).removeClass("open");
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 26279617
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?
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 26279641
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

0
 
LVL 1

Author Comment

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

Ryan
0
 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 26279692
What would be the best way to just check for DONt execute on last one clicked.
0
 
LVL 2

Expert Comment

by:HaloWebProjects
ID: 26289686
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

0
 
LVL 2

Expert Comment

by:HaloWebProjects
ID: 26289695
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

0

Featured Post

Percona Live Europe 2017 | Sep 25 - 27, 2017

The Percona Live Open Source Database Conference Europe 2017 is the premier event for the diverse and active European open source database community, as well as businesses that develop and use open source database software.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

801 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question