WebPangea: Draggable scrolling list with jQuery<

DraggableList is a jquery plugin for making a list or other html element scroll within a draggable container.

Check out a demo here

Simply point the pluggin at an unordered list (or other element), specify a containment size and the list will become draggable. Drag the list up and down to scroll its contents.

Example Usage


<style type="text/css">
   body{ font-family:Georgia;}
   .myList {list-style:none; margin:0px; padding:0px;}
   .myList li{ height:50px; border-bottom:solid 1px #dedede; margin:0px; padding:0px 2px 0 2px;}
   .draggableList{ border:solid 1px black;}
</style>

<script type="text/javascript">
$(document).ready(function() {
$('.myList').draggableList({height:150, listPosition:0});
});
</script>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>

Options

The plugin has a bunch of options with default values as follows:

        cursor: 'n-resize',
    height: '150',
    width: '100',
    listPosition: '0',
    panelCssClass:'draggableList'

cursor

CSS cursor style on hovering over the list

height

Numeric-value – pixels The height of the element which will hold the list (it’s overflow will be set to hidden)

width

Numeric-value – pixels The width of the element which will hold the list

listPosition

Value between 0 and 100 : Where abouts the list will be positioned relative to it’s container. When 0, the list will appear scrolled right to the top, so the first element will be at the top of the container. When set to 100 the list will be scrolled right to the bottom

panelCssClass

Name of the css class that is added to the container item. Used to style the container.

Dependancies

DraggableList dependancies on:

Source

Head across to http://code.google.com/p/draggablelist/ and grab the plugin now.

jQuery – stop an ajax call!

It’s a simple task with no simple question, although in jQuery, as I mentioned now, everything is very simple. Even this task.

In a short example we’ve a simple AJAX call with very large request.

xhr = $.ajax({
    url : 'www.example.com?some-large-call',
    success : function(responseText) {
        // some DOM manipulation
    }
});

But what if something changes the data we’d like to request with this call even before the response has come. For example I click on a category in the site but before all the data has come I’d prefer to see other category’s data.

In this case I just add some more code to the example. Actually it’s important to notice that $.ajax is returning an object that can be “aborted”.

var xhr = null;

xhr = $.ajax({
    url : 'www.example.com?some-large-call',
    success : function(responseText) {
        // some DOM manipulation
    }
});

$(document).click(function() { xhr.abort() });

As you can see this is really a mixture between working and pseudo code, so it will require a little bit more improvisation!

jQuery Lightbox / Modal

There are SO MANY different types of lightbox scripts in the wild, and while most of them are absolutely fantastic (shadowbox being one of my favorites) most of them are very limited in the control that they give you over the style, function and code. To make things worse, most of these lightbox scripts are also 5k or bigger, which is 5k more than you need sometimes. If you’re like me, and you do a lot of customization or want to tweak your code to be as fast as possible, then you’ll want this simple little jquery lightbox plugin. Style your lightbox exactly how you’d like and then simple invoke the modal() function and you’ll be able to trigger the lightbox.

jQuery.fn.modal = function() {
	return this.each(function(){
	var ah = $(this).height();
        var wh = $(window).height();
        var nh = (wh/2) - (ah/2);

        var aw = $(this).width();
        var ww = $(window).width();
        var nw = (ww/2) - (aw/2);

        // Trim body height, append overlay, and disable scrolling (this can be undone with a custom close button)
        $("body").height(wh).css('overflow','hidden').append('<div><\/div>');
        $(".overlay").fadeTo("slow", .8);
        $(this).css({'top':nh, 'left':nw}).fadeIn("slow");
	});
};

This code is what i use for the overlay, you can customize as you’d like. The actual div is appended to the body with JavaScript.

.overlay { 
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 110%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.8;
	filter: alpha(opacity=80);
}

This is an example of a modal/lightbox i did using this plugin. Very simple CSS:

.modal { 
	background: #00121b; 
	min-height: 54.5em;
	width: 56.5em; 
	border: 1px solid #111e24; 
	box-shadow: 0 0 1em #000;
	-moz-box-shadow: 0 0 1em #000;
	-webkit-box-shadow: 0 0 1em #000;
	display: none;
	position: absolute; 
	z-index: 1002; 
}

10 Examples of Impressive jQuery Accordion's – The Designed

There are always new ways to use jQuery, but I never want to discredit some of the most common ways. I have compiled a list of 10 of the most impressive implementations of jQuery accordion’s that I’ve seen on the web. If you know of any others, please share in the comments!

1. Unowhy

Unowhy

2. Helloewy

Loewy

3. Djafar Inal

Djafar Inal

4. Made by Elephant

Made by Elephant

5. Engage Interactive

Engage Interactive

6. Jaboh

Jaboh

7. Nerve Music Store

Nerve Music Store

8. Loewy Design

Loewy Design

9. Alex Cohaniuc

Alex Cohaniuc

10. EyeDraw

EyeDraw

Create a jQuery calendar with AJAX, PHP, and a remote data source

This tutorial demonstrates how to create a jQuery calendar with PHP and Javascript using a remote data source. This is an extension of my previous article about the jQuery calendar I developed for the Salvation Army of Wake County website.

The final calendar in this tutorial contains a hyperlink for each day of the month. When a hyperlink is clicked, a list of events for that day is requested from a remote script, cached client-side, and displayed on the page.

See a live demo

Download project ZIP file
Tutorial Requirements

You should be comfortable with HTML, jQuery, and PHP. However, I explain the code step-by-step to show how all of the pieces fit together. In this tutorial I use PHP and a SQLite database; however, you may use any database for which there is a PHP PDO database driver.
Tutorial Overview

There are several pieces that work together in this tutorial.

*
/frontend.php

This is the epicenter of the tutorial. You will view this file in a web browser. This file provides the calendar is HTML markup, includes the jQuery calendar script, and displays the calendar and its events.
*
/backend.php

This connects frontend.php and the database. This PHP script is called remotely from frontend.php and accepts a GET parameter called “timestamp”. This script queries the database for all events that occur on the same day as the timestamp parameter. The events returned from the database are output in an HTML unordered list.
*
/scripts/calendar.js

This Javascript file is included into frontend.php and uses jQuery to attach onclick event handlers to each hyperlink in the calendar table. Each event handler will send an HTTP request to backend.php along with a unique “timestamp” GET parameter. The HTTP response from each HTTP request is cached client-side to avoid duplicate HTTP requests. This script also inserts the HTML returned from backend.php into the document object model of frontend.php.
*
/includes/calendar.php

This PHP script contains a function written by David Walsh that creates the calendar is initial HTML markup. I made several edits to David is original function for this tutorial. You can read more about my edits in this file is header. This file is included into and called from frontend.php.
*
/db/calendar.db

This is the SQLite database file that contains a tuple for each calendar event. This file is referenced from backend.php with a PDO database driver.

Step 1: Setup the database

First, create and prepare the database using the schema shown below. You need to create the database and load it with the sample data before moving on with this tutorial. If you use SQLite, create a database file called calendar.db in the “db” directory within the project directory. If you use the ZIP download for this project, the SQLite database has already been created for you.

01.CREATE TABLE events (
02.    id INTEGER PRIMARY KEY,
03.    title TEXT,
04.    slug TEXT,
05.    time INTEGER
06.);
07.INSERT INTO events (title,slug,time) VALUES (Soccer Game, isoccer-game,1250256000);
08.INSERT INTO events (title,slug,time) VALUES (Basketball Game,asketball-game,1250361000);
09.INSERT INTO events (title,slug,time) VALUES (Hockey Game,hockey-game,1250367840);
10.INSERT INTO events (title,slug,time) VALUES (Lacrosse Game,lacrosse-game,1250438700);
11.INSERT INTO events (title,slug,time) VALUES (Ping Pong Game,ping-pong-game,1250463600);

`id` is an auto-incrementing integer primary key
`slug` is a URL-friendly text representation of the event title
`time` is an integer UNIX timestamp

Next, I establish a PHP PDO database connection in the backend.php file. Open backend.php in a plain-text editor and edit line 10 to establish a connection to the database. If you use the ZIP download for this project, the database connection has already been created for you. Visit the PHP PDO website to learn more about creating PDO database connections.

10.$db = new PDO( isqlite:db/calendar.db);
Step 2: Create the calendar markup

Next, I create the calendar is HTML markup with PHP. I see no point in re-inventing the wheel, so I use a great PHP calendar generation script by David Walsh. I make several changes to David is original function. You can read about my changes in the header of /includes/calendar.php.

The calendar is displayed in frontend.php. First, I include the calendar function into frontend.php on line 1.

1.<?php include(includes/calendar.php); ?>

Next, I call the draw_calendar() method in frontend.php on line 16. This outputs the entire calendar HTML markup.
view sourceprint?
15.<h1>August 2009</h1>
16.<?php echo draw_calendar(8,2009); ?>
17.<div id=”calendar-events”></div>
Step 3: Setup the backend PHP script

The backend.php script connects frontend.php to the database. The backend.php script receives an XMLHttpRequest from frontend.php that looks like this:

backend.php?timestamp=1249966800

Next, the backend.php script asks the database for all events that occur on the same day as the timestamp. Let is walk through the code step by step.

10.$db = new PDO( isqlite:db/calendar.db);

First, I establish a PDO connection to the SQLite database. If you do not use the database provided in the ZIP download for this project, edit line 10 to establish a PDO connection to your own database.

12.//Set date from GET timestamp parameter
13.if( !isset($_GET[ imestamp]) )
14.    die(You must provide a timestamp);
15.else
16.    $date = getdate($_GET[ imestamp]);

Next, I verify that a timestamp is specified. If a timestamp is not specified, I return an error message to frontend.php. Else, I extract an array of date and time information based on the provided timestamp.

18.//Define start and end timestamps for the requested day
19.$time_start = mktime(0,0,0,$date[ amon],$date[ amday],$date[year]);
20.$time_end = mktime(23,59,59,$date[ amon],$date[ amday],$date[year]);

Using the timestamp provided in the previous step, I extrapolate two additional timestamps: one for the beginning of the same day and one for the end of the same day.

22.//Fetch events from database as associative array
23.$stmt = $db->prepare(SELECT id, title, slug, time FROM events WHERE time BETWEEN ? AND ? ORDER BY time ASC);
24.$stmt->bindParam(1,$time_start,PDO::PARAM_INT);
25.$stmt->bindParam(2,$time_end,PDO::PARAM_INT);
26.$stmt->execute();
27.$events = $stmt->fetchAll(PDO::FETCH_ASSOC);

Next, I create a PDO statement and execute a SQL query against the database. This SQL query returns all events that start on the same day as the specified timestamp. Notice how I use the two extrapolated timestamps as boundaries for the BETWEEN clause. The returned events are collected into an associative array referenced by the $events variable.

29.//Send output
30.if( !count($events) )
31.    exit(<p>No events were found</p>);
32.$output = <ul>;
33.foreach( $events as $event )
34.    $output .= <li>.strftime(“%l:%M %p”,$event[ ime]). – .$event[ itle].</li>;
35.$output .= </ul>;
36.exit($output);

Finally, I output an HTML unordered list containing all of the events returned by the SQL query.
Step 4: Add XMLHttpRequest behavior with jQuery

In this last step of the tutorial, I add behavior to frontend.php with jQuery. The Javascript attaches onclick event handlers to each hyperlink in the calendar table. When a hyperlink is clicked, an XMLHttpRequest is sent to backend.php with a unique timestamp parameter. When a response is received from backend.php, the HTML returned by backend.php is inserted into the document object model (DOM) to reveal the events for the clicked day.

You must provide the absolute or relative path to the backend.php on line 4 of /scripts/calendar.js. This path will be different than the path shown below.

01.jQuery(document).ready(function($){
02.
03.    //CHANGE ME!!! Define the relative or absolute path to your backend script
04.    var remoteUrl = /~joshlockhart/calendar/backend.php;
05.
06.    //Initialize the HTTP cache
07.    var remoteCache = new Array();
08.
09.    //For each link in the calendar…
10.    $( able.calendar a).each(function(i,item){
11.
12.        //Unique ID for the link
13.        var linkId = item.id;
14.
15.        //Unique URL for the link
16.        var linkUrl = remoteUrl+?timestamp=+linkId;
17.
18.        //Attach onclick event handler
19.        $(this).click(function(){
20.            var calendarEvents = $(#calendar-events);
21.            calendarEvents.slideUp(fast,function(){
22.                if( remoteCache[linkId] != undefined ) {
23.                    calendarEvents.html(remoteCache[linkId]);
24.                    calendarEvents.slideDown(fast);
25.                } else {
26.                    calendarEvents.load(linkUrl,function(){
27.                        remoteCache[linkId] = calendarEvents.html();
28.                        calendarEvents.slideDown(fast);
29.                    });
30.                }
31.            });
32.            return false;
33.        });
34.
35.    });
36.
37.});

The jQuery script caches all responses received from backend.php. If a calendar link is clicked more than once, the list of events for the given day is retrieved from cache if available instead of sending a duplicate HTTP request. This saves bandwidth and significantly increases the responsiveness of the jQuery calendar.

This script is saved in the external Javascript file /scripts/calendar.js. I include this external Javascript on line 12 of frontend.php.
Step 5: View the finished jQuery calendar

View frontend.php in a web browser and click on the 14th, 15th, or 16th. You should see a list of events appear for each day. Feel free to add more events to your database and watch them appear on the calendar. Post questions or comments using the form below.

jQuery AutoComplete in ASP.NET MVC Framework

Goal: jQuery AutoComplete in ASP.NET MVC Framework with callback to customize result. Platform/Environment: Asp.Net Mvc version 1; jQuery 1.3.2; Autocomplete – jQuery plugin 1.0.2.

Quick Solution:

Here I am simply returning a list of account names:

$(‘#Name’).autocomplete(
$(‘#ajaxListMatchingAccountNamesUrl‘).val(), { delay: 10, minChars: 3, matchSubset: 1, matchContains: 1, cacheLength: 10, autoFill: true, mustMatch: false, selectFirst: true, max: 15 }
);

ajaxListMatchingAccountNamesUrl – this is a hidden input control in my master page that contains the url that I set as follows so as to allow the Mvc framework to set it dynamically:

<input id=”ajaxListMatchingAccountNamesUrl” type=”hidden” value=”<%=Url.RouteUrl(new {controller = “Account”, Action = “GetMatchingAccounts”})%>” />

Here is the C# controller action:

[AcceptVerbs(HttpVerbs.Get)]
public string GetMatchingAccounts(string q)
{
if (String.IsNullOrEmpty(q))
return null;

var sb = new StringBuilder();
foreach (AccountNameIdDTO dto in _accountRepository.SearchForAccountsStartingWithNameSuffixKey(q))
{
sb.AppendLine(dto.Name);
}
return sb.ToString();
}

Complex Solution:

A situation where my account names may be the same for different acounts. In this scenario I let the server-side action append the unique ID to the name, surrounded by brackets: My Account Name (23). This way when the user selects the account, I store the name in the textbox and the ID is parsed out and stored in a protected/readonly textbox.

var $accountMaintenanceWrapper = $(‘div#AccountMaintenanceWrapper’);
$accountMaintenanceWrapper.find(“#MasterAccount”).autocomplete(
$(‘#ajaxListMatchingAccountNamesWithIdSuffixUrl’).val(),
{
delay:10,
minChars:3,
matchSubset:1,
matchContains:1,
cacheLength:10,
autoFill:true,
mustMatch: false,
selectFirst : true,
max: 15,
formatResult: function(row, i, total) //this is the actual value that will be placed inside the textbox
{
//Parse out the ID suffix in brackets and place only the account name itself into the textbox for the name
$accountMaintenanceWrapper.find(‘#MasterAccountId’).val(i.substring(i.indexOf(‘(‘)+1,i.indexOf(‘)’)));
return i.substring(0,i.indexOf(‘(‘));
}
}
);

$accountMaintenanceWrapper.find(“#MasterAccount”).result(SetupCallBackForMasterAccount).next().click(function() {
$(this).prev().search();
});

//When the auto complete textbox is empty, delete the key code from the text
$accountMaintenanceWrapper.find(“#MasterAccount”).bind(‘keyup’,function() {
if ($(this).val() == ”)
{
$accountMaintenanceWrapper.find(‘#MasterAccountId’).val(”)
}
});

//This function parses the matched auto complete value’s suffix key (in between parenthesis)
function SetupCallBackForMasterAccount(event, data, formatted) {
$(‘#MasterAccountId’).val( !data ? ” ” : formatted.substring(formatted.indexOf(‘(‘)+1,formatted.indexOf(‘)’)));
}

Here is the C# code controller action:

[AcceptVerbs(HttpVerbs.Get)]
public string GetMatchingAgentsWithIdSuffix(string q)
{
if (String.IsNullOrEmpty(q))
return null;

var sb = new StringBuilder();
foreach (AccountNameIdDTO dto in _accountRepository.SearchForAccountsStartingWithNameSuffixKey(q))
{
if ((Repository<IAccount>.Get(dto.Id) as Agency) != null)
sb.AppendLine(dto.Name + “(” + dto.Id + “)”);
}
return sb.ToString();
}

Couple of pointers:

  • $accountMaintenanceWrapper – I declare this variable as I am referencing this container several times and to speed performance let jQuery find it and set the reference only once.
  • MasterAccountId – this is the readonly textbox that will contain the value of the unique ID
  • MasterAccount – this is the textbox where the user enters the name of the account
  • minChars:3 – Starts the search after/on three characters
  • selectFirst : true – if the user does not click on the name and simply tabs out will select the first one

38 jQuery And CSS Drop Down Multi Level Menu Solutions | Graphic

Hello again, it’s time for comprehensive programming article. Here you’ll find 38 mainly jquery and CSS based drop-down or just multi level menu tutorials with down loadable files and explanations as well. My favorite here is the first pick – Outside the box with very unique navigation menu. It’s always good to have such reference articles in your bookmarks and when you have to create some really big website with a lot of content and menu sections – just return here. Shorten your developing process with already premade menus, which can be easily modified with little touch of CSS.

1. “Outside the Box” Navigation with jQuery

This tutorial will cover a few ways to do just that with OS X style docks and stacks navigation.

outside-box-drop-down-multi-level-menu-navigation

Preview Demo

2. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial you will learn how to create a sexy drop down menu that can also degrade gracefully.

sexy-jquery-drop-down-multi-level-menu-navigation

Preview Demo

3. Designing the Digg Header: How To & Download

Navigation is compacted with the use of simple drop-down menus.

digg-header-drop-down-multi-level-menu-navigation

Preview Demo

4. Create The Fanciest Dropdown Menu You Ever Saw

fanciest-drop-down-multi-level-menu-navigation

Preview Demo

5. A circular menu with sub menus

A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon.

circular-drop-down-multi-level-menu-navigation

Preview Demo

6. A Different Top Navigation

In this tutorial you will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

different-jquery-drop-down-multi-level-menu-navigation

Preview Demo

7. Perfect signin dropdown box likes Twitter with jQuery

Nice tutorial showing you how to create a login drop down with Twitter style using jQuery.

twitter-drop-down-multi-level-menu-navigation

Preview Demo

8. Sliding Jquery Menu Tutorial

This tutorial will show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

sliding-jquery-drop-down-multi-level-menu-navigation

Preview Demo

9.Fancy Sliding Menu for Mootools

fancy-sliding-drop-down-multi-level-menu-navigation

Preview Demo

10. Create Vimeo-like top navigation

I’ve featured this Janko’s tutorial some time ago, but sometimes I will repeat myself, since this article is completely dedicated to showcase advanced drop down menus. Very detailed and well written tutorial, with drop-down search options narrowing and targeting search by checking options. Menu is done completely using just CSS, structure is visually describet in the image below:

vimeo-drop-down-multi-level-menu-navigation

Preview Demo

11. Dynamic PHP/CSS menu

php-css-drop-down-multi-level-menu-navigation

Preview Demo

12. Creating an Outlook Navigation Bar using the ListView and Accordion Controls

outlook-drop-down-multi-level-menu-navigation

Preview Demo

13. Animated Drop Down Menu with jQuery

animated-drop-down-multi-level-menu-navigation

Preview Demo

14. jQuery UI Potato Menu

potato-ui-drop-down-multi-level-menu-navigation

Preview Demo

15. Make a Mega Drop-Down Menu with jQuery

mega-drop-down-multi-level-menu-navigation

Preview Demo

16. A cross-browser drop-down cascading validating menu

Just simple CSS menu.

cross-browser-drop-down-multi-level-menu-navigation

Preview Demo

17. Drop-Down Menus, Horizontal Style

Very old drop-down tutorial from year 2004, but if you are starting out – very useful tutorial and example.

horizontal-style-drop-down-multi-level-menu-navigation

Preview Demo

18. Superfish v1.4.8 – jQuery menu plugin by Joel Birch

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and more features.

superfish-jquery-drop-down-multi-level-menu-navigation

Preview Demo

19. JavaScript Dropdown Menu with Multi Levels

This multi-level drop down menu script weighs in at only 1.2 KB. It features animation, active header persistence, easy implementation and multiple instance support.

javascript-drop-down-multi-level-menu-navigation-1

Preview Demo

20. jQuery (mb)Menu 2.7

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

jquery-drop-down-multi-level-menu-navigation

Preview Demo

21. Menumatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu

menumatic-drop-down-multi-level-menu-navigation

Preview Demo

22. Smooth Navigational Menu (v1.31)

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair.

smooth-drop-down-multi-level-menu-navigation

Preview Demo

23. jQuery File Tree

jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.

jquery-tree-drop-down-multi-level-menu-navigation

Preview Demo

24. Longed-For Multi-Level Drop-Down Menu Script

longed-jquery-drop-down-multi-level-menu-navigation

Preview Demo

25. jQuery & CSS Example – Dropdown Menu

This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

designreviver-jquery-drop-down-multi-level-menu-navigation

Preview Demo

26. Reinventing a Drop Down with CSS and jQuery

reinventing-drop-down-multi-level-menu-navigation

Preview Demo

27. Simple jQuery Dropdowns

Very stripped down code and minimal styling, yet still dropdown menu has all the functionality typically needed.

simple-jquery-drop-down-multi-level-menu-navigation

Preview Demo

28. Styling Drop Down Boxes with jQuery

One problem with HTML forms is it is hard to style the elements to fit into your design. The tutorial will show you how to style the hardest of them all, the select box.

styling-jquery-drop-down-multi-level-menu-navigation

Preview Demo

29. jQuery iPod-style Drilldown Menu

ipod-drop-down-multi-level-menu-navigation

Preview Demo

30. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

Newer version of previous iPod style menu.

recreated-drop-down-multi-level-menu-navigation

Preview Demo

31. mcDropdown jQuery Plug-in v1.2.07

mc-plugin-drop-down-multi-level-menu-navigation

Preview Demo

32. jQuery Drop Line Tabs

This menu turns a nested UL list into a horizontal drop line tabs menu. The top level tabs are rounded on each side thanks to the use of two transparent background images, while the sub ULs each appear as a single row of links that drop down when the mouse rolls over its parent LI.

jquery-tabs-drop-down-multi-level-menu-navigation

Preview Demo

33. Cut & Paste jQuery Mega Menu

Mega Menus refer to drop down menus that contain multiple columns of links. This jQuery script lets you add a mega menu to any anchor link on your page, with each menu revealed using a sleek expanding animation. Customize the animation duration plus delay before menu disappears when the mouse rolls out of the anchor. Mega cool!

cut-paste-drop-down-multi-level-menu-navigation-1

Preview Demo

34. Professional dropdown #2

professional-drop-down-multi-level-menu-navigation

Preview Demo

35. Drop down menu with nested submenus

Create your own drop down menu with nested submenus using CSS and a little JavaScript.

nested-drop-down-multi-level-menu-navigation-1

Preview Demo

36. jdMenu Hierarchical Menu Plugin

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications.

jdmenu-drop-down-multi-level-menu-navigation

Preview Demo

37. Dynamic Drive – Multiple Level Menus

A lot of free advanced CSS and Javascript drop down menus are available here. There are also instructions and advices how do use and modify them.

dynamic-drive-drop-down-multi-level-menu-navigation-1

38. IzzyMenu – Menu Builder – Build your pro CSS/DHTML Menu

Choose from dozens ready styles or create your own menu style. They are low in file size, so won’t consume a lot of bandwidth from your hosting. IzzyMenu, online menu generator is the best solution for amateurs and professionals!

izzymenu-drop-down-multi-level-menu-navigation-1

Create a Simple Infinite Carousel with jQuery

Introduction

Finally, I have times for this carousel script. I always think that it’s hard to figure it out, but thanks to a tutorial – Making a jQuery Infinite Carousel with nice features from tutsvalley. I learnt something new from there. So, yes, I modify the code and make it into something I want, and hopefully this is what you want as well 🙂

1. HTML

Alright, We have a main wrapper called carousel and inside it, we have two sections – buttons and slides. I have styled the previous and next links to two arrows with mouseover effect. The rest is pretty basic.

<div id="carousel">
	<div id="buttons">
		<a href="#" id="prev">prev</a>
		<a href="#" id="next">next</a>
		<div></div>
	</div>

	<div></div>

	<div id="slides">
		<ul>
			<li><img src="slide1.gif" width="240" height="240" alt="Slide 1"/></li>
			<li><img src="slide2.gif" width="240" height="240" alt="Slide 2"/></li>
			<li><img src="slide3.gif" width="240" height="240" alt="Slide 3"/></li>
		</ul>
		<div></div>
	</div>

</div>

2. CSS

CSS is a little bit complicated. First of all you have to set correct width in #carousal, #slides, #slides ul and also #slides li. So, I break it down and put extra comments, and if you want to change it, I’d recommend you change it from the LI item first, and the following is the sequence:

  • #slides li :
  • #slides ul : the width is the total width of #ul li items
  • #slides : the width and height should be the same with #ul li items
  • #carousel : the width should be slightly bigger than #ul li items, except the height, because it inclde the height of buttons as well.
#carousel {
	width:255px;
	height:290px;
	margin:0 auto;
}

#slides {
	overflow:hidden;
	/* fix ie overflow issue */
	position:relative;
	width:250px;
	height:250px;
	border:1px solid #ccc;
}

/* remove the list styles, width : item width * total items */
#slides ul {
	position:relative;
	left:0;
	top:0;
	list-style:none;
	margin:0;
	padding:0;
	width:750px;
}

/* width of the item, in this case I put 250x250x gif */
#slides li {
	width:250px;
	height:250px;
	float:left;
}

#slides li img {
	padding:5px;
}

/* Styling for prev and next buttons */
#buttons {
	padding:0 0 5px 0;
	float:right;
}

#buttons a {
	display:block;
	width:31px;
	height:32px;
	text-indent:-999em;
	float:left;
	outline:0;
}

