Click here to Skip to main content
Click here to Skip to main content
Go to top

A JavaScript Scrolling Popup

, 14 Feb 2006
Rate this:
Please Sign up or sign in to vote.
With this script, you can build scrolling popups for your web pages, choosing the display corner and scrolling direction.

Sample Image - js_scrolling_popup.gif

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);
}

Sample Image - js_scrolling_popup_2.gif

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Massimo Beatini
Web Developer
Italy Italy
No Biography provided

Comments and Discussions

 
GeneralMy vote of 2 Pinmemberakivam16-Feb-09 7:01 
Generalcall the both function in button click Pinmembersridhar213-Sep-07 3:47 
Questionshow with Link Pinmemberurgido19-Jul-06 11:21 
AnswerRe: show with Link PinmemberMassimo Beatini19-Jul-06 21:13 
QuestionRe: show with Link Pinmemberurgido25-Jul-06 19:34 
AnswerRe: show with Link Pinmemberurgido25-Jul-06 19:35 
AnswerRe: show with Link PinmemberMassimo Beatini25-Jul-06 22:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 14 Feb 2006
Article Copyright 2006 by Massimo Beatini
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid