RapidWeaver FAQ - Popup windows







Share/Bookmark


What can popup windows be used for? How can I create a page to display in the popup window? How can I add Popup windows in RapidWeaver? How can I add centered popup windows in RapidWeaver?


Chapter 1: What can popup windows be used for? Some examples…
Chapter 2: How to build a page to display inside the popup
Chapter 3: How to have image popups
Chapter 4: Codes
4.1 Popup from text
4.2 Popup from an image
4.3 Popup from a rollover image



Chapter 1: What can popup windows be used for? Some examples…


Examples playing music:



Click Here

Example displaying photos:



Example displaying videos:

Click here

Example displaying text:

Click here

Chapter 2: How to build a page to display inside the popup


1.
Click here to download an empty HTML file
2. Open it in an HTML editor or a full text editor like TextWrangler to edit the settings for the background, change the settings for the fonts and add your content
3. Upload this file to the root of your server for the URL to be

http://yourdomain.com/nameofthepage.html

Replace page.html in the codes with this URL.

Chapter 3: How to have image popups


You may also want to have a look at
Highslide and Shadowbox.

The first step consists in uploading the image to your server as follows…

1. Create a new folder
2. Name this new folder something like ‘files’ or ‘media’ or whatever
3. Copy your .jpg or any other image file to that folder
4. Upload the folder to your server using your FTP application
http://yourdomain.com/nameofthefolder/nameofthefile.extension is the address at which the file will be stored on the web
Example: http://yourdomain.com/media/nameofthefile.jpg

It is recommended to upload two versions of the picture: a smaller version and one of the size you want it top display in the popup. The smaller version will be used on the page since it loads faster, the other one will be used in the popup. Of course you can also upload only one file and use it for both if you want.

Take code 4.2 or 4.3 and use the path to the image as the URL to open in the popup.

Chapter 4: Codes


To open the pop up you can have people clicking on a text-link, on an image-link or on a rollover image-link.

General instructions:

Replace page.html with the URL to the page you want to display in the popup window or to the URL of the image you want to display inside the popup window
Edit width=300, height=200 to the size you want the popup window to be and to fit the content of the popup window

Once you edited the code copy and paste it into your page or post. Once you added the code to RapidWeaver select it and go to "Format", "HTML" choose "Code".

4.1 Popup from text



<A HREF="#" onClick="window.open('page.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=300, height=200');return(false)">TextToDisplay</A>


In addition to the general instructions change TextToDisplay to the text you want to display as a link to open the pop up window.

4.2 Popup from an image



<A HREF="#" onClick="window.open('page.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=300, height=200');return(false)"><img src="URLofTheImage"  style="width:281px; height:100px; border:0px solid #cc3300;"></A>


In addition to the general instructions change URLofTheImage to the URL of the image you want to display as a link to open the pop up window and edit the width and height of the image.

4.3 Popup from a rollover image



<A HREF="#" onClick="window.open('page.html','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0, width=300, height=200');return(false)" onmouseover="document.sub_but.src='http://yourdomain.com/onroll.jpg'" onmouseout="document.sub_but.src='http://yourdomain.com/normal.jpg'"><img src="http://yourdomain.com/normal.jpg" style="width:281px; height:100px; border:0px solid #cc3300;" alt="Move your mouse over me" name="sub_but"></A>


In addition to the general instructions read the Rollover images and buttons FAQ


Note: With all the previously described methods people will have to click to open the player and music start playing. There’s a code that actually opens the popup window automatically when someone is visiting a page. The problem is: Most browsers will block it due to security reasons. Most people have “Block auto-popup windows” enabled in their browsers. The window will not popup for them. They just get notified that the browser blocked a popup and can then chose to allow it. And if you put the code to every single page I guess a window will pop up on every single page a user looks at. Bottom line: it’s not recommended to use it, thus I will not provide it here.


This FAQ is also discussed in my RapidWeaverFAQ.org E-Book (sample)

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
It's an EBookStoreToday.com company. It's presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -


Now share it…

Share