I tend to use this little bit of javascript quite a bit so I thought I would share. You can use this little javascript to add a “Pop-up” window effect to links in your website.
For example, if you have a page of product images and Item numbers you can make them link to a “Pop-up” window with the item details.
Making a lot of these pages can be very cumbersome so I suggest automating the page creation by pulling the item detail from a database. This can be achieved very simply by running a Cold Fusion Query… I’ll talk about that later.. But, for now here is the Javascript:
Place this first bit of code in the head of the document that will be calling the new window.
<script LANGUAGE=”JavaScript”>
<!–
function pop(url)
{
window.open(url,’profile’,’width=450,height=500,scrollbars,resizable’);
}function printWindow(){
version = parseInt(navigator.appVersion)
if (version >= 4) window.print()
}
//–>
</script>
This is where we define the properties of the new window that will be created. We define a width of 450 pixels and a height of 500 pixels. This can be set however large/small you need it.
Then we say we allow scroll bars (in case our content goes beyond the new window size), and we allow the window to be re-sized.
Here are some of the features that we can use to define our windows:
- channelmode – Specifies if window should be opened in channel mode. IE only.
- fullscreen – Specifies if window should be opened in full screen mode. IE only.
- height – Specifies the height of the window.
- left – Specifies the x coordinates of the window in pixels. IE only.
- location – Specifies if the location bar of the window should be included.
- menubar – Specifies if the menu bar of the window should be included.
- resizable – Specifies if window should be resizable.
- screenX – Specifies the x coordinates of the window in pixels. NS only.
- screenY – Specifies the y coordinates of the window in pixels. NS only. See “top” as well.
- scrollbars – Specifies if window should contain scrollbars.
- status – Specifies if the status bar of the window should be included.
- toolbar – Specifies if the toolbar of the window (ie: reload button) should be included.
- top – Specifies the y coordinates of the window in pixels. IE only.
- width – Specifies the width of the window.
Now, we call this new window by creating our link with the following information:
<code>
<a href=”javascript:pop(‘detail.cfm’)”>Click here for more information.</a>
</code>
Note: the file name to be called must be enclosed in’ ‘.
© 2006 – 2009, Robert Owen. All rights reserved.
