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

jQuery Geo location plugin for map relation actions

jQuery Geo is an open-source popular framework for map/geolocation related actions.
The plugin uses the open source map servers like Open Street Map, WMS and Esri ArcGIS for pulling the map data. The maps created are mobile-friendly and have lots of built-in methods for customization.
jQuery Geo is very well-documented and supported with a bunch of examples.
  • show mapping data and handle direct user interaction with the map
  • use geospatial functions like calculating bounding boxes, measuring the distance between geometries, etc.
Demo

jQuery News Ticker

jQuery News Ticker

Many websites today including news ticker to display your latest headlines or to show other features in a tiny space. jQuery News Ticker is useful plugin, inspired from the BBC news ticker, that simplifies creating them. News Ticker enables users to show unordered lists, RSS feed, HTML file, or content in a simple yet slick customizable interface.It support for loading content via an RSS feed.
Demo  Download

Best jQuery Chart Libraries

In this article we listed best chart libraries that you can use in your projects. Most of them are free for personal and commercial use.

 Jquery GraphUp Plugin

“GraphUp is a very flexible and lightweight jQuery (v1.4+) plugin to spice up your data tables. It visualizes the values using color, bar charts and bubbles.” and only 4kB.
 Demo.

jQuery Highcharts

Highcharts is a really impressive jQuery Chart Library. In a few words Highcharts is compatible with most Browsers and even the iPhone; numerous chart types are supported; it is a dynamic plugin because you can add, remove and modify series, axes or points at any time after chart creation and you can load data from external files; tooltip labels are also supported which is great for detailed information in a point of a chart; zooming and last but not least all text labels can be rotated in any angle.
Demo

jqPlot

jqPlot is a plotting and charting plugin for the jQuery. jqPlot produces beautiful line, bar and pie charts with many features you can even add shadows and interact per drag&drop in the charts! It even automatically computes trend lines. We could compare it to highcharts in terms of features and functionality.
Demo

Flot

Flot is as the authors call it an “Attractive Javascript plotting for jQuery” which is true. The charts look simple and nice, it is easy to create charts and all settings are optional. Some key features of plot is turning series on/off, zooming, interacting with the data points and it integrates a simple tooltip feature.
Demo

jQuery Google Charting

The current version is 1.4.1 and is available under the GPL or MIT licenses.  Whilst the API itself is pretty simple to use (the format to generate graphs is to form a complex url with multiple query string parameters), the plugin goes one step further and actually forms that complex url for you, by allowing you to set the parameters you want with simple jQuery calls:

Thursday, January 5, 2012

nivo zoom tutorial

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: http://nivozoom.dev7studios.com/

steps to create facebook page

Quick easy steps to create facebook page tab are as follows.

Step 1: Login to facebook account.
Step 2: Open url https://developers.facebook.com/apps in browser.
Step 3: In right hand section, find “create new app” button and click it.
Add display name, namespace is optional and select agree checkbox.
Step 4: Once its saved it will load next page where you can find settings in the “Basic” section of your apps in the Developer App under ‘Select how your app integrates with Facebook’. Click ‘Page Tab’ to expand the Page Tab settings, and the Page Tab fields will appear, here you have to add the tab name, and application url & Secure Page Tab URL e.g. http://phptechi.com/. secure url is mandatory now. Click on save changes. On same page you can find “App ID:” at the top copy it somewhere in notepad/ text editor.
Step 5: Now open url in another tab http://www.facebook.com/pages/ and click on create page button and create page.
Step 6: Adding an App/ page tab to a Page.
Open new tab and pest following url into that. It will show “chose facebook page” dropdown. now select the newly created page. Dont forget to replace
“YOUR_APP_ID” with application id copied in step 4 and “YOUR_URL” with “application url” used in step 4.
Format : http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
Sample URL : http://www.facebook.com/dialog/pagetab?app_id=214247878655791&next=http://172.20.150.166/sampalApp/
If you follow all the steps correctly it should add page tab in newly newly created page. Just refresh/ reload page thats all !!.

Best jQuery grid plugins

There are so many jQuery grid plugins. Each having different features and capabilities. Below I listed the best jQuery grid plugins which you can use in your projects

jQuery feed menus tutorial

There are many way to get or promote your site become popular. One of the popular method is by submiting your site to rss feed. When feeds became popular, it worked to have one icon on your site to point your readers in one location.
Demo

jQuery UI 1.8 features


jQuery UI 1.8 just released. The biggest changes are, of course, the new widgets themselves.
  • Core – the core of jQuery UI, required for all interactions and widgets
  • Widget – the widget factory, base for all widgets
  • Mouse – the mouse widget, a base class for all interactions and widgets with heavy mouse interaction
  • Position – a utility plugin for positioning elements relative to other elements

The Position Utility

With this, you can position any element relative to any other, or even relative to the parent window or your mouse.

The Button Widget

With the button widget you can create a fully theme-able button from any imaginable element you want to use as a native button.Traditionally buttons had an input type of submit, reset, image or button, but progressively developers are creating from elements such as anchor tags.  The Button widget makes this an attractive alternative for developers who want new styles to their website.

The Autocomplete Widget

This is maybe the most requested feature, which made it into the latest release of jQuery UI – The Autocomplete. The Autocomplete widget makes any text input field pop up a menu to help the user in completing their search or entry, provide suggestions and improvements to search criteria they’re entering.

jQuery UI 1.8 you can download from:

jquery 3d carousel

3d carousel jquery 
3D Carousel is a powerful jQuery plugin enabling you to create 3D carousel with  great features. It can be fully customizable controlled by mouse.  jQueryCarousel uses JSON as source data provider.
Demo

jquery jcarousel tutorial

jquery 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.




Demo

jQuery full Screen background Images

If you are looking for how to Full Screen Background Images then use Backstretch is a simple plugin. It is a simple plugin jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes.

demo.

jquery multiselect plugin

jquery-multiselect 
If you are looking for multiselect a combo box then use jQuery UI MultiSelect Widget is pretty good . It is a configurable plugin for jQuery. It converts

jQuery Date Picker plugin

jQuery Date Picker plugin allows you to easily add “date picker” calendars to you HTML forms. These calendars make it much quicker, easier and less error prone for people to input certain types of dates.

jQuery:
$(function()
{
$('.date-pick').datePicker();
});

