jQuery Menu Roundup

“Whats a good jQuery menu?” is a question I hear quite frequently on blogs and forums. As jQuery is such a simple language to learn, most people code their own for their own sites. I’ve compiled a list of 3 menu plugins, and and 5 ‘custom’ solutions that people have setup.

http://p.sohei.org/jquery-plugins/menu/
Latest release: Jan 07

This plugin was constructed to emulate a desk top apps menu. They don’t close until clicked off and are activated by clicking them (rather than hovering). It requires the jQuery dimensions plugin to perform ‘smart calculations’.

Example Usage: http://p.sohei.org/stuff/jquery/menu/demo/demo.html
Download: http://p.sohei.org/jquery-plugins/menu/

http://jdsharp.us/jQuery/plugins/jdMenu/
Latest release: April 08

Although the jdMenu plugin is only 3kb itself, it depends on or looks a hell of a lot better with the plugins dimension, positionBy and bgiframe. jdMenu boasts keyboard access and can be easily made into a verticle menu by changing an option.
Example Usage & Download: http://jdsharp.us/jQuery/plugins/jdMenu/

http://users.tpg.com.au/j_birch/plugins/superfish/
Latest release: Sometime in 08

Superfish takes a CSS based dropdown then enhances it with jQuery so if the user has Javascript disabled, it degrades perfectly well. Since the menu is mainly CSS based, I’d imagine it’s a fair bit faster…

Philosophy of Object Oriented Programming and Software Design

Now, I am no expert in OOP or software design, but here’s a philosophy which might help you make the most of what you know about OOP and software design.

Writing better jQuery Code

We all know that jQuery is great, that you can do things in 2-3 lines in jQuery that you can in 20 lines of Javascript, but is your jQuery code starting to get a bit bulky?  Could you do things better?. I’m going to show you how to reduce a 20-25 line jQuery script into 3 lines by making the script dynamic, and give a few tips on improvement of your code.

What we want: When the user clicks a list item, it will show the corresponding div

PHP
ASP
Ruby
Python
AIR


http://www.php.net
http://www.asp.net
http://www.ruby-lang.org
http://www.python.org
http://www.adobe.com/products/air/

If i were a beginner and i was asked to write the script, i’d most likely code sections for each id/div such as below.. Once the specified link is clicked it’ll hide all the divs shown(the other content panels) and then it’ll fade in the relevant content panel.

$("ul#langs li#php").click(function(){

	$("div#container div").hide();
	$("div#container div#d_php").fadeIn("slow");

	});

	$("ul#langs li#asp").click(function(){

	$("div#container div").hide();
	$("div#container div#d_asp").fadeIn("slow");

	});

This is alright.. it does the job but for each id/div you need around 3 lines of code, your also…

Format your Twitter Stream with jQuery

Woo! Another screencast. In this one i show you how to include your twitter stream into your blog or website, and then format it using jQuery so your tweets have an alternating background colour.

jQuery UI 1.5

The jQuery team are approaching the UI 1.5 release, the library of demos is steadily building up and i personally cannot wait until its fully released . One of the “weaker” points of other Javascript User Interfaces and previous releases were the themes for the window borders etc. This has been solved in jQuery UI 1.5 with the theme roller. Its a well polished theme roller with features like the jQuery colour picker in it, you set the necessary classes and you can see a live demo of what it will look like on dialogs, sliders and tabs below, very nice.

Heres a video by the Filament group, who made the theme roller.

ThemeRoller for jQuery UI Screencast v4 from filamentgroup on Vimeo.

jQuery AJAX Login Series Pt1

Heyo. This is going to be the first of 4 tutorials on making a jQuery powered AJAX login system with a PHP backend. The series of tutorials will go like so.

1. Plan, code the form (This tutorial)
2. Code the PHP backend, make it work
3. Code the AJAX, implement it.
4. Tidy it up, make it look snazzy

Ok then. So we will have a forum with 2 inputs; username and password. The user will enter the details and we’ll use PHP to authenticate them. If its true, we can set a cookie or echo some text. We will then implement jQuery’s AJAX and make the whole thing seemless. Some nice little fades will be added at the end.

So, the form. Its a plain and simple HTML form. Nothing special about it.

Username:

Password:

Thats all for now. Next lesson we will code the PHP and “make it work“.

Revising the jQuery Drop Down

This post is in reference to the jquery drop down menu tutorial .

Someone emailed me asking if the menu could truely slide in , vertically, not how it is now with the slide on a slight angle ( using jquery’s show / hide ). Its very easy to alter the existing code to make it truely slide.

Instead of using jQuery’s show and hide functions, we just use slideDown and slideUp in replace of them. So the jQuery looks like this..

$(document).ready(function(){

$("#drop_down").hide();
$("#drop_down").animate({

opacity:0.5

});

$("a:contains('Google')").click(function() {
$("#drop_down").slideDown("slow");

});

$("#drop_down").mouseout(function(){
$(this).slideUp("slow");

});
});

Making a Slide in Menu using jQuery (Video tutorial)

This video tutorial shows how to make a basic slide in/drop down menu using jQuery. The menu itself stylishly slides in and has transparencies so you can view data behind it.

Sorry for the low sound, i was trying something different with my microphone.

Manipulation in jQuery

So far you should have read/watched:

• Basics of jQuery and Slides
• Using Selectors to Select HTML Elements in jQuery

So you know the very basics of jQuery, and multiple ways to select the HTML element that you want to manipulate. In this tutorial i’ll show you how to manipulate that element after you have selected it; changing the contents, changing the HTML and getting values. I won’t be showing you slides/effects , that’ll be in a tutorial coming up.

I will be using the HTML example from the selectors tutorial, and ill only be calling on cells by using their id – im focusing on the manipulation rather than the selecting. Anywho, lets get into it. First the HTML code we’ll be manipulating.

One
Two
Three
Four
Five

Ok, say we want to change the text value of a column. We can do this using text() . Take note that text does not parse HTML, it keeps it as plain text.

$("#3").text("wowow");

This changes the value of the #3 td to wowow

What if we wanted to put some HTML in…

Selectors in jQuery

In this tutorial i’ll go over some of the frequently used Selectors and show you how to use them. Most of jQuery’s manipulations revolve around selectors, so it’s a vital skill to know.

One
Two
Three
Four
Five

So.. we want to select the first td. We do this by first selecting all the td tags and then use :first to select the first td. Using jQuery’s great chaining ability, we change the text.

  $("td:first").text("This is the altered first box");

jQuery also has dd and :even selectors. This will select the odd or even id’s. In this next example. We are selecting all of the odd td‘s , and then select the first one of them. Again , we use jQuery’s chainability.

 $("td:odd:first").text("We changed this using odd and first");

You need to be aware that selecting the odds/evens does not use the element ids. It just counts them. It starts from 0 and starts counting, not from 1. This is why it changes the second cell using the method above.

Now, lets match the…