Using a Gif and CSS on Large Images

What?

Using CSS you can put an image as the background image of any images on your web site. Sounds confusing but a image is just a normal HTML DOM element, which means you can add the same CSS attributes to it such as borders and backgrounds.

If you have a website which has large images to load on the page the user will need to wait for them to load leaving a blank space on the screen.

Why?

If you place a background image on all images this will load before the image loads,

So all you have to do is create a smaller image such as a loading gif this will be loaded and it will be displayed in place of the larger image, when the larger image finishes loading it will replace the smaller image.

How?

Just create a small gif loading image and upload it to your website. Then change your CSS by adding this near the top of the CSS file.

img {
     background: url(images/loading.gif) no-repeat;
}

Background Colour Gradients in CSS

What?

CSS allows you to create a background colour gradient on any element. Allowing the background colour to change colour from beginning of the element to the end.

This increases readability on the element rather than using a solid colour.

Why?

Using CSS to do this task will mean less images on the page and will increase page load times.

How?

With many of the new features in CSS there is a different syntax for the different browsers but it is important to use all of them so the user will get the same design on any browser they use.

To create a background with gradient you will need the following CSS.

The first colour value is the starting colour and the second colour is what the gradient will fade into.

.gradient{
background-color:#FFF;

/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#FFFFFF, #000000);

/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#000000));

/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#FFFFFF, #000000);

/* Opera 11.10+ */
background-image: -o-linear-gradient(#FFFFFF, #000000);

/* Microsoft IE10 */
background-image: -ms-linear-gradient(#FFFFFF, #000000);
}

How to check if checkbox is checked using jQuery

(GNN) - I needed to find if a checkbox was checked in jquery but I knew of multiple ways to do this. But I wasn’t sure of the best way to perform this task.

Still I haven’t decided on the best way to do this so I was hoping someone with much greater knowledge than me in the inside-outs of the jQuery could help me out here. Out of the following examples what would be the best way to discover if a checkbox has been checked or not.

Using Attribute Method

This will check to see if there is an attribute on the element which is called checked.
<b>// First way $('#checkBox').attr('checked'); </b>

Using the IS Method Selector

This method will check to see if the element is checked.
<b>// Second way $('#edit-checkbox-id').is(':checked');</b>

Checked Selector

Get all elements which are currently checked by using the following snippet.
<b>$('.selector:checked')</b>

Using @ Attribute Method

This will use a @ selector which will define a search for an attribute on the element. So the below code will search for any element with type checkbox and if it is checked. <b>// Third way for jQuery 1.2 $("input[@type=checkbox][@checked]").each( function() { // Insert code here } ); // Third way == UPDATE jQuery 1.3 $("input[type=checkbox][checked]").each( function() { // Insert code here } );</b>