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.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Easy Java Script Code for Moving Popup

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268