Easy Java Script Code for Moving Popup
By Stephen Bucaro
You have probably come across a webpage where a small window appears at the side
of the webpage and drifts to the center of the webpage. They are commonly used to
present you with a form where you can enter your email address to subscribe to a newsletter.
In this article I give you the code to create this type of moving popup window.
Most of the time cut-and-paste code either doesn't work, or it works but because
you don't understand it you can't modify it for your own use. If you're a frequent
visitor to this website you know that I am NOT going to just give you the code.
I'm going to give you a tutorial explaining how the code works so that you completely
understand it and can modify it for your own use.
If you're NOT an experienced Java Script programmer, here's how you should proceed:
Create a new folder to contain your project files. As you're reading this article,
type the code into Windows Notepad. Save each example file with the extension .htm.
To demonstrate the example, double-click on the file name and it will open in
Internet Explorer.
Basic Code
In each example, start by typing in the tags shown below, which creates the basic
structure of a webpage.
<html>
<head>
<script language="JavaScript">
</script>
</head>
<body>
Any text you type between the body tags will appear on your webpage. Just type
in some random text.
</body>
</html>
Every example will begin with the code shown above. Between the script tags you
will be adding some very simple Java Script code. Most of your code will contained
within small Java Script functions, which have the structure shown below.
function functionName()
{
code goes here;
}
Every example will use the five functions listed below.
createPopUp
moveIn
beginDelay
endDelay
moveOut
The createPopUp function will create the popup and call the moveIn function.
The moveIn function will move the popup to the center of the webpage and
then call the beginDelay function.
The beginDelay function will use the Java Script built-in setTimeout
function to create a delay before it calls the endDelay function.
The endDelay function will use the clearTimeout function to end the
delay and then call the moveOut function.
The moveOut function will move the popup out of the window and then close it.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