a#prev {
	background:url(arrow.gif) 0 -31px no-repeat;
}

a#prev:hover {
	background:url(arrow.gif) 0 0 no-repeat;
}

a#next {
	background:url(arrow.gif) -32px -31px no-repeat;
}

a#next:hover {
	background:url(arrow.gif) -32px 0 no-repeat;
}

.clear {clear:both}

3. Javascript

There are two new methods we are about to learn. Well, it’s something new to me too! After and Before method.

  • After – Insert content after each of the matched elements.
  • Before – Insert content before each of the matched elements.

So, to create an infinite carousel, we need to depend on these two method because we need:

  • If the user clicked on previous button, we need to move the last item to the front of the first item
  • If the user clicked on next button, we need to move the first item to the back of the last item.

As a result, whenever we clicked on next or previous button, the script will keep moving the item and that make it an infinite carousel. Again, credit to my friend at tutsvalley for this idea, check it out his version of carousel – Making a jQuery Infinite Carousel with nice features

And also, our very cheapskate but absolutely effective method of rotating the slide – using click() function to click next link and set a timer for it 🙂

$(document).ready(function() {

	//rotation speed and timer
	var speed = 5000;
	var run = setInterval('rotate()', speed);	

	//grab the width and calculate left value
	var item_width = $('#slides li').outerWidth();
	var left_value = item_width * (-1); 

    //move the last item before first item, just in case user click prev button
	$('#slides li:first').before($('#slides li:last'));

	//set the default item to the correct position
	$('#slides ul').css({'left' : left_value});

    //if user clicked on prev button
	$('#prev').click(function() {

		//get the right position
		var left_indent = parseInt($('#slides ul').css('left')) + item_width;

		//slide the item
		$('#slides ul').animate({'left' : left_indent}, 200,function(){    

            //move the last item and put it as first item
			$('#slides li:first').before($('#slides li:last'));           

			//set the default item to correct position
			$('#slides ul').css({'left' : left_value});

		});

		//cancel the link behavior
		return false;

	});

    //if user clicked on next button
	$('#next').click(function() {

		//get the right position
		var left_indent = parseInt($('#slides ul').css('left')) - item_width;

		//slide the item
		$('#slides ul').animate({'left' : left_indent}, 200, function () {

            //move the first item and put it as last item
			$('#slides li:last').after($('#slides li:first'));                 	

			//set the default item to correct position
			$('#slides ul').css({'left' : left_value});

		});

		//cancel the link behavior
		return false;

	});        

	//if mouse hover, pause the auto rotation, otherwise rotate it
	$('#slides').hover(

		function() {
			clearInterval(run);
		},
		function() {
			run = setInterval('rotate()', speed);
		}
	); 

});

