A JavaScript Scrolling Popup

• Download source files - 118 KB

Introduction

This script allows you to build a scrolling pop up using divs. 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 divs, and you can decide to directly put the HTML code inside the pop up using the function buildPopup_HtmlCode.

//
//  buildPopup_HtmlCode
//  build popup passing it the html code to put inside
//
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:

//
//  buildPopup_Frame
//  passing it the url of the frame to display inside
//
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, 'This is my title', './frm.htm');
</script>

or:

<script type="text/javascript">
    var html_code = 'This is an HTML code!<br>Click ' + 
       '<a href="javascript:alert(\'Hello!\');">here</a>';

    buildPopup_HtmlCode(210, 100, 'This is my title', html_code);
</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.

//
// ShowTheBox
//
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)
    {
        // verify the presence of a cookie
        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.

//
// check the cookie
//
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.