Tutorials are the best way to learn new techniques and new programs not only for the beginners but also for the experienced professionals who want to polish their skills. In this compilation, we have listed down 14 jQuery tutorials especially for programmers. jQuery is the most famous and most widely used programming language all across the globe. It is fast and extremely versatile giving developers and programmers complete command. If you want to learn jQuery or just want to polish your jQuery skills, then this collection is for you.
Below, we have 14 best and detailed tutorials and plugins about jQuery and how to use it to achieve excellent results. We hope that you will find this collection useful for you. Enjoy!
ALS – Any List Scroller is the jQuery plugin by musings.it to scroll any list, of any dimension, with any content. Try it.
A simple plugin that “sticks” an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts. Scroll down to see it in action.
Responsive-Text is A jQuery plugin to set font sizes responsively based on its’ container width. Use jQuery responsiveText to have scalable headlines, build responsive tables and more.
Toolbar allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using the twitter bootstrap icons and provides flexability around the toolbars display and number of icons.
imagefill-js is a jQuery plugin to make images fill their containers and also be centered .Its a potentially useful tool for Responsive Web Design.
Tipue drop is an open source and responsive. search suggestion box jQuery plugin.
A jQuery plugin that turns a one-line div into a sweet color swatch.
gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns.
Tumblr blogs are now-a-days mostly used to share images, audio and short notifications etc. It becomes very helpful if you can use Tumblr as a service to display those posts on your website.
Here we would like to share with you a little jQuery plugin that creates an image slider which gives more information when clicked on. I’ve also included a bunch of built-in animations for the modal windows giving some pretty cool effects.
Yet another jQuery plugin for tabs, lightweight, easy to use and with some extra features.
A jQuery plugin that uses canvas to create a ‘screen print’ offset effect on an image, by altering the pixel data.
Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.
A jQuery calendar plugin that uses HTML templates.
Are you looking for some stunning jQuery slideshows? If your answer is yes then look no further; because here we are presenting 10 truly beautiful and stunning websites that showcase full screen jQuery slideshow. These websites show that you can also integrate jQuery slideshow in such a way that it can cover the whole screen while presenting the content of your website in a very nice and visually alluring manner.
Here is the complete list after the small jump. We hope that you will like this collection and find these websites useful for you. We just have compiled this collection for your inspiration only. Do let us know what you feel about this collection. Enjoy!
A simple, yet elegant fullscreen image gallery created with the jQuery library and CSS. The gallery features fullscreen images in various modes and custom scrollbars.
This jQuery plugin lets you create fullscreen galleries where the slides are shown on the entire screen using the fullscreen APIs provided by Firefox 10+ and Chrome 15+ (and possibly Safari 5.1+).
A fullscreen image gallery made with jQuery and CSS. The gallery features fullscreen images in various modes and custom thumbnail scrolling script.
Supersized is a fullscreen background slideshow built using the jQuery library.
Here you will learn how to create a beautiful advanced jQuery background image slideshow.
A tutorial about how to create a slideshow-like fullscreen video background using BigVideo.js, a jQuery plugin for big background video.
Here With the help of some small HTML, nifty CSS and loads of jQuery, we’re able to create an animated fullscreen background image slideshow.
In this tutorial we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to give life to the gallery and try to recreate the ambient of this vibrant city.
Full Screen Image Slideshow is a cool slideshow that uses jQuery and PHP to display large images from a directory automatically and using the entire browser window as its canvas! Thumbnails of every image is shown at the bottom of the slideshow for easy viewing on demand.
Another amazing and wonderful collection of jQuery and CSS3 for you is presented here. In this collection we are showcasing 40 jQuery and CSS3 loading animation and progress bar plugins and tutorial. One thing keep in your mind that CSS3 animations are not yet supported in old browsers so you have to try modern browsers if you want to see the live action of these outstanding plugins. With loaders and progress bars users know that something is still going on that’s why loaders and progress bars are very essential for users.
With these loading animations and progress bars you can make your web application and websites more stunning and eye-catching. All these jQuery and CSS3 loading animation and progress bar also help you to enhance the performance of your websites or web application. This is the reason loaders and progress bars are very famous and trendy these days. Take a look and let me know what you think.
Here we are presenting another new collection of some fresh jQuery plugins for you. We all know that plugins are the great time savers as they help us to perform certain actions in a more convenient and speedy manner, thus saving our time as well as energy. This is the reason why every designer and developer is interested in keeping a good collection of different types of plugins that are useful for them.
For now, we are focusing on jQuery plugins. This collection is specifically targeted at the web developers and web designers who want to create websites that are more interactive, attractive as well as accessible to the broadest assortment of browsers. With these plugins, you can make user experience which they come away from your site with more pleasurable and exciting. Let us have a look and enjoy! Feel free to share this post with others.
Here, we are listing some fresh as well as free jQuery plugins and useful tutorials. We hope that you will like this collection and enjoy this collection.
A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
In this tutorial, we are going to create a mini help system with jQuery. This will be a small widget which will display help text or a guide to users of your web application. The widget content is going to be searchable in real time, and all matching terms will be highlighted.
This is a simple jQuery plugin for creating animated vertical and horizontal bars. The plugin is called jqBar. jqBar can be used in variety of situations where you want to present data with some visual effects. It helps you crate beautiful bar charts to represent skill set or can be used as a progress bar. Plugin is very light weight and can be completely customized.
Make Pretty Charts For Your App with jQuery and xCharts.
In this tutorial I want to focus on one useful plugins called iosSlider. This is an open source project with numerous options for customizing your own media slideshow. This includes typical animations and effects for when the user clicks or hover over slideshow items.
In this tutorial, we’ll be creating a navigation bar that stays with you as you scroll down — and we’ll also throw a gimmick or two into the mix to polish it off.
A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions.
An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.
In this tutorial, we will be making a simple product search engine. Using jQuery and PHP, we will tap into Google’s Shopping Search API and return a list of items available for purchase, along with prices, photos and other useful information.
A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.
A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used.
A jQuery calendar plugin for creating flexible calendars.
A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.
In this tutorial, we are going to use it as the foundation of a news publishing system. We are going to develop a simple widget which cycles through the most recent posts on a Tumblr blog, and presents them as news items to your users. Adding news will be done by creating new blog posts in your Tumblr dashboard.
We are going to make an attractive coming soon html template with CSS3, CSS 3D transform and jQuery. Let’s go a little wild with CSS3 even though some old browsers won’t support it. However, for CSS 3D transform part, we will make it degrades gracefully. Instead of the awesome 3D flipping effect, we will be substituted with just a simple hide and show effect.
This is a multi purpose responsive accordion image slider plugin raccordion. Its a horizontal image slider that adjusts according to the size of the browser width. raccordion slider adds variety and style.
In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.
In this short tutorial, we are going to make a OSX-like folder with CSS3, by utilizing 3D transforms, gradients and box shadows. In addition, we are going to use jQuery UI and its drag and drop interactions to build a pretty interactive demo.
In this tutorial we will be creating a beautiful password strength indicator. It will determine the complexity of a password and move a meter accordingly with the help of the new Complexify jQuery plugin.
A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6.
A tutorial on how to create a responsive vertical fullscreen slider that moves its sections in opposite directions. We’ll be using jQuery, CSS Transitions and media queries to make the layout adaptive.
A tutorial on how to create some custom drop-down lists. We’ll show you five examples with different looking drop-down menus and lists for various purposes.
Let’s create some interesting web typography effects with several CSS techniques and the help of lettering.js.
Here we are going to make a script for previewing the contents of an album with a slideshow-like animation. This can be used in photo galleries, online shops, profile pages and more. The example is inspired by Facebook, where you hover over an album and get a slideshow of some of the photos contained inside it.
Slicebox, the jQuery 3D image slider plugin, has been updated. We’ve done some major improvements and added new features.
A tutorial about how to create a slideshow-like fullscreen video background using BigVideo.js, a jQuery plugin for big background video.
A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left.
A tutorial about how to create an experimental CSS-only timeline with a 3D effect. The idea is to expand a content area when the associated radio input is selected.
In this tutorial we’ll show you how to make some creative css-only loading animations also known as activity indicators.
This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements.
In this tutorial, we are going to build an animated photo stack, which will use all kinds of fancy effects to transition between a set of images. The effects are implemented purely using CSS3, which means that they run smoothly on modern browsers and mobile devices. We will also make the photo stack advance automatically, so you can use it as a slideshow.
In this tutorial, we are going to make a simple web app that allows you to drag a photo from your computer into the browser window, and apply instagram-like filters on it.
Here we are going to use this feature to create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result. Additionally, we will make use of Twitter Bootstrap to show dialog windows, and PHP on the backend for the actual photo cropping.
As a web developer, third party API integration is something you will have to face. Especially with the current trend, we have facebook, twitter, flickr etc. Today, we are going to look at dribbble’s API. Dribbble is a place to show off your design, it’s based on invitation basis, therefore, most designs are of high quality.
A tutorial about how to create some neat scrollable photo booth strips and integrate Lightbox 2 and customize it in order to make it responsive and touch-device friendly.
This tutorial will take you through the step by step development of building a ToDo App entirely powered by Web SQL. You will learn about getting started with Web SQL, understanding transactions, following best practices and how to write re-usable functions.
Here, we are presenting a collection of some useful and free to use jQuery pagination plugins for you that you can integrate on your website in order to split pages and posts into several pages. These pagination plugins make pagination easy for the website developers. These plugins are designed for you so that website pagination will no longer be a tough task for you. With these plugins, you can divide the data into multiple pages once it is loaded into the page. Furthermore, server side pagination allows you to extract necessary amount of data and then loaded on the page.
In this post, you will find a list of some useful jQuery pagination plugins that allow you to create proper pagination setups for your website. We hope that you will find this collection useful for you. Feel free to share your opinions with us via comment section below. Have fun.
In today’s collection, we are presenting for you 13 jQuery Modal plugins. Many websites are using jQuery currently and it is important that one should know what jQuery plugins are available there in order to stay up to date with the latest web design trends. With the help of jQuery plugins, one can keep his website ahead of the crowd.
If you want to show quick information to your users, then jQuery Modal dialog box would be the great option for you. With the help of jQuery Modal dialog boxes, you can show alerts, notices, errors, modal popups, modal windows or dialog. With the help of jQuery modal plugins, you can easily create modal dialog boxes. All of these jQuery modal plugins can easily be integrated into you websites so that you can create cool and visually appealing modal window. So what are you waiting for? Have a look at this collection.
Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior).
FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
SIMPLEMODAL is a small plugin to create modal windows. It can be used to generate alert or confirm messages with few lines of code. Confirm configuration involves the use of callbacks to be applied to affirmative action; it can work in asynchronous mode and retrieve content from external pages or getting the inline content. SIMPLEMODAL is not a lightbox although the possibility to hide parts of its layout may partially make it similar.
Lightview was built to change the way you overlay content on a website.
bPopup is a lightweight jQuery modal popup plugin (only 1.34KB gzipped). It doesn’t create or style your popup but provides you with all the logic like centering, modal overlay, events and more. It gives you a lot of opportunities to customize so it will fit your needs.
Bare bones modal dialog windows.
jQuery Superbox! is a script which allows you display windows with the lightbox effect.
GreyBox can be used to display websites, images and other content in a beautiful way.
Reveal is awesome because it’s easy to implement, is cross-browser compatible with modern browsers (with some graceful degradation of course) and lightweight coming in at only 1.75KB. What that means for you is that it’s fast, sexy and just works. Now let’s see how easy is can be to get Reveal working!
jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.
prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.
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.
Are you interested in creating a single page layout website? Do you need to know something about plugins that help you create such websites? If yes then you are at right place. Here we are discussing 7 jQuery plugins that help you creating page scrolling layout – characteristic layout for a single page website. Page scrolling techniques are of two types: one is browser scrollbar dependent and the other user action dependent. Regardless of what type of scrolling techniques you want to use, these plugins will help you achieve page scrolling effect quite effortlessly.
We hope that these plugins will not only save your time but will also satisfy your needs so that you will not be required to reinvent the wheel again. Speak your mind and let us know your opinion about this compilation. Enjoy!
With this plugin you can create layout with the famous NikeBetterWorld style.
Page Scroller lets you know where you are on a page while providing a simple smooth scroll navigation. Organize your site into easily digested sections. Use a CSS navigation skin or create your own.
The jQuery plugin for doing cool scrolly stuff.
A jQuery plugin for making scrolling presentation decks.
With ScrollTo you can easily scroll various elements and the screen itself.
With this jQuery plugin you can create a parallax scrolling effects to any scrolling element.
It’s a plugin for defining custom scroll paths. It uses canvas flavored syntax to draw lines and arcs. It comes with a custom scrollbar. It also does rotations in supported browsers.
A web form on your website is one of the most important and crucial elements that you cannot neglect if you really want your website to go beyond your expectations. The main reason is that web form is the way your visitors and clients can contact you with their queries and suggestions. Thus, having a visually appealing and completely function web form is important for every website.
Thanks to jQuery plugins, now you can easily create aesthetically appealing and functional web forms without much effort. We have already published a post about jQuery Forms and in this round up, we will showcase another 10 classy jQuery plugins that you can use to enhance the beauty and appeal of your web forms. Here is the complete list. Enjoy!
jQuery does not need any introduction rather it is the most widely used technology in the web and graphic designing world. You can create loads of great things with the help of jQuery Live action. In addition, plentiful jQuery plugins are available on the internet that make it possible to create slideshows, forms, animations and various other excellent effects without much effort.
Below, we are presenting 10 truly amazing and great jQuery plugins for 360 degree image rotation. So, if you want your products to be seen from all angles then you should check out these jQuery plugins. So, don’t miss the opportunity to try and test the matchless features of these great plugins. Enjoy!
AJAX-ZOOM is a unique tool to present 360° product images on the web. Users can rotate the VR 360 object, also on Z-axis (3D multirow). Additionally deep zoom on every frame (the sprite contains a set of single images of the same object). The adoption of image tiles technology (image pyramid) allows the usage of high resolution images without compression.
Reel 1.2 is an established jQuery plugin which takes an ordinary image tag and transforms it into a gorgeous interactive 360° object movie, panorama or stop-motion animation.
Dopeless Rotate is Jquery plugin for 360 degree product visualisation.
This amazing and useful jQuery plugin allows you to rotate an image by clicking and moving the mouse.
You can rotate the image either by clicking, mousemoving or by setting it to rotate in auto With this plugin.
The image cube functionality can easily be added to a division with appropriate default settings. It then displays the images contained within the targetted division in a cycle every two seconds. A random rotation is chosen each time to move to the next image. Highlights and shadows are used to enhance the 3D effect.
j360 is a jQuery plugin designed to display 360 view of product using a set of images.
Displaying a 360° view of a sequences of images or panorama. It is simple, lightweight, no flash needed, no extra css need, fast and compatible with all major browsers and touches devices. It has been tested on Android browsers, Ipad browser, IE 6,7,8,9 , Firefox, Chrome, Safari and Opera.
Flip is a jQuery plugin that will flip easily your elements in four directions.