//a simple function to click next link
//a timer will call this function, and the rotation will begin 🙂
function rotate() {
	$('#next').click();
}

COmpare DOJO, MOCHI KIT, MOO Tools,Yahoo! UI,Prototype and JQuery

JQuery is the BEST

 

 

Dojo   

—-

 

– Built in functionality / Power / ease of use — many compatibility issues, ease of use — not good

– add ons / widgets       — simple — no widgets

– Size of footprint          —23KB

– Documentation / Community — community supported by many companies like IBM, AOL, Sun

Documentation– not good

 

 

 

Mochikit

– Built in functionality / Power / ease of use — compatibility good, ease of use    — good

– add ons / widgets       — not so many , no widgets

– Size of footprint          —111KB

– Documentation / Community   — Documentation good, still a little community

 

 

 

 

 

MooTools

 

– Built in functionality / Power / ease of use — good

– add ons / widgets       — good

– Size of footprint          —43KB

– Documentation / Community — had some good community

Documentation — good

 

 

Yahoo! UI

 

– Built in functionality / Power / ease of use — ease of use — some restrictions to use its functions and more time need to learn the functions

– add ons / widgets       — ok

– Documentation / Community   —

Community       good

Documentation–Very good docs

 

Some bugs have to be fixed some compatibility issues

 

