Javascript: Pop Up Tutorial

BobbyDouglas · #1 20-Nov-2003, 22:19

Problem: We will have an image, that when you click on it, another window will pop up which will precede to play a song.

We will have a simple page, with an image. Once you click on this image, a Pop Up window will appear. You are able to put anything on the page that pops up, in this example, we are going to add a sound file.

Begin:----------------------
First off, lets think about what exactly we are doing.

We will have an image, that when you click on it, another window will pop up which will precede to play a song.

First, we will need something to start with. So lets figure out what our page is going to look like.

Basic layout of an HTML document is:

HTML Code:

<html>

<head>
<title>Title of Web Page</title>
</head>

<body>

</body>

</html>

The <body> is where the 'content' appears- which is what we will be using mostly.

We know we want to have an image. To do this, we will add the img src tag.

HTML Code:

<img src="location of image.image extension" border="0">

This will display an image on your page. We will include this tag inside the body tags of your html document.
----------------------------

HTML Code:

<html>

<head>
<title>Title of Web Page</title>
</head>

<body>
<img src="location of image.image extension" border="0">
</body>

</html>

----------------------------
Now that we have the image, lets think about what else we have to accomplish.

We know we want to make something pop up. To do this, we use JavaScript.

There are many Javascript Generators available for people to use on their websites, but I find it easy after working with many, to use the same one over and over. Here is the JavaScript PopUp Code I use:

Code:

<!--
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);}
// -->

I would rather not get into detail about the functions of this code, but it directly ties into the way we will PopUp a window.

Now lets add this code to our page. Put the code posted above inside the <head> and </head> tags. This is where most javascript is put.

Above the actual code we need to add the following line:

HTML Code:

<SCRIPT LANGUAGE="javascript">

.

And after the actual code we will add something to close the script. So add:

HTML Code:

</script>

.

This should be what your page looks like now:

HTML Code:

<html>

<head>
<title>Title of Web Page</title>
<SCRIPT LANGUAGE="javascript">
<!--
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);}
// -->
</script>
</head>

<body>
<img src="location of image.image extension" border="0">
</body>

</html>

Well, we now have:
1) A basic page with an image we will use later to open a window
2) JavaScript that will allow us to open the newly created window
--------------------------------
(Almost done)

So we have the JavaScript code, now we need to use it.

We will use HTML in order to use the javascript.

HTML Code:


<a onclick="NewWindow( this.href,'Info','570','400','yes','left' );return false" onfocus="this.blur()" href="location of page.extension"><img src="location of image.image extension" border="0"></a>

Now to explain what this does. The only properties you would want to change would be:
1) 570 - What height do you want your window to be?
2) 400 - What width do you want your window to be?
3) Yes - Do you want this window to be resizable?
4) Left - What position would you like this to be displayed at?

Then of course, the href, and the img src tags.
Href) Is the location of the page you want to link to. It is where you go when you click something
Img Src) The location of the image you want to use

Our next step is to make the page we want to open which will play the music file.

Lets use the default html document that I previously posted to start with.

Inside the body tag we will add the following:

HTML Code:

<EMBED src="location of file.file extension" autostart=true loop=false volume=100 hidden=true>
<NOEMBED><BGSOUND src="location of file.file extension"></NOEMBED>

This will play the music file once the page loads.

And now to sum it all up:

Our main page:

HTML Code:

<html>

<head>
<title>Title of Web Page</title>
<SCRIPT LANGUAGE="javascript">
<!--
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win=window.open(mypage,myname,settings);}
// -->
</script>
</head>

<body>
<a onclick="NewWindow(this.href,'Info','570','400','yes','left');return false" onfocus="this.blur()" href="location of page.extension[/b]"><img src="location of image.image extension" border="0"></a>
</body>

</html>

The page that our main page will link to:

HTML Code:

<html>

<head>
<title>Title of Web Page</title>
</head>

<body>
<EMBED src="location of file.file extension" autostart=true loop=false volume=100 hidden=true>
<NOEMBED><BGSOUND src="location of file.file extension"></NOEMBED>
</body>

</html>

Be sure to change the specific information. Let me know if there was something that you did not understand.

Goodluck!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
We're looking for JavaScript codes / mini tutorials.	JdS	Web Design Forum	7	31-Mar-2008 23:25
JavaScript Resolution Redirection Tutorial	pcxgamer	Web Design Forum	0	01-Dec-2003 11:37
JavaScript Tutorial Part 1	pcxgamer	Web Design Forum	2	01-Dec-2003 09:16
This JavaScript doesn't work on Mozilla.	JdS	Web Design Forum	8	02-Jul-2003 14:08
How do I create JavaScript Links?	JdS	Web Design Forum	8	29-Jan-2003 15:02