Archive results for: jQuery Tips

jQuery Tip: Image Preloading

Apart from using JavaScript to pre-load images, you can very easily use a little bit of jQuery to do the same:

Demo: http://jsfiddle.net/ucv4g/

If you want to use a jQuery plugin for image preloading, here are a few:

https://github.com/farinspace/jquery.imgpreload
https://github.com/dreamerslab/jquery.preload


jQuery Tip: Binding Multiple Events

When you need to have an element respond to multiple events (i.e. desktop and mobile), you can use the bind() jQuery  method.


Formatting Tables Quickly

tablesWhen you have lots of data tables on a website and need to quickly format them so they are readable look at least somewhat not too boring a little CSS and jQuery can go a long way.

As we all know tables should be only used for tabular spreadsheet-like data but even then there are considerations to me made when trying to design them in a way that matches the rest of your site. So every situation will be unique but here is a sample that can be used as a starting point.

These styles add a thin border around all cells, put content vertically spaced, unique header background color, and consistent text alignment to the left. Read more ›


jQuery Tips: :contains() selector

I’ve used the :contains() selector in a recently web project and was reminded just how useful it was.

If you need a quick way to  modify an HTML element based on the text it contains, it’s a great little method.


jQuery Tip: Another Simple Image Slideshow

Here is another image slideshow that is slightly different from the last one I reviewed  as it has the images  surrounded by a DIV so you can add text to each if you wish.

We just wrap each image with a DIV with the appropriate styling:

Read more ›


jQuery Tip: Simple Image Slideshow

Image slideshows have been around forever, but I thought I cover one from my Intro to jQuery Class.

The objective of this image slideshow is just have a series of image contained in a DIV element. By default the first image will display while the rest of the images (however many there are), will be hidden.

A CSS class is needed for first image to display, the rest by default will be hidden (display: none).

Read more ›