Creating Popups

Popup windows have a bad reputation because of their overuse and abuse, but they can actually be a very helpful addition to a website.  When you click on a link in a website, often you will leave the site you were in and go to the new site in the same browser window.  However, if the link is opened in a new browser window, then it is called a popup.  Popup windows have a primary positive use:

• They allow you to open another web page from the one you are currently on, without actually leaving the page.

Although many pop-ups are set to come up automatically and often contain advertising, using them to appear from a manually clicked link will make your website much more helpful, user friendly and versatile. 

How to create a popup window in WebMedley:
(Warning...this is for more advanced users and will involve making some changes to the HTML code on your web pages.) 

Creating a popup window is basically the same as creating a link.  The only difference is the link will open up a new window to view the information.  You can specify how big this new window will be, where it will be and whether it can be resized or not. Setting these different parameters can allow you to do things such as create a tiny little popup box that can be resized, or a large popup window that can't.   We won't be covereing the full spectrum of how you can use popup windows in this article, but there are plenty of places online where you can read more about all the different popoup parameters.

STEP 1: Make sure you have something to link to

First of all, you need to have a page to link to.  If this link will take you to another website, then this has already been done.  If you are going to be linking to another page in your own webmedley site, make sure that page is created and has a file name that is easy to remember.   

STEP 2: What is going to be the link?

As Christians, we are called to be servants of God.  We strive to serve both those within our church community and those beyond it.  We offer a wide variety of ministries, for all ages.  Click here to read more about our ministries.

Now its time to locate what is going to be the link.  Just like with any other link, this can be an image, or text.  In the example were using, we will make the text "Click Here" the link to the popup.  Notice the text in picture to the right; you'll notice the words "click here" come just before the words "to read more about our ministries".

Now its time to dive into the HTML code and make the adjustments that will allow the popup to happen.  Don't let the HTML code intimidate you, it is merely text and can be deciphered easily.  Everything in HTML is basically an abbreviation for a command.

STEP 3: Add the JAVA code

Click on the "edit source" button on your toolbar, and maximize the window that appears.  This window will show you all the HTML code which has been generated in the content area of your webpage.  Luckily there is a "find tool" which will allow you to go straight to the text that we will be changing. 

 
In this window press <control>+"f" on your keyboard.  This is a shortcut for the find function.  In the search box enter the text you want to make a link, in this case "Click Here".  Press the <enter> key to begin your search.  The tool should immediately find the text you entered and will highlight it in the code.  You can now close the search window and concentrate on the text that we will make into a link.

All you have to do now is surround the text with some JAVA code.  By surround we mean you must put something before the text and after it. The JAVA code below is what you need to paste BEFORE the text.

<A onclick="window.open('http://support.webmedley1.com/.html','','width=630,height=430,resizable=1')" href="javascript:;">

You will need to make some changes to the above code:

1. Change what currently says "http://support.webmedley1.com/.html" to the address of the webpage you want to link to.
2. Set the width and height to the pixel size of the window you want to appear. 
3. "resizable=1" means this window will be able to be resized.  If you want to display a normal size website in a small window, you would want "resizable=1" which would allow the user to maximize the window and see everything on the page. In computer programming, a "1" means yes, and "0"  means no. 

Finally, you must place the following HTML tag after the text that will be the link:

</A>

This ends the function and lets the computer know that the text after this point will not be a link. You code should look something like this when you are finished.  Be sure to use the save button in the edit source window, as well as the save button on your WebMedley Toolbar. 

Want to read more on creating popups?