Prototype

 

– Built in functionality / Power / ease of use

– add ons / widgets       — ok

– Size of footprint          —122KB

– Documentation / Community  

Had some community

Documentation–Very good docs

ease of use — some restrictions to use its functions and more time need to learn the functions

Compatibility fine

Design is not good

 

Prototype does not provide any widgets or controls

 

 

JQuery

 

– Built in functionality / Power / ease of use

– add ons / widgets       — good widgets from jquery UI

– Size of footprint          —26.5 KB

– Documentation / Community  

had lot of communities behind

Documentation–Very good docs

Ease of use — very good, performance is better that all the other tools

Ease to read and simplified code

Compatibility good except Konqueror

 

 

 

 

 

 

jQuery was the first toolkit to support chaining and that it executes it nicely.

 

Commnets over comparition

http://programming.reddit.com/info/61xbz/comments

 

 

 

http://mootools.net/slickspeed/

Selectors                                              Prototype 1.6  MooTools 1.2 beta1     JQuery 1.21

IE 6.0 final time (less is better)              2098                1477                1239 

mozilla 1.5 final time (less is better)                    299                  346                  935

 

From the above results we can see that for IE jquery is better

For prototype some tags are not working

 

http://www.malsup.com/jquery/form/comp/

This url checks  JQuery,Dojo,Yahoo! UI,Prototype,Mochikit

