Use Invaluable jQuery Tool with jQuery Tutorials

Author: | Posted in jQuery, Tools 3 Comments

Use Invaluable jQuery Tool with jQuery Tutorials

Every web page designer and the developer must use the jQuery Tool, because it’s important and most of the people are spending their time to become professional in this field. Using a jQuery Tool web page designer and the developer improve the presentation of a website that’s why jQuery is most popular among developers and designers. If you are also looking here and there to become a professional for jQuery Tool, then finish your quest because here I am going to present you jquery tutorials.

THUMBNAIL PROXIMITY EFFECT WITH JQUERY AND CSS3

Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.

THUMBNAIL PROXIMITY EFFECT WITH JQUERY AND CSS3

View Tutorial

Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully.

Sexy Drop Down Menu w/ jQuery & CSS

View Tutorial

jQuery Tutorials for Designers

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

jQuery Tutorials for Designers

View Tutorial

jQuery Tutorial for Beginners: Nothing But the Goods

This fast-paced tutorial should be able to get beginners up and running with jQuery very quickly, while also providing a good overview of what jQuery is capable of (although jQuery’s capabilities go far beyond this beginning tutorial).

jQuery Tutorial for Beginners: Nothing But the Goods

View Tutorial

How to Set Cookies with jQuery

Cookies are useful for a number of reasons. Their classic use is to store form information such as usernames, emails, etc. You can set cookies using jQuery just as easy as you can with PHP or any other language.

How to Set Cookies with jQuery

CSS AND JQUERY TUTORIAL: OVERLAY WITH SLIDE OUT BOX

The other day I was creating an overlay with a box for Cody’s jTextTranslate jQuery Plugin and I thought, it could be useful to describe the technique in a tutorial. So, I want to show you how to create a semi-transparent overlay that covers all the page, and a message box that can be turned …

CSS AND JQUERY TUTORIAL: OVERLAY WITH SLIDE OUT BOX

View Tutorial

 

LATERAL ON-SCROLL SLIDING WITH JQUERY

After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade.

LATERAL ON-SCROLL SLIDING WITH JQUERY

View Tutorial

Simple jQuery Spy Effect

It’s the QuickSnapper site (the left hand side) that makes use of the similar spy technique that I’ll explain how to produce.

Simple jQuery Spy Effect

View Tutorial

PORTFOLIO ZOOM SLIDER WITH JQUERY

In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin. The idea is to give the user the option to view details of …
PORTFOLIO ZOOM SLIDER WITH JQUERY

View Tutorial

Creating accessible charts using canvas and jQuery

This technique provides a simple way to generate charts, but more importantly, because it bases the chart on data already in the page in an HTML table element, it is accessible to people who browse the web with a screen reader or other assistive technology,

Creating accessible charts using canvas and jQuery

View Tutorial

jQuery for Designers

We’ve set up our page, we’ve run all our jQuery and we’ve hooked our click handlers. But what happens new newcontent arrives in the page, say via an Ajax request for instance? Those click handlers don’t work anymore.

jQuery for Designers

View Tutorial

TYPOGRAPHY EFFECTS WITH CSS3 AND JQUERY

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites.
TYPOGRAPHY EFFECTS WITH CSS3 AND JQUERY

View Tutorial

jQuery Tooltips – Create Your Own Tooltip Plugin

In today’s jQuery tutorial we are going to look at creating your own jQuery tooltip plugin!

jQuery Tooltips – Create Your Own Tooltip Plugin

View Tutorial

Converting jQuery Code to a Plugin

This is why today we are going to demonstrate the process of converting code to a plugin. We are going to take the code from our jQuery & CSS3 Select Replacement tutorial, and turn it into a ready for use jQuery plugin.

Converting jQuery Code to a Plugin

View Tutorial

ANIMATED TEXT AND ICON MENU WITH JQUERY

Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.
ANIMATED TEXT AND ICON MENU WITH JQUERY

View Tutorial

Timeline Portfolio

Timeline is a jQuery plugin specialized in showing a chronological series of events. You can embed all kinds of media including tweets, videos and maps, and associate them with a date. With some design tweaks, this will make it perfect for a portfolio in which you showcase your work and interests.

Timeline Portfolio

View Tutorial

FULLSCREEN SLIDESHOW WITH HTML5 AUDIO AND JQUERY

In today’s 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.

FULLSCREEN SLIDESHOW WITH HTML5 AUDIO AND JQUERY

View Tutorial

jQuery Lightbox Tutorial

In this tutorial I’m going to show you a simple implementation of a lightbox effect with jQuery.

jQuery Lightbox Tutorial

View Tutorial

jQuery Slideshows With the Cycle Plugin

jQuery also has an outstanding developer community with loads of plug-ins that you can use to expand jQuery’s capabilities while simplifying the process of development.

jQuery Slideshows With the Cycle Plugin

View Tutorial

Create a Slick Tabbed Content Area using CSS & jQuery

One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.

Create a Slick Tabbed Content Area using CSS & jQuery

View Tutorial

Selecting DOM Elements with jQuery

Perhaps the single most common task in JavaScript development is selecting and manipulating elements from the document object model (DOM). This is one of the things that jQuery does extremely well.

Selecting DOM Elements with jQuery

View Tutorial

HOVER AND CLICK TRIGGER FOR CIRCULAR ELEMENTS WITH JQUERY

Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.
HOVER AND CLICK TRIGGER FOR CIRCULAR ELEMENTS WITH JQUERY

View Tutorial

HTML5 File Uploads with jQuery

Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.

HTML5 File Uploads with jQuery

View Tutorial

jQuery Mobile Framework – A Forms Tutorial

In this tutorial, we will focus on some basic elements of jQuery Mobile: page structure, forms and Ajax form submission. The tutorial is based on version 1.0 alpha release 2 of the jQuery Mobile framework.

jQuery Mobile Framework – A Forms Tutorial

View Tutorial

IMAGE WALL WITH JQUERY

Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and …
IMAGE WALL WITH JQUERY

View Tutorial

Create a Windows-like Interface with jQuery UI

Have you ever wanted to create an interactive user interface for your application, but didn’t know how to? In this tutorial, we’ll create a Windows-like interface quickly and easily, by getting down and dirty withjQuery UI, a user interface library built on top of jQuery.

Create a Windows-like Interface with jQuery UI

View Tutorial

Crafting an Animated Postcard With jQuery

In this tutorial we will learn the basics of setting up a continuous animation which can be applied pretty much anywhere. Take a peek below to see an outline of what we’ll be learning today.

Crafting an Animated Postcard With jQuery

View Tutorial

An HTML5 Slideshow w/ Canvas & jQuery

You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.

An HTML5 Slideshow w/ Canvas & jQuery

View Tutorial

ANIMATED FORM SWITCHING WITH JQUERY

In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another form but instead make the new form appear within the same container, expanding or contracting to the dimensions of the new form. …
ANIMATED FORM SWITCHING WITH JQUERY

View Tutorial

Create a Cool Animated Navigation with CSS and jQuery

Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe’s Flash was the goto for anything animated, these days with the magic of javascript we can avoid Flash altogether. Today we’re going to build a really cool animated navigation menu using just CSS and jQuery.

Create a Cool Animated Navigation with CSS and jQuery

View Tutorial

Comments
  1. Posted by Web Design
  2. Posted by Seize Design
  3. Posted by Design Knock

Add Your Comment