Developer

Stupid Web Tricks: Create a scrolling credits pop-up window

Show visitors who's responsible for your site's creation with a pop-up window that displays the site's credits in big budget film style.

This scrolling credits window is not something you see every day on the Web, but we thought it was sufficiently stupid to include. Created by Builder.com producer Paul Anderson, it pops up a window with scrolling credits, just like at the end of a big-budget movie. (Note: This trick works only in Navigator 3.0 and later and Internet Explorer 4.0 and later.)

Step One
First, set the link to the pop-up window in your existing page. To do this, you need to add the following JavaScript to that page's <HEAD>:

<SCRIPT language="JavaScript">
<!— hide javascript

var winOpts = 'resizeable=no,scrollbars=yes,width=400,height=300';

function popUp(pPage) {
popUpWin = window.open(pPage,'popWin',winOpts);
}

//—>
</SCRIPT>

Then add a link to this window somewhere in the body of your document:

Want to see the credits? Click <A href="javascript:popUp('credits.html')">here</A>.

This link will open up a small pop-up window. In our example, the HTML document credits.html is being called for that window. You should either name the next document you create credits.html, or be sure to make the link consistent with the filename you use.

Step Two
Now create the document that contains the credits. This will be a standard HTML page; you can set the background, font colors, and sizes, as you would with any page. There are just a few things you need to add.

This code goes in the <HEAD> of your page:

<SCRIPT language="JavaScript1.1">
<!— hide javascript

scrollID=0;
vPos=0;

function onWard() {
vPos+=2;
window.scroll(0,vPos);
vPos%=1000;
scrollID=setTimeout("onWard()",40);
}

// done hiding —>
</script>

You will need to adjust the number in the statement vPos%=1000, which determines when the credits restart. In our example, it's set to 1000. The figure you choose may cause the screen to reset before the credits are done, or the process may wait too long to start over, depending on how much content you put in the window. Play with the value until you get the effect you want.

Step Three
Add the following event to the <BODY> tag of credits.html:

<BODY onLoad="if(window.scroll)onWard()">

Step Four
Add the text to the page. To smooth out the scrolling effect, you may want to add extra space at the top and bottom of the page. Just add a series of <BR> tags.

Editor's Picks