Jquery Labs » Tutorials

Sliding Box Effect

admin — Tue, 27 Jul 2010 10:08:33 +0000

How to Create Sleek Sliding Box Effect With jQuery

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: 1stwebdesigner, Effect, images, Sleek, Slide, Sliding, Tutorials

Colortip jQuery Plugin

admin — Fri, 23 Jul 2010 11:00:10 +0000

a jQuery Tooltip Plugin

In this tutorial we are going to write a simple jQuery tooltip plugin. It is going to convert the title attributes of elements withing your page, into a series of colorful tooltips. Six color themes are available, so you can easily match it with the rest of your design.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: Color, Colortip, container, Content, Tooltip, Tutorials, tutorialzine

jQuery PhotoShoot Plugin

admin — Wed, 21 Jul 2010 11:00:34 +0000

Making a Photoshoot Effect With jQuery and CSS

The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder. You can check out the demonstration above, or a nice tutorial on how to use it here.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: Css, image, Photo, PhotoShoot, pictures, Shoot, Tutorials

Auto Sprites

admin — Fri, 16 Jul 2010 08:03:24 +0000

AutoSprites – A jQuery Menu Plugin

Demostration
Demo Page

Documentation
Documentation Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: Auto, AutoSprites, Horizontal Menu, Menu, Sprites, Vertical Menu

Making a 3D Engine

admin — Thu, 15 Jul 2010 10:03:26 +0000

Making a 3D Engine in jQuery

In the previous post “3D tag cloud” I received quite a few requests for different shapes besides the ring. The problem is how the tag cloud was created it doesn’t lend itself to different shapes very well. So this post will show how to create a 3D engine in jQuery / JavaScript for those more exciting shapes.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: 3D, 3D engine, How To, Tag, Tag Cloud, Tutorials

3D Sphere Using jQuery

admin — Mon, 12 Jul 2010 10:09:05 +0000

Ever wanted your tag cloud to resemble a ball? Of course you did. This tutorial will walk you through how to create a Sphere in jQuery.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: 3D, Devirtuoso, Sphere, Tag, Tag Cloud, Tutorials

Shadow Motion Effect

admin — Sat, 19 Jun 2010 09:00:45 +0000

Shadow Motion Effect in 5 Lines Of jQuery

Who doesn’t love motion effects, right? shadows following the motion of movements while in a fighting scene, some of my favorite scenes are from The Matrix, Kung Fu Hustle, etc. I donâ€™t event know how this effect is called, but sure is an awesome effect. The good news is that now-a-days we can create animations and play with them. Itâ€™s no an easy task to control distance and motion (the complex the code, the better control). The amazing part is that something like this can be done with 5 lines of jQuery!

Demostration
Demo Page

Tutorial
Tutorial Page

Tags: .net, aext, Animation, Code, Effect, Effects, Favorite, jQuery, Like, Line, Motion, Movements, News, Shadow, Shadow Motion Effect, Sliding, Tutorials

Drop-down Nav Menu

admin — Thu, 17 Jun 2010 09:00:12 +0000

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.”

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: Code, Css, CSS3, Drop, Dropdown, Effect, Effects, Follow, Horizontal Menu, How To, Html, HTML5, Menu, Nav Menu, Navigation, nettuts, source, Touch, Tutorials, tutsplus

Creating a jQuery Dashboard

admin — Wed, 16 Jun 2010 14:12:01 +0000

The ‘Dashboard’ feature on a Mac looks great, and the menu allowing you to add/remove widgets is a well designed feature. A similar effect can add a whole new level of functionality to a website, providing a simple slide-down menu at the top of a page. This tutorial will walk you through the process from beginning to end.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: Admin, Board, Code, Dashboard, Design, designshack, Effect, Follow, Header, Hide, Mac, Menu, Navigation, Sign, Slide, Tutorials, Widgets

Query and Google Maps Tutorial

admin — Tue, 15 Jun 2010 11:00:58 +0000

There are many times I want to leverage jQuery’s strengths to create a custom Google Maps mashup. In this tutorial, I will walk you through how to get started using jQuery inside the Google Maps environment. I will assume nothing, and explain each piece in detail.

