Tutlist.com - Browse by Tag: jquery

In this tutorial we will see some way to select different elements using jQuery, from a basic multiple selection, a multiple selection revealing content and a excluding selection revealing content. See the three examples and read on.

Submitted by: JDStraughan
Submitted on: Jul 21, 2009

The jquery slidetoggle() is great, but one thing I always thought it was missing is some opacity fading in the sliding animation. When I was coding this iteration of position absolute I wanted this kind of animation so I went there and coded it. This is a very small plugin, but I still find the effect cooler than a regular sliding.

Submitted by: TJHooker
Submitted on: Jul 20, 2009

CSS and JavaScript files for some sites can become quite large. Using caching and compression, your website download times can be drastically improved. This tutorial will show you how to automatically gzip (compress) your files with PHP.

Submitted by: JDStraughan
Submitted on: Jul 20, 2009

In order to perform a vibration effect, we must first understand how will a person feel during an earthquake. The whole world will be shaking right? In a more defined term, it means that the object are moving on it own, not us. Similarly, we are staring at the monitor while the boxes are moving on its own! Next question, how do you move? The answer to my question will be the same answer on how the boxes move but not by legs. Rather, the position will be moved. In conclusion, we will try to move the position left and right, up and down to simulate vibration. Coding part will be split into 2 part. The structural and jQuery part. The CSS part is fairly simply to understand since we are just aligning them to the center and that’s it.

Submitted by: JDStraughan
Submitted on: Jul 20, 2009

Removing contents with Ajax is a useful tool to have in any web designers kit. Using a few lines of jQuery we can remove a div and simultaneously remove a record from the database with Ajax.

Submitted by: JDStraughan
Submitted on: Jul 20, 2009

Accessible data visualization in HTML has always been tricky to achieve, particularly because elements such as images allow only the most basic features for providing textual information to non-visual users.A while back, we wrote an article describing a technique we came up with to use JavaScript to scrape data from an HTML table and generate charts using the HTML 5 Canvas element. We've now rewritten and extended the code behind this technique and packaged it up as a new jQuery plugin called "visualize", which you can download below. The plugin provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Submitted by: JohnGalt
Submitted on: Jul 20, 2009

Navigation List menu + JQuery Animate Effect Tutorial JQeury is a fantastic javascript framework that really amazes me a lot. This tutorial will show you how to create an attractive menu just a small touch by using JQuery animate effect. One of the reasons I learn JQuery is that it keeps my HTML code clean, I can isolate javascript in different files. Before this, I used onmouseover, onmouseout, onclick and element ID on the list, and you'll know how messy it can be. (I'm still using it in this website! gotta change it sometimes) Now, with JQuery, it saves me a lot of works.

Submitted by: JohnGalt
Submitted on: Jul 19, 2009

The concept for an inner fade is much troublesome than a normal fade effect in jQuery. A normal fade effect in jQuery will only required the fadeIn,fadeOut or fadeTo method to be called by the chaining process. Inner fade effect will require an additional step which is to arrange the images into a stack. Similar to the shuffle concept but we will just have to use the built-in feature of jQuery, animate to complete this tutorial.

Submitted by: JohnGalt
Submitted on: Jul 19, 2009

This is a tutorial demonstrating how to use the jQuery plugin system to build a simple star ratings control. Almost all controls and features within jQuery are now built using the plugin architecture. It's actually a very simple system, and jQuery provides some pretty good documentation to get you started.

Submitted by: JohnGalt
Submitted on: Jul 19, 2009

Not too long ago I wrote a tutorial on how to create a drop down menu with CSS & jQuery, today I would like to go over how to create a simple navigation with a horizontal subnav. In most cases we can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds.

Submitted by: JohnGalt
Submitted on: Jul 19, 2009