Advertise here

jQuery Plugins Tagged ‘Tutorial’

Tooltip Menu

May 23, 2013     11454     Menu Tooltip
Tooltip Menu

This is a simple tooltip menu that will show a tooltip submenu when hovering over an item. The submenu will either appear above or below the main menu, depending on where more space is available.

Using Modernizr’s touch detection, the menu will either react on hover or on click. Example media queries show how to adjust the style for smaller screens.

Read More »

Responsive Product Grid Layout

May 18, 2013     8565     Responsive Grid & Layout
Responsive Product Grid Layout

Responsive product grid layout that comes with some UI details for inspiration. The product will rotate showing the backside of the item when the rotate button is clicked. Some examples of how tooltips can appear on hover or click are also included.

Media queries can be used to resize the items in the grid or change the number of items in a row. Flexbox is used when supported.

Read More »

Ajax File Upload Form with jQuery

May 13, 2013     11906     Ajax Drag & Drop
Ajax File Upload Form with jQuery

Nice tutorial about creating an AJAX file upload form, that will let visitors upload files from their browsers with drag/drop or by selecting them individually.

Read More »

Simple YouTube Menu Effect

April 25, 2013     8579     Menu
Simple YouTube Menu Effect

A tutorial on how to create the effect of YouTube's little left side menu.

When clicking on the menu label and icon, the main menu appears beneath and the menu icon slides to the right side while the label slides up. To close the menu, the menu icon needs to be clicked again.

Read More »

Flaunt.js – Stylish Responsive Navigations with Nested Click-to-Reveal

April 17, 2013     6039     Menu Responsive
Flaunt.js – Stylish Responsive Navigations with Nested Click-to-Reveal

Flaunt.js is a jQuery script that allows you to create a responsivenested navigation out the box.

Flaunt was built to overcome responsive design challenges which faced a huge percentage of websites. This challenge was to show nested navigation items on click-demand, without the event taking you through to the page you've pressed.

Read More »

Thumbnail Grid with Expanding Preview Like Google Images

March 19, 2013     57032     Gallery Grid & Layout
Thumbnail Grid with Expanding Preview Like Google Images

A nice tutorial from Codrops on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link.

Read More »

Create an Animated Bar Graph with CSS and jQuery

March 12, 2013     8626     CSS3 & CSS Chart & Graph
Create an Animated Bar Graph with CSS and jQuery

Nice tutorial from Smashing Magazine about "Creating an Animated bar Graph with CSS And jQuery". 

What this tutorial is making?

  • A progress bar that indicates how long until the end of all humanity in the event of a zombie plague;
  • A graph indicating the decline in safe outdoor activities during a zombie plague;
  • A frighteningly similar graph indicating the decline in manners during a zombie plague;
  • The increase of people who were unaware of the zombie plague because they were sharing with all of their now-deceased friends on Facebook what they did on FarmVille

Read More »

How to Create a jQuery Confirm Dialog Replacement

March 01, 2013     29400     CSS3 & CSS Modal & Overlay
How to Create a jQuery Confirm Dialog Replacement

In this tutorial you are going to build a cross-browser, custom confirm dialog in the form of an easy to use jQuery plugin. You can choose the text, buttons, and actions that will be executed when they are clicked.

Read More »

Thumbnails Preview Slider with jQuery

February 28, 2013     4443     Slider Gallery
Thumbnails Preview Slider with jQuery

In this tutorial you are going to create and use a thumbnails preview slider with jQuery. Thumbnail preview slider will hwlp you to create cool photo/image galleries.

Read More »

Creating Horizontal Navigation Bar with jQuery Dropdown Menus

February 24, 2013     8289     Menu
Creating Horizontal Navigation Bar with jQuery Dropdown Menus

In this tutorial you are going to build a simple jQuery-powered dropdown menu. This can work well using the animate method for generating delayed effects. Along with the typical JS codes also some CSS3 transition effects into the stylesheet. Any webmaster who can edit these codes will surely find use in a pre-built customized navbar solution.

Read More »

Flyout Image Slider Using jQuery & CSS3

January 04, 2013     6022     Slider CSS3 & CSS
Flyout Image Slider Using jQuery & CSS3

There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial you ll learn how to displaying portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.

Read More »

How to Create Simple Multi-Item Slider with jQuery and CSS3

December 31, 2012     2937     Slider CSS3 & CSS
How to Create Simple Multi-Item Slider with jQuery and CSS3

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.

Read More »

Live Album Previews with CSS3 and jQuery

December 22, 2012     1969     Slider CSS3 & CSS Effects
Live Album Previews with CSS3 and jQuery

Here you will 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.

Read More »

Fullscreen Pageflip Layout Using BookBlock Plugin

December 11, 2012     10903     Effects Animation Grid & Layout
Fullscreen Pageflip Layout Using BookBlock Plugin

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.

Read More »

Responsive Image Gallery with Thumbnail Carousel

November 11, 2012     16236     Gallery Carousel Responsive
Responsive Image Gallery with Thumbnail Carousel

Here you ll learn how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width.

The gallery will have a view switch that allows to view it with the thumbnail carousel or without.  

Read More »