Demostration
Demo Page

Tutorial
Tutorial Page

Tags: API, Follow, Google, Google Maps, How To, Html, jQuery, Maps, Marcgrabanski, source, Star, Time, Tutorials, UI

Flot Canvas and Charts

admin — Sat, 12 Jun 2010 09:00:33 +0000

jQuery + Flot – Plots, Canvas and Charts

jMaxInput allows you to limit the input size of a textarea like it is done in Twitter. The number of characters left to type are shown while typing. The user can write as many characters as he wants (negative value is shown) but the text can only be submitted if the size of the input is below the limit (the button is active/inactive).

Demostration
Demo Page

Documentation
Documentation Page

Tags: Button, Canvas, Characters, Charts, Flot, Input, jQuery, Json, Like, Php, Plots, shinylittlething, Shop, Show, Text, Textarea, Twitter, User

Compact Labels

admin — Sun, 06 Jun 2010 11:00:30 +0000

Forms inputs and their labels – oh the tensions. A common

problem for laying out a labels and their inputs is that the labels dangle out in what appears to be whitespace. Form labels can make a design aesthetically awkward. There are several paths to solving this, but here I will follow the path of placing the label inside the text input element.

Demostration
Demo Page

Tutorial
Tutorial Page

Tags: Blog, Compact, Design, File, Follow, Form, Forms, Input, inputs, Label, Labels, mojebus, moronicbajebus, Sign, Text, Tutorials

Sponsor Flip Wall

admin — Fri, 04 Jun 2010 07:01:43 +0000

Sponsor Flip Wall With jQuery & CSS

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

Demostration
Demo Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: Code, Coding, Css, Design, Flip, Flip Wall, Form, Gallery, image, jQuery, logo, Php, Sign, source, Sponsor, Tutorials, tutorialzine, Wall

CSS Stack Menus

admin — Wed, 02 Jun 2010 11:00:46 +0000

navigation designs are based on borrowed ideas from operating system interfaces. With Webkit having taken a strong led on new CSS features for UI richness (with Mozilla and Opera quickly following), these new CSS features now allow the creation of CSS Stack Menus that are inspired on Mac OS X Stacks.

Demostration
Demo Page

Tutorial
Tutorial Page

Tags: Css, Cssplay, Design, File, Interface, Mac, Menu, moronicbajebus, Navigation, Rating, Round, Sign, Stack, Tutorials, UI

Designing the Digg Header

admin — Thu, 27 May 2010 11:00:03 +0000

Digg Header

This is a replica of the Digg header. Fluid width (but only to a point!), drop down menus, attractive search, easy to change colors… There is a lot of smarts in a small place in this example!

Demostration
Demo Page

Documentation
Documentation Page

Tutorial
Tutorial Page

Download
Download Source Code

Tags: .net, Attractive, Code, Color, Css, css-tricks, Design, Digg, Drop, Header, Horizontal, Horizontal Menu, Input, Like, Menu, Sign, source, Tutorials, UI

Jquery Labs » Tutorials

Sliding Box Effect

How to Create Sleek Sliding Box Effect With jQuery

Related posts

Colortip jQuery Plugin

a jQuery Tooltip Plugin

Related posts

jQuery PhotoShoot Plugin

Making a Photoshoot Effect With jQuery and CSS

Related posts

Auto Sprites

Related posts

Making a 3D Engine

Making a 3D Engine in jQuery

Related posts

3D Sphere Using jQuery

Related posts

Shadow Motion Effect

Shadow Motion Effect in 5 Lines Of jQuery

Related posts

Drop-down Nav Menu

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

Related posts

Creating a jQuery Dashboard

Related posts

Query and Google Maps Tutorial

Related posts

Flot Canvas and Charts

jQuery + Flot – Plots, Canvas and Charts

Related posts

Compact Labels

Forms inputs and their labels – oh the tensions. A common

Related posts

Sponsor Flip Wall

Sponsor Flip Wall With jQuery & CSS

Related posts

CSS Stack Menus

Related posts

Designing the Digg Header

Digg Header

Related posts