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

CSS Tip: Adjacent Sibling Selector vs nth-child

With CSS, if you need to style a specific child sibling you can use the nth-child selector:

But if you still need to support legacy browsers (IE8), you need to use a :first-child selector and an adjacent sibling selector instead:

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. Continue reading

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:

Continue reading

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).

Continue reading