Introduction
This script allows you to build a scrolling pop up using div
s. You can locate the scrolling pop up in a corner of a web page and choose the scrolling direction (i.e., left-to-right or top-down). This script has been tested only with Internet Explorer 6.0, Firefox 1.0.7, and Opera 8.51 on Windows 2003 Server.
How it works
The script builds the pop up structure using two div
s, and you can decide to directly put the HTML code inside the pop up using the function buildPopup_HtmlCode
.
function buildPopup_HtmlCode(width, height, title, htmlCode)
{
if (width)
popupWidth = width;
if (height)
popupHeight = height;
if (title)
_title = title
document.write('<div id="postit" class="postit">');
document.write('<div id="postit_title" class="title"><b>' + _title +
'<span class="spantitle"><img src="close.gif" border="0" ' +
'title="Close" align="right" WIDTH="11" HEIGHT="11" ' +
'onclick="closeit()"> </b></span></div>');
document.write('<div id="postit_content" class="content">');
document.write(htmlCode);
document.write('</div></div>');
getCrossObj();
}
or specify the URL of a frame to show inside, using the function buildPopup_Frame
:
function buildPopup_Frame(width, height, title, framesrc)
{
if (width)
popupWidth = width;
if (height)
popupHeight = height;
if (title)
_title = title;
document.write('<div id="postit" class="postit" >');
document.write('<div id="postit_title" class="title"><b>' +
_title + ' <span class="spantitle"><img src="close.gif" border="0" ' +
'title="Close" align="right" WIDTH="11" HEIGHT="11" ' +
'onclick="closeit()"> </b></span></div>');
document.write('<div id="postit_content" class="content">');
document.write('<iframe src="' + framesrc + '" width="100%" height="100%" ' +
'marginwidth="0" marginheight="0" ' +
'hspace="0" vspace="0" frameborder="0" scrolling="no" ' +
'bordercolor="#000000"></iframe>');
document.write('</div></div>');
getCrossObj();
}
The building function also accepts the width
, height
, and title
parameters to characterize your pop up.
How to use it
The popup's layout is customizable using the scrolling_popup.css file. To use the script, first you must insert the following HTML code in the head
section of your page:
<link REL=StyleSheet HREF="scrolling_popup.css" TYPE="text/css">
<script type="text/javascript" language="javascript" src="scrolling_popup.js"></script>
Then you have to call one of the two building functions:
<script type="text/javascript">
// build the popup using an iframe
// passing the url of the page to show
// on it
buildPopup_Frame(510, 481, </script>
or:
<script type="text/javascript">
var html_code =
buildPopup_HtmlCode(210, 100, </script>
At this point, you have to choose when to show your pop up by calling the function ShowTheBox
.
This function accepts five input parameters:
only_once
: a boolean to specify if or not to show the pop up on every visit of the container page;
side
: the target side, leftSide
or rightSide
;
corner
: the target corner, bottomCorner
or topCorner
;
direction
: the scrolling direction, leftRight
or rightLeft
or bottopUp
or topDown
;
Senseless combination of the side, corner, and direction parameters will not produce any result. I.e. ShowTheBox(true, leftSide, topCorner, rightLeft);
has a senseless combination: using the rightLeft
direction on the leftSide
means hide the pop up beyond the left page's border.
function ShowTheBox(only_once, side, corner, direction)
{
if (side == leftSide)
{
if (direction == rightLeft)
return;
crossobj.style.left = '1px';
}
else
{
if (direction == leftRight)
return;
crossobj.style.right = '1px';
}
if ((corner == topCorner) && (direction == bottopUp))
return;
if ((corner == bottomCorner) && (direction == topDown))
return;
if ( (direction == topDown) && (corner == topCorner) )
crossobj.style.top = '-' + popupHeight + 'px';
else if ( ((direction == rightLeft)||(direction == leftRight)) &&
(corner == topCorner) )
crossobj.style.top = '1px';
else if (corner == bottomCorner)
crossobj.style.bottom = '2px';
if (only_once)
only_once_per_browser = only_once;
if (only_once_per_browser)
{
if (showOrNot())
showIt(direction);
}
else
setTimeout("showIt("+ direction + ")",1030);
}
A ShowTheBox
calling example:
<script type="text/javascript">
ShowTheBox(false, leftSide, bottomCorner, bottopUp);
</script>
If the only_once
parameter is true
, the script checks the presence of a specified cookie. If this cookie exists, the pop up was already opened on the page and the script will not open it again.
function showOrNot(direction)
{
var showit = false;
if (get_cookie('postTheBoxDisplay')=='')
{
showit = true;
document.cookie = "postTheBoxDisplay=yes";
}
return showit;
}
Conclusion
The Zip source file contains the script, CSS, images, and the demo HTML pages. I hope you enjoy this article.
http://www.code4dotnet.com.