Tutorial: How to stop caching with jQuery and javascript

There are many reason people want to disable or stop caching by broswer. Especially when we are dealing with dynamic content that required the latest version to be displayed on the browser. However, due to security reason there are no perfect methods in javascript that can disabled caching for all browsers. In this tutorial, i will demonstrate a few way both javascript and jQuery used to stop or disable caching by browsers.


On the later version of jQuery v1.2 above, jQuery has provided a method to stop caching by browser with its ajax class. You can visit jQuery website to see the list of update on v1.2 and you will notice that they have now included a function to disable caching! You can either choose to control the way each individual dynamic content cached by setting the properties to true/false or you can just set a default to disabled all browser caching.

In order to determine each ajax call caching properties,

url: 'test.html',
cache: false,
success: function(html){

which is being reflected on the jQuery example. And in order to disable all caching by the browser we can do the following,

$.ajaxSetup({cache: false}});

This will have to be placed on top of the script in order for it to work.


The reason why browsers are able to cache a particular document is due to the url being passed to the browser are identical. In order to make it unique for each passes, we can place in a random number behind the url as shown below,

var img.src = 'www.hungred.com'+'?'+Math.random()*Math.random();
return $(img).load(function()

This method will ensure all document to be unique for every dynamic passes you throw to the browser which i find it more reliable and useful as this method has been there for quite sometimes and almost all of the browser will support such way of retrieving dynamic content.

HTML (16/04/2009)

You can also disable or stop caching using  the following meta tag,

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

This will prevent the whole page from being cached by the browser as well.

Tutorial: How does image fade in when picture loaded in JavaScript

There is a very nice method mention in here by Richard Rutter. But i will explain it with my own words on how this is being done since i am curious on how some of these things work. i basically look it up and explain them so that i could understand them in the future if needed.


#photoholder {
  background:#fff url('loading.gif') 50% 50% no-repeat;
#thephoto {

document.write("<style type='text/css'> #thephoto {visibility:hidden;} </style>");
window.onload = function() {initImage()}
function initImage() {
  imageId = 'thephoto';
  image = document.getElementById(imageId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;

  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";

  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;

  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;

  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
function fadeIn(objId,opacity) {
  if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity <= 100) {
      setOpacity(obj, opacity);
      opacity += 10;
      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);


<div id='photoholder'>
<img src='cute-puppy.jpg' alt='Photo' id='thephoto' />

the code above is the whole HTML file that is needed for this explanation. I did not change anything written by Richard Rutter and merely just compile it up for my explanation.

So what is going on with the above code is that Richard has written a very unique function for each activity occurs in this example. There are basically 3 method, initImage(), setOpacity, fadeIn. The css in here doesn't really play any important round other than displaying the image up. The initImage method set the oject opacity and activate fadeIn method that did a recursive to slowly fade the image. The technique to Richard way of doing is to load the 'loading' image out to the guys and only started fading the image once it has been loaded  by using the onload function to determine whether the page has completely loaded. Once it is determine, it will active the fade in method to do the trick.

The main interest i have is how fade in effect works and with the code written by Richard, it is clearly understandable how this is happening.

You can look at the example HERE.

Tutorial: How to produce the grey out effect using javascript and css

When i surf the net and saw all these fantastic feature where the screen went black-out when a user click certain link or button always makes me wonder how does it actually work? But i always do not have the time and knowledge to understand these things since my css knowledge has always been at the basic stage where understanding of it is just too little for me due to the working time that always occupate me. Recently, i have quit my job and went back to school which leaves me with a lot of space time. This has given me the chance to pump up my knowledge on css which i'm always weak in since the starting of my web programming. i would like to show my appreciation to the author of Hunlock who produce a great tutorial on this topic.

if you have a chance to visit Hunlock tutorial, you will see the above code that he wrote for this method to work. The technique to make the screen black-out is entirely depending on the CSS. What the above code does is to create a div tag just after the body tag which already have all the css rule appended into this particular div tag. But it is being hidden until a trigger occurs and turn the flag to true to display it out.

Originally, the background color of this particular div tag should be black entirely. However, with the introduction of alpha and opacity, it gives the background a feel of transparency. While the div is treated as a block level when its triggered and position at the top left hand side with the height and width being defined in the javascript, the whole screen will be occupant by the effect. The z-index will lift the div tag by z-axis (upwards) and anything below it will be covered by the black-out effect and whenever user tries to click anything below it, it will be disabled due to z-index and display:block.

function grayOut(vis, options, extra) {
  // Pass true to gray out screen, false to ungray
  // options are optional.  This is a JSON object with the following (optional) properties
  // opacity:0-100         // Lower number = less grayout higher = more of a blackout 
  // zindex: #             // HTML elements with a higher zindex appear on top of the gray out
  // bgcolor: (#xxxxxx)    // Standard RGB Hex color code
  // grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
  // Because options is JSON opacity/zindex/bgcolor are all optional and can appear
  // in any order.  Pass only the properties you need to set.
  var options = options || {}; 
  var zindex = options.zindex || 50;
  var opacity = options.opacity || 70;
  var opaque = (opacity / 100);
  var bgcolor = options.bgcolor || '#000000';
  var dark=document.getElementById('darkenScreenObject');
  if (!dark) {
    // The dark layer doesn't exist, it's never been created.  So we'll
    // create it here and apply some basic styles.
    // If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
    var tbody = document.getElementsByTagName("body")[0];
    var tnode = document.createElement('div');           // Create the layer.
        tnode.style.position='absolute';                 // Position absolutely
        tnode.style.top='0px';                           // In the top
        tnode.style.left='0px';                          // Left corner of the page		
        tnode.style.overflow='hidden';                   // Try to avoid making scroll bars            
        tnode.style.display='none';                      // Start out Hidden
        tnode.id='darkenScreenObject';                   // Name it so we can find it later
	var msgnode = document.createElement('div');           // Create the box layer.
		msgnode.style.position='fixed';                 // Position fixed
        msgnode.style.display='none';                      // Start out Hidden
        msgnode.id='box';                   				// Name it so we can find it later
		// give it a size and align it to center
		msgnode.style.width = "300px";
		msgnode.style.height = "300px";
		msgnode.style.marginLeft= "-150px";      
		msgnode.style.marginTop= "-150px"; 
		msgnode.style.textAlign = 'center';
		msgnode.style.top= "50%";                           // In the top	
		msgnode.style.left="50%";                          // Left corner of the page	
	tbody.appendChild(msgnode);                            // Add it to the grey screen
    tbody.appendChild(tnode);                            // Add it to the web page
    dark=document.getElementById('darkenScreenObject');  // Get the object.
  if (vis) {
    // Calculate the page width and height 
    if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
        var pageWidth = document.body.scrollWidth+'px';
        var pageHeight = document.body.scrollHeight+'px';
    } else if( document.body.offsetWidth ) {
      var pageWidth = document.body.offsetWidth+'px';
      var pageHeight = document.body.offsetHeight+'px';
    } else {
       var pageWidth='100%';
       var pageHeight='100%';
    //set the shader to cover the entire page and make it visible.
    dark.style.width= pageWidth;
    dark.style.height= pageHeight;
	if(extra == 'Y')
		document.body.style.overflow =  'hidden';
	document.getElementById("box").style.zIndex = zindex+10;
	document.getElementById("box").style.border = "#000 solid 1px";
	document.getElementById("box").style.display = "block";

	document.getElementById("box").onclick = function() //attach a event handler to hide both div
		document.getElementById("box").style.display = "none";
		document.body.style.overflow = 'auto';
	document.getElementById("box").innerHTML = "This is a box. Click me to exit effect.";
  } else {

However, user will still be able to use the scroll bar. This can be solve by adding this code

<span class="pun">document.body.style.overflow =  'hidden';

this will disable scrolling and cause the content to stay still. Depending on your need, the code produce by Hunlock can be alter accordingly.

test5 to test~

update: 27 June 2009****

I have changed the method above to include a box when the grey out appeared and a event handler attached with it so that it can be easily return back to its original form when clicked. Apologize if i did not make this update clean enough as i sort of made a quick update on it in order to answer Sanynn question below.

update: 12 July 2009*****

Update the method so that the box is align on the center, in order to align the box on the center when using position absolute, you must reset the four corner to 0 and margin to auto. Having problem aligning the box to center? Solve your problem easily with align center with CSS

update: 25 July 2009*****
If you are using jQuery, you may want to visit Simple Grey-Out Screen Effect with jQuery This article shows a complete grey out effect and how it can be done easily with just few lines of codes.

update: 24 September 2009*****
Updated the script so that the box will follow the scroll bar. The key is to position it 'fixed' and remember to placed up the DTD such as the one show below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If not IE won't align center. That's all! 🙂

Javascript Tutorial: Handling All Errors

I found a very interesting method to handle errors on JavaScript. What this does is to handle all error occurs in the script to a single function so whenever any error occurs, it will go into this particular function and alert the user.


function handleError()
alert(An error has occurred!');
return true;
window.onerror = handleError;

What it does is that whenever a run time error occurs, the function will goes into action! For example you try to trigger a function that does not exist! Instead of making your program stop functioning, we can provide a error message using the above method which can promote a more user friendly environment whenever an error occurs on our script. This is neat stuff!