• Tweet

• Tweet

Happy New Year, Everybody !!

You may have seen many sites/blogs use a time delayed light weight Jquery popups like colorbox,thickbox and lightbox etc. for capturing leads or promoting something. See a example here -> Facebook Profits ( First we see their normal salepage, but after some seconds they serve a discounted price page with the help of colorbox )

Lets do this here. I hope it will help you.

We are going to setup a content colorbox using a “settimeout” javascript function. For this we need to include two .js files and a .css file in our webpage’s header.

1. jquery core file        2. colorbox widget files

Add following lines before </head> tag of webpage.

<script src="file-path/jquery.js" type="text/javascript"></script>
<script src="file-path/colorbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="file-path/colorbox.css" type="text/css" />

Download these files via following links :

Jquery.js : jQuery JavaScript library
Colorbox : colorbox widget

Colorbox can be used in many different ways like showing any outside URL in a frame box on any trigger of html element. You can find all example in the colorbox download. We are going to supply a url to colorbox main function which will popup a box with the supplied url.

So here is the colorbox function, we will use to pass url… 

$.colorbox({ href:"anyURL", iframe:true, innerWidth:600, innerHeight:400 });

You can notice that there is no Html element “id” with function. This is because we are going to autorun this function after a few seconds. In the case you want to trigger this popup on any click, you should use following function

$(".ElementID").colorbox({ href:"anyURL", iframe:true, innerWidth:600, innerHeight:400 });

Ok now back to autorun, we are going to use setTimeout() function. so here it is our function which will delay for a few seconds to open a colorbox with a url passed to it.

<script>
setTimeout(function(){
$.colorbox({ href:"http://huzzer.com", iframe:true, innerWidth:600, innerHeight:400 });
},20000);
	</script>

This function will delay 20 seconds, i.e. after 20 seconds a popup will appear automatically containing “huzzer.com”. 20000 is for 20000 ms , which is equal to 20 seconds.

You can check it here => Facebook Profits ( First we see their normal salepage, but after some seconds they serve a discounted price page with the help of colorbox )

_________________________________________________________________________

Author:

More Posts (2)