Monday, March 26, 2012

jQuery/CSS multi level dropdown menu

Drop-down menus and menu bars have been heavily used in many larger sites to make it easier for visitors to find what they are looking for. Here you’ll find jquery and CSS based drop-down .

Simple jQuery Dropdowns

Very stripped down code and minimal styling and has all the functionality typically needed and it works in all major browsers even in IE6.

Superfish on ‘roids

Superfish is one of the most popular Drop-Down menus available. Superfish on ‘roids takes it to the next level with jQuery!

Smooth Navigational Menu

Multi-level CSS and jQuery for smooth navigation.

Mega Drop Down Menus

Create a Mega Drop-down menu perfect for eCommerce websites.

Vimeo-like top navigation

Create a Vimeo-like top naviation. It offers you different search options that you can choose and narrow your search.

Animated Drop Down Menu with jQuery

Drop down menus are a really convent way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.

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.

Twitter style dropdown with jQuery

This tutorial will explain how it works step by step and it’s good for learning jQuery how to do the toggle and tool tips. Enjoy it!

Dynamic Drive Navigational Menu

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. The menu’s contents can either be from direct markup on the page, or an external file and fetched via Ajax instead.

jQuery.mb.Menu

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

jQuery and CSS Example

Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit.

jQuery iPod-style Drilldown Menu

We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.

smooth animated menu with JQuery

A very nice tutorial to learn to create a very nice and artistic effect for your websites.

 

Monday, January 9, 2012

Best jQuery Lightbox Scripts


Light box is nice tool to displays images using modal box. jQuery is very popular for modal dialogs because of its very easy implementation and it make website more friendly and interactive.
In this article I collected the best and Efficient Lightbox based on the jQuery Javascript library.

jQuery lightbox

A jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup.

fancybox

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

lightbox2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

PrettyPhoto

prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.

Facebox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

jquery nivo zoom

Nivo Slider is the world’s most popular jQuery image slider, and it’s completely free!
Nivo Zoom is popular jQuery plugin that allows you to zoom the image. This plugin comes with 5 different zoom types, Optional overlay support, Supports HTML captions, Simple clean & valid markup, Loads of settings to tweak and others. The plugin is lightweight (4kb compressed), focused only on images and comes with a bunch of settings. Nivo Zoom, by default, doesn’t use overlays but can display the bigger image with an overlay where the opacity and colors of it can be customized.

Features

  • Specify position of larger image relative to the thumbnail
  • Add topLeft, topRight, bottomLeft, bottomRight, or center class to the image to specify relative position
  • Optional overlay support
  • Supports HTML captions
  • Simple clean & valid markup
  • Customizable settings
  • Lightweight: Packed version only weighs 4kb
For more details Visit

jquery tab panel

jquery tabed panel
Tabbed panels are very useful and one of the most popular way to place a lot of information on a page without losing usability. Here is listed popular JQuery Tabs tutorials and plugins which you can use in your project.

jquery iframe auto height

A simple solution for automatically resize iframe height depending on content.
In page call jQuery library and in head script part past below script.

$(function () {
$('#myIframe').load(function () {
   this.style.height =
   this.contentWindow.document.body.offsetHeight + 'px';
});
});

jcarousel tutorial

There are lots of jQuery plugins for slider, but jCarousel is a best jQuery plugin for controlling a list of items in horizontal or vertical order. It works with all major browsers. To use the jCarousel component, include the jQuery library, the jCarousel source file and a jCarousel skin stylesheet file inside the tag of your HTML document.



jquery dotdotdot


jQuery.dotdotdot is an advanced cross-browser ellipsis for multiple line content. It adds an ellipsis after cut off text to indicate that there is more text than currently visible. Not only on a single line of content, but also particularly on multiple lines of content.

To use add jquery library and script file in header and on document ready call function.



For more details Visit

How To Set A Default Landing Tab For Your Facebook Page

Steps:
  1. Open the newly created page and click on edit page link.
  2. On edit page select “Manage Permission” tab from left menu. It will reload the right hand side of the page, now from right hand panel search for select drop down “Default Landing Tab” label and select the appropriate tab from select drop down, this tab will be loaded in place of default wall when visitor is not a fan or not logged in. 

Friday, January 6, 2012

jqPagination jQuery Pagination Plugin

jqPagination is a effective jQuery plugin for quickly creating a pagination interface and functionality for your web site or application..
The plugin is controlled with the special class names and attributes of HTML elements (for defining the prev, next buttons or setting the max pages).
It has a pretty unique, simple-yet-functional feature which is the ability to clicking on the pagination item and setting the page to be displayed manually.
jqPagination has a single callback which is ran when a pagination request is made and returns the page number to be displayed.
Its design can be customized easily and the plugin degrades nicely when JavaScript is disabled.

Demo

Best Mobile Frameworks for web development

jQTouch

Zepto/jQuery is a Open Source plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, Android, iPod Touch, and other devices.
Demo

Sencha Touch

Sencha Touch is HTML5-based framework for developing mobile web apps aimed at next generation, touch enabled, devices. It’s currently compatible with Apple iOS 3+, Android 2.1+, and BlackBerry 6+ devices.
Demo

Zepto.js

Zepto.js is a minimalist JavaScript framework for modern browsers, with a jQuery-compatible syntax.
Demo

JQuery Mobile Framework

A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
Demo