Learning jQuery – Hot New Tips, Techniques & Tutorials

jQuery is my favorite JavaScript framework and it is always a pleasure for me to learn new techniques of it. It allows developers to create stunning visual effects, HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It is actually designed to change the way that you write JavaScript. In this article you’ll find some hot new jquery plugins, tips, techniques and tutorials that I think all web developers should have in their minds for next project! Enjoy!

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.

How To Create A Simple Modal Box With JQuery

There are loads of plugins out there to use for a modal box but some of over complicated for this simple task of showing a message on the screen in a lightbox. I decided that I would build my own and in this tutorial I will show you how to build a simple modal box in jquery.

A Simple jQuery tooltip plugin tutorial

It is always a pleasure learning new techniques although at first it may seem like too much work and just not worth the try but there are many benefits to this in the long-run..

jQuery PointPoint – A Plugin For Pointing To Things

In this tutorial, we will be writing a jQuery plugin that will help you draw users’ attention to a specific part of the page, in the form of a small arrow that is displayed next to their mouse cursor. This can be useful for pointing to missed form fields, buttons that need to be pressed, or validation errors that need to be scrolled into view.

Elastislide – A Responsive jQuery Carousel Plugin

With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

J is for jCookies – HTTP Cookie Handling for jQuery

jCookies, a jQuery plugin, makes getting and settings HTTP Cookies a breeze. jCookies allows the storage of any type of data: strings, arrays, objects, etc. A while back while developing my FormBuilder I needed a good solution for storing cookies via JavaScript. As a result of the work down for that project I built jCookies.

Shuffle Letters Effect: a jQuery Plugin

In this short tutorial we will be making a jQuery plugin that will shuffle the text content of any DOM element – an interesting effect that can be used in headings, logos and slideshows.

Google+ Activity Widget – jQuery Plugin

As Google+ API was just released a couple days ago, it is time to have a posts widget for it. So, this widget was created to display your Google+ profile and slides down your recent posts with any attached images.


Wheel scroller/Date and Time picker jQuery plugin for touch devices (Android phones, iPhone, iPad, Galaxy Tab)..

jQuery Plugin: triggerHandlers() – To Trigger Handlers On All Selected Elements

jQuery has a core method called trigger(). This method will trigger the given event on the selected elements and then propagate the event up the DOM before activating the default behavior (assuming it wasn’t explicitly prevented somewhere in the bubbling phase). If you don’t want to involve the bubbling and default behavior, jQuery also provides the method, triggerHandler(). This will trigger all the event handlers without any propagation; however, it will only do so on the very first element within the current collection.

Automatic Image Montage with jQuery

Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use. With the following script you can automatically create a montage, either for a liquid container or a fixed size container (including fullscreen), with the option to fill all the gaps.

Image Zoom Tour with jQuery

Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the “zoom” effect by enlarging the current image and fading in the new one.

Circular Content Carousel with jQuery

Today we want to share a simple circular content carousel with you. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the “more” link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.

Integrating Datepicker with jQuery

In this write up, we will show how you can create a Datepicker using this jQuery library. You can download the source files used in the end of the article.

Organizing events with jQuery

The problem with handling events with jQuery is probably that jQuery itself makes it really easy to make spaghetti code, so only reading the jQuery documentation you are bound to hit a wall at some point. I’m always amazed at junior javascript developers’ code and how they always mess things up if they use jQuery.

Sliding Download Button Using jQuery

Here’s an example of the button I’m showing you how to make..

Portfolio Image Navigation with jQuery

Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.

Display your Favorite Tweets using PHP and jQuery

If you have a twitter account, you oftentimes find yourself looking for a way to display your latest tweets on your website or blog. This is pretty much a solved problem. There are jQuery plugins, PHP classes and tutorials that show you how to do this.

Expanding Fullscreen Grid Portfolio

Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.

Flexible Nav jQuery library

Flexible Nav is a small jQuery library which add a smart navigation bar on the right of the page. It improves a web page navigation and helps to visualize different sections of a document, an article,.. any web page.

Content Rotator with jQuery

Today we want to share a fancy content rotator with you. It shows some image with a headline and sub-headline in each slide and allows navigating through the slides using the thumbnails that also contain a headline. Hiding the thumbnails will reveal a scrollable text container and the navigation arrows will move up so that one can navigate to the previous or next slides.

Bubble Slideshow Effect with jQuery

Today we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as a interesting slideshow. And as the code will be completely modular, you will be able to easily use it and modify it.

Vertical Sliding Accordion with jQuery

Today we want to share a slick and flexible vertical jQuery accordion with you. The main idea is to expand the accordion slices on click and show some more information. The other slices will become less opaque and squeezed. When navigating to the next slice using one navigation arrows, a new slice will slide in from the top or the bottom. Once a slice is open and we navigate, the subsequent slice will open on slide.

Create an Apple Itunes-like banner rotator/slideshow with jQuery

Apple has always been a god in the way they present their products on its website.There’s always something to admire about them .This article explains how to clone the slider in Itunes web store using jQuery.

Google Plus Photo stack animation using Jquery and CSS3

If you are using Google Plus then you must have noticed the photo stack effect when you view your own album or someone else album. In this tutorial, I will explain how you can achieve this effect powered by Jquery and CSS3.

You Might Also Like

One comment

  1. 1

Comments are closed.