CodeProject: A Javascript Scrolling Popup. Free source code and programming help

Report Article

Discuss

Send to a friend

10 votes for this Article.

Popularity: 3.57 Rating: 3.57 out of 5

Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

Download source files - 119 Kb

Sample Image - js_scrolling_popup.gif

Introduction

This script allow 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 2 divs and you can decide to put directly an 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 a 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 width, height and title parameters to characterize your pop up.

How to use it

The pop up'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:

    
Then you have to call one of the two building functions
    
At this point you have to choose when to show your pop up calling the function ShowTheBox
This function accepts 5 input parameters:
 only_once: a boolean to specify if or not to show the pop up 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
Zip Souce file contains script, css, images and demo html pages.

I hope you enjoy this article.

http://www.code4dotnet.com

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Massimo Beatini

Occupation:	Web Developer
Location:	Italy

Other popular Client side scripting articles:

Handy XP Style Menu
This is a pretty menu in XP style. Easy to setup, highly customizable.
JavaScript For Beginners
A very easy tutorial for JavaScript beginners
JavaScript Virtual Keyboard
This article presents a Virtual Keyboard - an important addendum to the library of usability tools.
Auto-complete Control
Auto-complete control.
Observer Design Pattern Using JavaScript
Ensuring a crisp boundary exists between objects, enabling greater reuse and system maintainability.

Article Top

You must Sign In to use this message board.

Msgs 1 to 6 of 6 (Total in Forum: 6) (Refresh)

FirstPrevNext

Subject

Author

Date

call the both function in button click

sridhar21

4:47 3 Sep '07

hi Massimo nice article but i want to call both javscript(ShowTheBox and buildPopup_Frame) in a button click i check it but some problem is there please help thanks sridhar sridhar
Sign In·View Thread·PermaLink

show with Link

urgido

12:21 19 Jul '06

How can I do a LINK in order that whenever someone of a click opens the POPUP , I want to eliminate the auto-body-load?
Sign In·View Thread·PermaLink

Re: show with Link

Massimo Beatini

22:13 19 Jul '06

Hi,
build a new html page using the following html code.
It should help you to open popups using links.
Bye
Massimo


<html>
<head>

    <LINK REL=StyleSheet HREF="scrolling_popup.css" TYPE="text/css">
    <script type="text/javascript" language="javascript" src="scrolling_popup.js"></script>
    <script type="text/javascript" >

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

        buildPopup_HtmlCode(210, 210, 'This is my title', html_code);
    </script>

</head>
<body>
    <p>This page show how to use a link to open the popup
    </p>
    <br>
    <a href="#" onclick="javascript:ShowTheBox(false, leftSide, bottomCorner, bottopUp);">OPEN POPUP</a>
</body>

</html>

Re: show with Link

urgido

20:34 25 Jul '06

don't work Frown

my code:

<html>
<head>

<LINK REL=StyleSheet HREF="scrolling_popup.css" TYPE="text/css">
<script type="text/javascript" language="javascript" src="scrolling_popup.js"></script>
<script type="text/javascript" >
var html_code = 'This is an HTML code!
Click here';
buildPopup_HtmlCode(210, 210, 'This is my title', html_code);
</script>

</head>
<body>
This page show how to use a link to open the popup



OPEN POPUP
<script type="text/javascript" >

    //ShowTheBox(false, rightSide, bottomCorner, rightLeft);
    //ShowTheBox(false, rightSide, bottomCorner, bottopUp);
    //ShowTheBox(false, rightSide, topCorner, topDown);
    //ShowTheBox(false, rightSide, topCorner, rightLeft);

    //ShowTheBox(false, leftSide, bottomCorner, leftRight);
    //ShowTheBox(false, leftSide, bottomCorner, bottopUp);
    //ShowTheBox(false, leftSide, topCorner, topDown);
    //ShowTheBox(true, leftSide, topCorner, leftRight);
    //ShowTheBox(false, leftSide, topCorner, leftRight);
</script>
</body>

</html>

Re: show with Link

urgido

20:35 25 Jul '06

It works but I replace "removed" to "onclick"
Sign In·View Thread·PermaLink

Re: show with Link

Massimo Beatini

23:00 25 Jul '06

Sorry, you're right. It was a my error in copying the html code!!! Bye Massimo
Sign In·View Thread·PermaLink	2.00/5 (1 vote)

Last Visit: Friday, October 10, 2008 10:11 AM Last Update:Friday, October 10, 2008 10:11 AM

General News Question Answer Joke Rant Admin