Popup Windows (V 4.4)
These popup windows are totally transparent to any "popup stopper" programs out there since they are not popups at all. I personally hate popups when excessively used, but there are times where they make sense in a page's design.
Along with the ability to control just about every aspect of their appearance, I created a number of javascript functions you can use to control them via link or timer. Examples of these functions can be found in the table below. They are explained in greater detail further down this page.
*** WIZARD *** You can use the wizard, found here to assist in the initial creation of these popups.
Script features/usage:
- Each of these popups operate independently. So, all values can be different for each one, and each can behave differently.
- You can drag these popups around by using the titlebar. This feature can also be disabled for windows that stay put. You can also move windows dynamically (even though the manual drag is disabled) through the function:
movePopup( 'ID' , leftPos , topPos )
'ID' = The ID of the popup.
leftPos = Left corner pixel coordinate.
topPos = Top corner pixel coordinate.
- You can resize them by clicking the little triangle icon
in the lower right corner of each popup and dragging to the desired size. You can also resize windows dynamically through the function:
resizePopup( 'ID' , width , height )
'ID' = The ID of the popup.
width = Width in pixels.
height = Height in pixels.
This feature can be disabled. If it is disabled, the little resize handle and the minimize/maximize buttons will not appear and the function will not resize the windows.
- To close the popup, just click the box in the corner
. This actually just "hides" the popup. They can also be hidden or shown again through 2 functions:
hidebox( 'ID' ) and showbox( 'ID' ).
'ID' = The ID of the popup you want to hide/show.
Examples:<a href="javascript:showbox('Div_ID1')">Show Div_ID1</a>You cannot create links like this to control popups created dynamically because you dont know what their ID will be.
<a href="javascript:hidebox('Div_ID1')">Hide Div_ID1</a>
- You can make the popups fade into and out of view through the functions:
fadeboxin( 'ID' ) and fadeboxout( 'ID' )
'ID' = The ID of the popup you want to fade into/out of view.
Examples:<a href="javascript:fadeboxin('Div_ID1')">Fade In Div_ID1</a>Popups can be faded into view only when they are already hidden, and faded out of view when they are visible. You can only have one popup fading in or out at one time. This is intentional because of browser rendering speed. You cannot create links like this to control popups created dynamically because you dont know what their ID will be.
<a href="javascript:fadeboxout('Div_ID1')">Fade Out Div_ID1</a>
Due to an IE quirk where scrollbars flicker during fade in/out, all popups scrollbars will be temporarily disabled during the fade in/out duration.
- You can change the content (or URL source for external types) of any windows dynamically through the function:
changecontent( 'ID' , 'content (or URL)' )
'ID' = The ID of the popup.
'content (or URL)' = The new content. If the popup is set up as an external window, then this text will be interpreted as the new URL.
- To "minimize" the popup, click the minimize box
. This will shrink the popup so just the titlebar shows. You can still drag the box around too. This icon only appears if resize is enabled for this popup.
- To "restore" the popup, click the restore box
. This will restore the popup to its original height. This icon only appears if resize is enabled for this popup.
- If one popup is under another one, simply clicking anywhere on a popup underneath brings it to the top. Any new popup that is created will be above all the others. This does not hold true when displaying another sites contents in a popup when using Netscape6 (NS7 is ok). Read further on for details.
- Scrollbars will automatically appear if the content inside the popup exceeds the dimensions. In IE5.5+, these scrollbars can be set to a color.
- These popups can be set to start in their "closed" state so they can be made to appear via a javascript pseudo link. This is preferable to creating a new popup via a link due to some technical reasons. Read the installation instructions for more information on this.
- There is a semi-transparent (IE5+,NS6+ only) shadow under the popups which can be set to any color (although black looks best) to give them a sense of depth.
- You can display another page's contents in the popup by entering the site URL and setting a flag.
- You can configure the popups to appear or not appear if the user returns to the page. This is accomplished by the use of cookies. Obviously, if the user has cookies disabled, this won't function properly, but should not generate errors. Thanks to DynamicDrive.com for this idea, which I implemented from their fix to this script that appears on their site.
To install this script, follow the steps below:
- Paste the code below somewhere in between the <HEAD> and </HEAD> tags:
<script language="JavaScript" src="popup.js"></script>
- You will need to have the file "popup.js" uploaded to your server.
- Then, you'll need to create the popups using lists of parameters. Use the example below to see the format:
new popUp(left_position, top_position, width, height, id_of_box, content_text, content_bgcolor, content_text_color, content_font_stylestring, title_text, title_bgcolor, title_text_color, border_color, scrollbar_color, shadow_color, is_hidden_on_start, is_draggable, is_resizeable, show_old, is_external, disable_on_return );
- left_position - Left pixel coordinate from left edge of browser window. Number.
- top_position - Top pixel coordinate from left edge of browser window. Number.
- width - Width of popup in pixels. Number.
- height - Height of popup in pixels. Number.
- id_of_box - Unique arbitrary ID value given to the popup. String.
- content_text - HTML string inside popup. Because the content is in string form, watch for quotes syntax! Use the wizard (at top of page) for help.
- content_bgcolor - Content area background color. Hex color triplet or valid color name string.
- content_text_color - Content text color, obviously. Hex color triplet or valid color name string.
- content_font_stylestring - Font style set using CSS type syntax. Hex color triplet or valid color name string.
- title_text - Text to appear in the titlebar. String.
- title_bgcolor - Background color of the titlebar when active. Hex color triplet or valid color name string.
- title_text_color - Color of the titlebar text. Hex color triplet or valid color name string.
- border_color - Color of the popup borders. Hex color triplet or valid color name string.
- scrollbar_color - Color of the scrollbar (IE5.5 only) and the color of the titlebar when not in focus. Hex color triplet or valid color name string.
- shadow_color - Semi-transparent shadow color (IE5+, NS6+ only). Hex color triplet or valid color name string.
- is_hidden_on_start - Specifies whether the popup is initially "closed". true or false.
- is_draggable - Specifies whether popup is draggable. true or false.
- is_resizeable - Specifies whether popup is resizeable. If not, resize handle and the minimize/maximize buttons will not be present. true or false.
- show_old - Specifies whether the popup will show up in "non-standards" browsers. The popup appears as normal windows in these types of browsers if this value is enabled. true or false.
- is_external - Specifies whether the text in the content area is a link to an external website or simply text to display in the popup. If this is not set, the URL in the content area will not be loaded, it will just be displayed as text. true or false.
- disable_on_return - Specifies whether the popups will reappear if the user returns to the page. This option uses cookies, so the user must have cookies enabled for this to work. true or false.
- The neat thing about this script is that none of the popups have to be pre-defined. They can be created on-the-fly, just like in the popup wizard (link for that is in the blue box near the top of the page)! But, if you do have pre-defined windows you wish to use, you'll have to create them once the page finishes loading. This is done by putting them in a window.onload event handler. The code would look something like:
window.onload=function(){
new popUp(250, 50, 350, 175, "box1"...
new popUp(250, 50, 350, 175, "box2"...
} - If you are using a link to dynamically create a popup, please read:
Because a user can click a link repeatedly, the link you use to create the popup will be using the same id_of_box, which will not work. You must find some way of ensuring all popup id's are unique. Using a counter and appending the counter value to a base id string works well ( 'id' + 1 = 'id1' , 'id' + 2 = 'id2', and so on). Here is a quick script example:var counter=0;
This is why it may be better to have a popup predefined and use a link to make it appear instead of using a link to create a new one.
function createPopup(){
counter++;
new popUp(50, 75, 200, 200, ('popupID'+counter), 'Content' , other parameters...);
}
- Do NOT use any spaces in the ID name, errors will result. Errors will also appear if you use an invalid color name (such as "blakc"). You can avoid this by using hex color triplet values instead (ex: "#FFFFFF" instead of "white"), or make sure the color names you use are CSS approved.
- Even though these windows can load external sites, Netscape 6 acts funny when there are more than one popup. For some reason, the popup with external page content will always appear on top of the other popups. The effect isn't too pleasing. I would recommend using only one popup window if you plan on using the script in this way. This effect isn't noticeable when there is only one popup.
Some people have asked me why I don't simply use style sheets to govern these popups' appearance. There are two reasons:
- When used in "old browser" mode, the script couldn't read the values from a style sheet.
- It makes the script more "fool-proof" by not exposing certain style values to the end user. My scripts are designed to be as modular and easy to implement as possible, although this one can be difficult for a "newbie" to configure.
The release notes are included in the downloadable zip file for those who are interested in the evolution of this script.