Whether you’re a developer or a designer, a strong jQuery skillset is something you can’t afford to be without.
Today, I’m going to show you 25 handy jQuery techniques And tutorials that will help you make your scripts more robust, elegant and professional.
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.
Mobiscroll
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.
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 accordion 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.
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.
