Just wrote a simple sliding box script to make a message box appear sliding from left to the middle of web page. The box appears once a day. The first appearance is logged into a browser cookie, so if user opens the same website and if cookie was expired it appears again.
Note- In addition to jQuery library you need jquery.cookie plugin. The plugin could be downloaded from here:
http://plugins.jquery.com/project/Cookie
Following the javascript code. I placed this javascript code in <head></head> section of my web page after making calls to javascript files.
Although the code is quite self-explanatory i have placed comments next to each line of javascript which needed some explanation.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8;" /> <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/jquery.js"></script> <script src="path/to/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> [=**=] //for the sake of readability i have placed the javascript code block in a separate block down the page after the main page html code ends. That javascript code should be placed here while implementing this example. </script> </head> <body> <div id="popupslider" style="position: absolute;width:200px;height:100px;background:#FFCC66;top:200px;border:2px solid #F5461B;z-index:999;display:none;padding:10px;"><h2>Some content to be shown in the sliding box</h2> <a href="#" id="closepp">Close it!</a></div> more body content here.... .... </body> </html>
[=**=] – This is the javascript code block which is supposed to be wrapped in <script..></script> tags and placed between the <head></head> section:
var defaultCookieTime = 1440; //one day by default (set in terms of minutes)
jQuery(document).ready(function() { //js code to be executed on page load completed.
if(jQuery.cookie('sreqshown')==null) { //if cookie is not set yet, means this is where we know that this is the first ever visit of this user and we will show him/her sliding box with some content
var ww = jQuery(window).width(); //get width of the web page window
var ppw = jQuery("#popupslider").width(); //get width of sliding box
var leftm = (ww-ppw)/2; //do half of it, resulting "leftm" is the left margin needed to place the box in center of page horizontally
jQuery("#popupslider").animate({opacity: "1", left: "0" , left: leftm}, 1000).show(); //using animate method of jQuery to load pop up on page load. The box starts sliding from the far left and slides until it reaches the middle position of page we just calculated above (see leftm)
var activeCookieTime = new Date(); //creating date object
activeCookieTime.setTime(activeCookieTime.getTime() + (defaultCookieTime * 60 * 1000)); //setting cookie time using previously set variable "defaultCookieTime" which is measured in minutes. So for a day it is 1440.
jQuery.cookie('sreqshown', true, { expires: activeCookieTime, path: '/' }); //setting the cookie now
}
jQuery("#closepp").click(function() { //we usually include a "Close" link within the sliding box so user could close this box if he/she wanted to do so.
jQuery("#popupslider").animate({opacity: "0", left: "0"}, 1000).show(); //when user clicks "Close" it reverse the sliding animation to make the box disappear sliding from right to left.
});
});To view it in action you may want to check this link.
made all the changes but the popup doe snot appear at all – any ideas – removed the cookies also and no popup …
@Ezal – this script is supposed to load the pop up when page has finished loading. Refer to:
jQuery(document).ready(function() { //js code to be executed on page load completed.Hi,
Your script is very usefull, thanks for sharing it. However, is there anyway, we can make the pop up appear after the page completely finish loaded?
Thanks
page not found :(