PDA

View Full Version : pop-ups

darkannie
04-27-2005, 08:15 PM
I was wondering if there was a code that I can use that would allow all links in a page to open in a pop-up window. Sort of like <base href> but for javascript.
Mr J
04-27-2005, 08:32 PM
Here is a typical example that allows you to change the width, height, and size of the popup although there are more attributes you can use.

It is adviseable to minimise the use of popups.

<script type="text/javascript">
<!--
function open_window(url){
newWin = open(url,'','width=200,height=100,top=300,left=250' )
}
//-->
</script>

<a href="your_page1.htm" onclick="open_window('your_page1.htm') ; return false">Page 1</A>

<a href="your_page2.htm" onclick="open_window('your_page2.htm') ; return false">Page 2</A>
darkannie
04-27-2005, 08:34 PM
Thanks, and the pop-ups are for a page of images. I just thought I'd give myself a short-cut.

Is there a way to have the windows automatically size to the pixels of the image in question?
rwedge
04-27-2005, 09:03 PM
This will allow you to open the new window based on the image height and width, plus centers the new window.
NOTE: in the code below the line -> width='+wid th+'
should be -> width='+width+ no spaces. It will not post correctly, wrap error?.

<script type="text/javascript">
<!--
/*<![CDATA[*/
function win(width,height,url) {
myfloater=window.open('','Title_Here','scrollbars=no,toolbar=no,resizeable=yes,status=no,width='+wid th+',height='+height+',top='+((screen.availHeight/2)-(height/2))+',left='+((screen.availWidth/2)-(width/2))+',directores=no');
myfloater.location.href = url;
}
/*]]>*/
// -->
</script>




<a href="javascript:win(380,135,'http://domain.com/images/pic.gif')">launch</a><br />
/Bob
Bill Posters
04-27-2005, 09:31 PM
<script type="text/javascript">
<a href="javascript:win(380,135,'http://domain.com/images/pic.gif')">launch</a><br />
/Bob

It's advisable to make that link more accessible by using the following method instead…
<a href="/images/pic.gif" onclick="win(380,135,this.href); return false;">launch</a>

That way the user can still access the pic even if js isn't enabled.
If it isn't, it will show the image in the current window. If it is, it will be shown in the popup instead.

Incidentally, it's worth implementing some kind of textual or visual notification that these links will open in a new window. Unwanted and unexpected popups are renowned for turning off visitors.
Even better would be to offer users the option of whether to view the pic in a new window or not, so they could choose for themselves.

Lastly (for now ;) ), if you're having the popup sized to fit the image, it's advisable to make the entire image a clickable area to close the popup window.

e.g.

…
<body>
<a href="#" onclick="window.close();"><img src="/images/pic.gif" alt="…" title="blah blah about image. (Click on image to close this window.)" /></a>
</body>