css:
a.dp-choose-date {
float: left;
width: 16px;
height: 16px;
padding: 0;
margin: 5px 3px 0;
display: block;
text-indent: -2000px;
overflow: hidden;
background: url(calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
background-position: 0 -20px;
cursor: default;
}
input.dp-applied {
width: 140px;
float: left;
}

best jQuery Custom Scrollbar

We ofeten need custom scrollbars to scroll the content.  Here I listed some best custom scrollbar which you can use in your future projects.

jScrollPane

jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars on any block level element with an overflow:auto style. You can easily control the apperance of the custom scrollbars using simple CSS.

Tiny Scrollbar

Tiny Scrollbar can be used for scrolling content. It was built using the javascript jQuery library. It was built using the javascript jQuery library. Tiny scrollbar was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

jQuery Custom Content Scroller

A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar. The script utilizes jQuery UI and Brandon Aaron jquery mousewheel plugin. Very easy to configure and style with css.

ShortScroll – A jQuery UI scroll bar

Jesse Baird has developed this custom scrollbar as a jQuery UI widget after seeing the scroll bar in Google Wave, which added functionality and style making much better than the browser default scroll bar..CSS3 background gradients to do all of the fancy background stuff so if you plan to support Internet Explorer and care about eye candy, plan on creating your own background images.

custom div scrollbar

This tool brings HTML5 range input to all browsers in such a way that you can make it look and behave like you want. This small candy weights only 2.2 Kb. Here the rangeinput is used to control scrolling of a DIV. A little more coding and you can present your products like Apple does.
Custom scrollbar plugin utilizing jquery UI that’s fully customizable with CSS. It features vertical/horizontal scrolling, mouse-wheel support.

LionBars

A free to use, lightweight jQuery plugin that makes scrollbars look like in OSX Lion.

jQuery quickie

This is a great technique that could be used on loads of websites. Instead of the regular pagination, where the user has to click to see the next page, unlimited scroll automatically loads the next page when the user is at the bottom.

Tuesday, January 3, 2012

Best Jquery autocomplete Plugins


Jquery autocomplete allows you to easily create autocomplete/autosuggest boxes for text input fields. In this article will share 10 Useful Jquery Autocomplete Plugins which you can use in your future projects.
Ajax AutoComplete for jQuery
Ajax Autocomplete for jQuery allows you to easily create autocomplete/autosuggest boxes for text input fields.
It is built with focus on performance. Results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root.
jQuery Plugin: Auto Complete
Auto-complete takes data from the user tries to the list of words corresponding to the form of user input. The operation depends on the selected input, and also provides TN-dropping from the inside, so all you need is style ready for them. No adjustment is required, but the path to your script Ajax must be right, and you need the style in which UL drop-down.
jQuery plugin: Autocomplete from bassistance.de
Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
How To: jQuery Autocomplete
This tutorial guides you through the preparation of an application for self-plugin jQuery bassistance.de complete this operation. Its very simple. Once you have your AutoComplete settings, since there was a link at the top of the documentation covers only your PHP functions.
jQuery Autocomplete
A small and simple yet robust form input autocomplete plugin. Uses either preloaded or Ajax request driven JSON data with options for formatting the list items and returned input value and custom events called when selecting an item or canceling the autocomplete box.
jQuery Autocomplete
This script is based on jQuery Autocomplete plugin made by PengoWorks listed just above. It has many options and is quite easy to setup in your page. You can pass advanced options as a JavaScript object, hashes etc. It’s easily to edit the style of the dropdown result box, there are a couple of css classes.
Another jQuery Autocomplete Plugin
A jQuery autocompleter with caching options to limit server requests.
JQuery Autocomplete with Ajax PHP and MySQL
I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more.
Scriptaculous Autocomplete
An Ajax autosuggest script is supposed to help the visitor and present in real time (as they type) some possible results based on their entered words/characters. In my opinion, this is a great feature to enhance the user experience. It’s very easy to build an autocomplete form using scriptaculous and prototype. You just need one line of javascript.

jQuery Popup Modal Dialog

jQuery UI Dialog
jQuery UI has always been my favorite tool for creating custom and rich User Interface.  JQuery UI Dialog is part of the jQuery UI which is a complete bundle of effects and plugins built on jQuery. It is customizable via css and can be implemented in any project without restrictions. You can use this dialog box in five different forms: basic dialog, modal dialog, modal message, modal confirmation, modal form.
jqModal
qModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, and makes a great base as a general purpose windowing framework. It can be customized and it can act as a dialog, notice, modalbox, confirm-box, iframe-box or it can even display inline divs in modal windows.
NyroModal
Modal popup windows provide a quick way to show data without reloading the entire page.  It has the ability to define many callbacks at different time in the process to allow you to edit the settings, the data or do whatever you need. It has error handling also and a nice function that I loved was to call _blank targeted iframes.
ColorBox
ColorBox is a lightweight, customizable lightbox plugin that simulates some things that you would like to accomplish with a jQuery popup modal dialog window. It can allow you to show popup ajax, inline and iframed content as well as photos and other media. It’s writting in jQuery plugin format and can be chained with other jQuery commands.
Simple jQuery Modal Window Tutorial
In this tutorial, I’m going to share how to create a simple modal window with jQuery. It selects all the anchor tags with name attribute set to “modal” and grab the DIV #id defined in the href and displays it as a modal window. jQuery has made everything so simple, be sure to check out the demonstrations, examples I made.
SimpleModal
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.
Boxy
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.
ThickBox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
FancyBox
FancyBox is another jQuery plugin with nice easing and resize effects. This guy wanted something fresh and Mac-like so he created a plugin that delivers this ideea and style. It can group images in galleries and has a nice easeOutBack effect when closing the modal window. Check it out, it is simple and fancy!
jQuery BlockUI Plugin
The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

Best jQuery Tooltip Plugins


Tooltips are very importa in website design. In mouse hover out the extra information show hide without hampering basic design or the main information.

Mostly Tooltip is hidden by default, when user hovers the cursor over an element it show extra information. jQuery make very easy to add an attractive tooltip to your website. Browsers will automatically display a tooltip when you provide a title attribute. Internet Explorer will also use the alt attribute.

qTip
qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework. Built from the ground up to be user friendly, yet feature rich, qTip provides you with tons of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license!

Tooltip
Tooltip may be one of the most used tooltip plugins for jQuery. You can setup multiple tooltips on the same page that use different appearances as well as use PNG background images that render well in IE by simply using a built-in fixPNG option. This tooltip lis licensed under MIT/GPL.
Simpletip
Simpletip is exactly like it sounds; a simple jQuery tooltip plugin. Written by Craig Thompson, SimpleTip allows you to create tooltips with ease on any element on the page. The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.. Simpletip is the predecessor to qTip listed above.

BeautyTips
BeautyTips is a jQuery tooltips plugin which uses the canvas drawing element in the HTML5 spec to dynamically draw tooltips (sometimes called “talk bubbles” or “help balloons”) associated with a html element on the page. These tips are highly configurable and can be triggered in many different ways.

jTip
jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too. Additionally it’s possible to provide a link (via url query string) to a jTip tool tip link element (a href) so that the link will still function as expected by the user.

jQuery Tools: Tooltip
This tool corrects the situation. You’ll get a professional piece of sofware that is easy to understand and use. The tooltip plugin comes with two default effects: slideup and toggle and you can easily build your own effects. Positioning is flexible and there are redundant features. Inside the tooltip you can have any combination of HTML such as images, tables and forms. Tooltips can appear in any size and at any opacity.

Coda Popup Bubbles
Coda is a web development tool for the Mac that is popular among designers and developers. This isn’t an actual plugin for jQuery but is a tutorial that will walk you through every step of creating Coda-like tooltips. Code is all available as well as a demo and screencast.

Best Free Rich-Text Editors

Rich-text editors are web components that allow users to edit and enter text within a web browser.
There are many rich-text editors out there.  Here I listed best rich editor which you can use in your project.

TinyMCE

TinyMCE is an open source rich-text editor. As indicated by the name, TinyMCE is lightweight but highly customizable through an intuitive API.TinyMCE is very easy to integrate into other Content Management Systems.

Demo

FCK Editor

FCKeditor is another wildly popular open source online rich-text editor. It has a “Word clean-up” feature that automatically detects and cleans up text that’s copied from Microsoft Word documents. It has one of the best HTML table editing and creation features, making it very easy for users to create and edit tables for displaying data. It's lightweight and doesn't require any kind of installation on the client computer.
Demo

NicEdit

NicEdit is lightweight, no-fuss cross-platform rich-text editor that emphasizes user-friendliness and simplicity over barraging users with too many features.
Demo

Yahoo YUI Rich Text Editor

The Rich Text Editor is a UI control that replaces a standard HTML textarea; it allows for the rich formatting of text content, including common structural treatments like lists, formatting treatments like bold and italic text, and drag-and-drop inclusion and sizing of images. The YUI Library Rich Text Editor also has excellent mobile device support, making it a great web-accessible rich-text editing solution. The Rich Text Editor's toolbar is extensible via a plugin architecture so that advanced implementations can achieve a high degree of customization.
Demo

WYMEditor

WYMeditor is a web-based HTML editor that emphasizes the use of standards-compliant markup. WYMeditor's main concept is to leave details of the document's visual layout, and to concentrate on its structure and meaning, while trying to give the user as much comfort as possible.
Demo

BXE

BXE is an XML-based WYSIWYG editor that allows you to change an entire web page.
Demo