Forum Moderators: open
I'm not javascript guru. I have a small web project where I have a basic HTML-based page that displays a number of thumbnails. I need each of these thumbnails to open into a new, sized window. I got this to work by using the following bit of code(in the body)..
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* HERE IS THE BASIC SCRIPT */
<SCRIPT language="JavaScript1.2">
function openwindow()
{
window.open("mywindow.html", "mywindow1","location=1,status=1,scrollbars=1,width=460,height=795");
}
</SCRIPT>
/* AND HERE IS THE IMAGE AND CALL */
<a href="javascript: openwindow()"><img class="border" src="MyPicture.jpg" width=60 height=100></a>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
My problem is this....if I try to repeat this code for the next thumbnail... my page then ignores the first 'script' and assigns the attributes of the second one to all of the thumbnails. Here's my example of the repetition :
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* HERE IS THE 1ST BASIC SCRIPT */
<SCRIPT language="JavaScript1.2">
function openwindow()
{
window.open("mywindow1.html", "mywindow1","location=1,status=1,scrollbars=1,width=460,height=795");
}
</SCRIPT>
/* AND HERE IS THE 1ST IMAGE AND CALL */
<a href="javascript: openwindow()"><img class="border" src="MyPicture1.jpg" width=60 height=100></a>
/* HERE IS THE BASIC SCRIPT */
<SCRIPT language="JavaScript1.2">
function openwindow()
{
window.open("mywindow2.html", "mywindow1","location=1,status=1,scrollbars=1,width=500,height=650");
}
</SCRIPT>
/* AND HERE IS THE IMAGE AND CALL */
<a href="javascript: openwindow()"><img class="border" src="MyPicture2.jpg" width=60 height=100></a>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
My question is : Is there a way to define unique "id's" to each of the scripts... to allow each one to apply to a separate image? I LOVE how relatively compact this code is... I would love to keep this method.
Thanks!
What you want to do is pass the url (in this case, the image name) as a parameter to your function, then generate a unique ID for each call. These are bolded in the below example. As it stands, your new window is always named/id'ed as "mywindow1" so all calls to it will load into the same window if the visitor does not close the window each time. Generating a unique ID insures this will always open in a new window.
An easy way to do this is combine the Javascript functions date and getTime.
Additionally I've added a couple extras:
- use a real URL in your href, in case Javascript is disabled. (acessibility.)
- Combine the above with return false from the new window routine (also bolded). This allows Javascript to manage the link, and prevents the navigation to the link in the url.
- always include resizable, you never if know your user's environment will overflow your window.
- "=1" is not required ,neither is "=0" for window attributes, include them if you want them, leave them out if you don't.
- "language" is deprecated, use "type . . ."
- always quote attributes, use the alt tags (unrelated but an accessibility concern)
<script type="text/javascript">
function openwindow(url) {
var day = new Date();
var id = day.getTime();
var params ='location,status,scrollbars,resizable,width=460,height=795';
var win = window.open(url,id,params);
return false;
}
</script>
<a href="MyPicture1.jpg" onClick="return openwindow('MyPicture1.jpg')"><img class="border" src="MyPicture1.jpg" width="60" height="100" alt="Picture of puffball clouds"></a>
I have 1 more question if you're up for it?
Is there a way to define the window size on each link, rather than globally in the script?
Thanks SO MUCH for your help...this has really changed things for the better. :)
Is there a way to define the window size on each link, rather than globally in the script?
Actually, you're better off passing the size as your images can vary, so should the window. Note I've changed it from "url" to "img" so it's more descriptive, not recommended for web page URL's:
Something like
<script type="text/javascript">
function openwindow(img,w,h) {
var day = new Date();
var id = day.getTime();
// add some padding for the window
var winwidth=w+75;
var winheight=h+125;
var params ='location,status,scrollbars,resizable,width='+winwidth+',height='+winheight;
var msg='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"'+
' "http://www.w3.org/TR/html4/loose.dtd">\n'+
'<html lang="en">\n'+
'<head><title>'+img+'</title>\n'+
'<body><img src="'+img+'"width="'+w+'" height="'+h+'" border="0" alt="'img'">\n'+
'<form style="text-align:center">\n'+
'<input type="button" onClick="window.close();" value="Close Window">\n'+
'</form></body></html>\n';
var win = window.open(url,id,params);
win.document.write(msg);
win.document.close();
return false;
}
</script>
<a href="MyPicture1.jpg" onClick="return openwindow('MyPicture1.jpg',400,500)"><img class="border" src="MyPicture1.jpg" width="60" height="100" alt="Picture of puffball clouds"></a>
As you see, you add parameters for width and height. You can pass a title too; generally you'd write your new window routine to accept url's OR images, if it's a url, open the url using the first method, otherwise, document.write as above. There's some code laying around here . . .