From the above url we can see that Jquery supports  all the features

 

 

jQuery.noConflict

Using jQuery with Other Libraries
From jQuery JavaScript Library
Jump to: navigation, search
[edit]
General

The jQuery library, and virtually all of its plugins are constrained
within the jQuery namespace. As a general rule, “global” objects are
stored inside the jQuery namespace as well, so you shouldn’t get a clash
between jQuery and any other library (like Prototype, MooTools, or YUI).

That said, there is one caveat: By default, jQuery uses “$” as a shortcut
for “jQuery”
[edit]
Overriding the $-function

However, you can override that default by calling jQuery.noConflict() at
any point after jQuery and the other library have both loaded. For
example:

<html>
<head>
<script src=”prototype.js”></script>
<script src=”jquery.js”></script>
<script>
jQuery.noConflict();

// Use jQuery via jQuery(…)
jQuery(document).ready(function(){
jQuery(“div”).hide();
});

// Use Prototype with $(…), etc.
$(‘someid’).style.display = ‘none’;
</script>
</head>
<body></body>
</html>

This will revert $ back to its original library. You’ll still be able to
use “jQuery” in the rest of your application.

Additionally, there’s another option. If you want to make sure that jQuery
won’t conflict with another library – but you want the benefit of a short
name, you could do something like this:

