• Coding

  • [jQuery] Tabbed Navigation Menu

Hey guys,

I'm trying to build a tabbed navigation menu using jQuery and CSS. I have to admit that I was never good with jQuery and I refer to the API very often. But sometimes I cannot figure it out on my own, especially because I do not know how to debug Javascript code! So anyway, to make a long story short here's my jQuery functions:
$(function() {  
	scrollAds();
	tabNavigation();
}); 

function tabNavigation() {
	$("#mainNav li").click(function() { 
		var menuItems = $("#mainNav li").toArray();
		for(var i = 0; i < menuItems.length(); i++) {
			if(menuItems[i].hasClass("selected"))
				menuItems[i].removeClass("selected");	
		}
		$(this).addClass("selected");
	});
}
Any suggestions?

P.S: If you know of a good tool/plugin that helps me debug javascript/jquery code please let me know about it. Thank you.
there is firebug for firefox, I usually do not use any tool for debugging javascript.

for tabbed navigation what don't you use jQuery UI? it is easy to use/customize.

as for your code, why loop on all the li when you select?
save a reference to the last one selected and just say
if(last_one) $(last_one).removeClass("selected");
last_one = this;
$(this).addClass...
I actually thought about this but the problem is the following:
The page loads up with the first tab already selected (so it already has the "selected" class). Hence I cannot reference it like you suggested. But I went ahead and tried to do it, I was partially successful. I can see the clicked tab getting selected class but then it goes away and gets back to the initially selected tab. I think that's because how I'm structuring my code... Here's what I've got so far:
$(function() {
scrollAds();
tabNavigation();
});

function tabNavigation() {
var currentTab = $("#mainNav li.selected");
$("#mainNav li").click(function() {
currentTab.removeClass("selected");
currentTab = $(this);
$(this).addClass("selected");
});
}
I'll try to play around with it and see if I could get it fixed. But if you have any suggestions please don't hesitate to post. :)
Like ZeRaW mentioned you should probably be using the jQuery UI tabs plugin instead of trying to roll your own. Here's the link.

However, to do what you are trying to do I wouldn't worry about maintaining a "currentTab" variable. You don't need to. Instead I would just call: 
$("#mainNav li").removeClass('selected');
$(this).addClass('selected');
Since you will only have one tab selected at a time, why not just tell jQuery to remove the class from them all?
and you can download Eclipse IDE for javascript
then you can debug
or just do it the old fashioned way, "alert"
goodluck
Zef wroteLike ZeRaW mentioned you should probably be using the jQuery UI tabs plugin instead of trying to roll your own. Here's the link.

However, to do what you are trying to do I wouldn't worry about maintaining a "currentTab" variable. You don't need to. Instead I would just call: 
$("#mainNav li").removeClass('selected');
$(this).addClass('selected');
Since you will only have one tab selected at a time, why not just tell jQuery to remove the class from them all?
I second that, also as mentioned before, FireBug is the tool for debugging javascript (when using FF).
Ok thanks a lot for the feedback guys, highly appreciated :)

I implemented the jQuery UI plugin. It works perfectly the way I want it to, which solved my problem (it even solved some issues with displaying my site in the dreaded IE ;) ). But now I have another problem. I'm still using the jQuery UI library, and I want to use the Dialog plugin. I want to use it more than once actually, and not all of the dialogs should have the same styles. Is that doable? Because as you know, the class names are generated by the JS code, and I do not know of a way to edit those so I could distinguish one dialog box from the other... Any suggestions?
Your code seems ok at first glance. For debugging you might want to use Firebug in conjunction with "console.log()" calls from within your code. Be aware that console.log() (and your javascript) will fail if firebug is not available (disabled or not installed), so you'll need to check for the presence of firebug (forgot how to do that) or weed the console.log calls once you're done developing.
Kassem wroteI want to use the Dialog plugin. I want to use it more than once actually, and not all of the dialogs should have the same styles. Is that doable?
Yes, you can specify a class to give the dialog when you instantiate it: 
$( ".selector" ).dialog({ dialogClass: 'special_style' });
There are other options parameters too, like height, width, and whether it is resizable.

To see more options that you have, click on the "Options" tab in the documentation.
10 days later
Ok I haven't worked on a site for a while now because I've been busy with other projects but it still doesn't work... :/ Take a look:



Here's my markup and my code: 
<div id="dialog1" class="legal" title="Basic modal dialog">
	<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

.legal { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.legal .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative;  }
.legal .ui-dialog-title { float: left; margin: .1em 16px .2em 0; } 
.legal .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.legal .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.legal .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.legal .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.legal .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.legal .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.legal .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.legal .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
$(function() {  
	scrollAds();
	
	$("#tabs").tabs();
	$("#dialog1").dialog({
			height: 140,
			modal: true,
			dialogClass: 'legal'
		});
});
Why isn't it working?
Based on your screenshot it seems like the dialogue is actually being displayed, it's just a styling issue. Is something else not working? Can you be more specific?

It seems that you are not including a jQuery UI theme, so if you do that it should fix the basic display issues you are having. You can use the jQuery UI ThemeRoller to customize the theme to a certain degree. Then just include that stylesheet (with the asset folder that comes with it in the same directory) above your custom stylesheets and you can override whatever styles you need.

Generally though, I think it is better not to fight too much with the default styling unless you really need to. It can get out of hand and not really worth it if you try to customize it too much, but it is doable if you need to.

Hope that helps!