Tutorial Top » jQuery

Creating an Animated 404 Page

admin — Mon, 31 Jan 2011 07:19:29 +0000

It is bound to happen. Sooner or later, somebody is going to type in a wrong URL or follow a broken link to your site. This is when the notorious 404 page is displayed. To make the experience less frustrating, you can take the time and design a friendly error page, which will encourage your user to stay at your web site.

Today we are making just that. We are going to create an animated 404 page, which you can easily customize and improve.Go To Creating an Animated 404 Page

A Stylish Navigation Menu With jQuery

admin — Sat, 17 Jul 2010 10:07:03 +0000

In this tutorial we are going to make a stylish CSS + XHTML navigation menu with the help of the jQuery library.Go To A Stylish Navigation Menu With jQuery

Sweet AJAX Tabs With jQuery 1.4 & CSS3

admin — Sat, 17 Jul 2010 10:01:55 +0000

Today we are making an AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery,Go To Sweet AJAX Tabs With jQuery 1.4 & CSS3 Tutorial

Colortip – a jQuery Tooltip Plugin

admin — Sat, 17 Jul 2010 09:57:28 +0000

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.Go To Colortip – a jQuery Tooltip Plugin Tutorial

A Fresh Bottom Slide Out Menu with jQuery

admin — Wed, 07 Jul 2010 10:59:50 +0000

In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.Go To A Fresh Bottom Slide Out Menu with jQuery

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

admin — Wed, 07 Jul 2010 10:18:00 +0000

We are making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases required.Go To A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

Simple AJAX Commenting System

admin — Wed, 07 Jul 2010 10:11:30 +0000

This time, we are making a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.Go To Simple AJAX Commenting System

Neon Text Effect With jQuery & CSS

admin — Wed, 07 Jul 2010 10:06:32 +0000

Today we are creating a neon glow text effect with CSS and jQuery. The first step to achieving this effect, is to create a background image, which contains two slightly different versions of the text. jQuery fades between those two versions creating a smooth transition effect.Go To Neon Text Effect With jQuery & CSS

How to Create a Nifty Dynamic Shadow with jQuery

admin — Tue, 06 Jul 2010 11:46:58 +0000

How to create a very nifty looking dynamic shadow with a few teaspoons of jQuery, a pinch of CSS and some transparent PNG’s as Base. I’ll explain every line of used code, so you can easily follow along and create your own awesome looking dynamic shadow powered by jQuery.Go To How to Create a Nifty Dynamic Shadow with jQuery

Pure CSS3 bokeh effect with some jQuery help

admin — Tue, 06 Jul 2010 11:40:09 +0000

Bokeh – In photography, bokeh is the blur, or the aesthetic quality of the blur, in out-of-focus areas of an image, or “the way the lens renders out-of-focus points of light.” (from Wikipedia). I’m pretty sure you’ve seen this effect before, since there are loads of wallpaper roundups and tutorials using this technique. Currently, one of my favourite wallpapers has to be this bokeh effect from -kol.

Today, I want to add another addition to the bokeh “hype”, by creating a pure CSS3 bokeh effect. With some help from jQuery, Go To Pure CSS3 bokeh effect with some jQuery help