<html>
<head>
<script src=”prototype.js”></script>
<script src=”jquery.js”></script>
<script>
var $j = jQuery.noConflict();

// Use jQuery via $j(…)
$j(document).ready(function(){
$j(“div”).hide();
});

// Use Prototype with $(…), etc.
$(‘someid’).style.display = ‘none’;
</script>
</head>
<body></body>
</html>

You can define your own alternate names (e.g. jq, $J, awesomeQuery –
anything you want).

Finally, if you don’t want to define another alternative to the jQuery
name (you really like to use $ and don’t care about using another
library’s $ method), then there’s still another solution for you. This is
most frequently used in the case where you still want the benefits of
really short jQuery code, but don’t want to cause conflicts with other
libraries.

<html>
<head>
<script src=”prototype.js”></script>
<script src=”jquery.js”></script>
<script>
jQuery.noConflict();

// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
$(“div”).hide();
});

// Use Prototype with $(…), etc.
$(‘someid’).style.display = ‘none’;
</script>
</head>
<body></body>
</html>

This is probably the ideal solution for most of your code, considering
that there’ll be less code that you’ll have to change, in order to achieve
complete compatibility.

Also see: Custom Alias
[edit]
Referencing Magic – Shortcuts for jQuery

If you don’t like typing the full “jQuery” all the time, there are some
alternative shortcuts:

* Reassign jQuery to another shortcut
o var $j = jQuery;
o (This might be the best approach if you wish to use different
libraries)
* Use the following technique, which allows you to use $ inside of a
block of code without permanently overwriting $:
o (function($) { /* some code that uses $ */ })(jQuery)
o Note: If you use this technique, you will not be able to use
Prototype methods inside this capsuled function that expect $ to
be Prototype’s $, so you’re making a choice to use only jQuery
in that block.
* Use the argument to the DOM ready event:
o jQuery(function($) { /* some code that uses $ */ });
o Note: Again, inside that block you can’t use Prototype methods