...

View Full Version : javascript windows



steventhomasb
08-06-2006, 03:11 AM
dear chaps/chapesses

so ive been close to destroying the earth for about 3 weeks now trying to find an answer to this problem

i want a new window to open at the click of a link, i want many links on one page, and i want each link to open a different image on my gallery with different sized windows suited to each image

ok, so i found a generator(more like 10 generators, but they all do the same thing) which i think has what i need, this is what i get

window.open('image.jpg', 'sketches', 'menubar=yes,resizable=yes,height=480,width=640', false);

im sure this would work IF THEY GAVE ALL THE INFORMATION, there are millions of tutorials but this is all i get! i know i need something in the <head> tags and i need something to go around the line i just posted

ive been searching for over 3 weeks, and i search for several hours at a time, so you can all now tell how much hair i have left. I know i should learn from the A's first, but seriously, all the information should be giving with this stuff, its baffeling, please save me

steven

glenngv
08-06-2006, 03:30 AM
http://www.codingforums.com/showthread.php?t=9836

steventhomasb
08-06-2006, 05:06 AM
thank you very much glen, after all this time, i cant tell you how relieved i am

i have checked all through this forum in the past few weeks, i guess i didnt look at that page deeply enough, i think someone should definately add that snippet to the working useful code section


steven

_Aerospace_Eng_
08-06-2006, 05:20 AM
You may also like the Lightbox v2 (http://dynamicdrive.com/dynamicindex4/lightbox2/index.htm) script.

RexxCrow
08-06-2006, 05:39 AM
I was making this and had it working, though during my finalizing it crapped out, I can't see what I did to mess it up at all? I even pulled out the styles to check if that was it, it is acting as if the function is breaking, I honestly had it going good to, unless it is must my windows that crapped out, but I did restart Firefox just to see if that was causing the issue as sometimes it blows a gasket and acts funky...



<html><head><title>Place Title Here...</title><script language="JavaScript" type="text/JavaScript"><!--
var ht=screen.availHeight-75;
var wd=screen.availWidth;
var hty=Math.floor((ht/2)-175);
var wdx=Math.floor((wd/2)-247);
function loadImage(image){
setImage='<html><head><title>Image Viewer</title><STYLE TYPE="text/css"><!--BODY{background-color:#F0F8FF;padding:20px;cursor:default;}a{text-decoration:none;}a:hover{color:#FFFF00;}DIV{border: 10px inset #B0C4DE;}P{border:5px ridge #F5F5F5;text-align:center;color:#B0C4DE;font-family:Arial;font-size:14px;padding:20px;}img{height:200px;width:425px;magin:auto;}//--></STYLE></head><body ALIGN="center"><DIV><img src="'+image+'"alt="Images from my personal album..."title="These is from album part 1 of x."></DIV><P><a href="javascript:self.close();">Close this window.</a></P></body></html>'
ImageView=window.open("","ImageView","width=500,height=350,top=0,left=0,");
ImageView.moveTo(wdx,hty);
ImageView.document.write(setImage);
ImageView.document.close();
ImageView.window.focus();
}
//--></script><STYLE TYPE="text/css"><!--
BODY{background-color:#F0F8FF;padding:20px;cursor:default;}
a{display:block;text-decoration:none;}
a:hover{color:#FFFF00;}
DIV{width:250px;margin:auto;border: 10px inset #B0C4DE;text-align:center;color:#B0C4DE;font-family:Arial;font-size:14px;padding:20px;}
//--></STYLE></head><body ALIGN="center">
<DIV>
<a href="javascript:loadImage('.GIF');"target="Please click to view this 1st image of my online album.">View Image 1</a>
<a href="javascript:loadImage('.GIF');"target="Please click to view this 2nd image of my online album.">View Image 2</a>
<a href="javascript:loadImage('.GIF');"target="Please click to view this 3rd image of my online album.">View Image 3</a>
<a href="javascript:loadImage('.GIF');"target="Please click to view this 4th image of my online album.">View Image 4</a>
<a href="javascript:loadImage('.GIF');"target="Please click to view this 5th image of my online album.">View Image 5</a>
</DIV></body></html>

_Aerospace_Eng_
08-06-2006, 05:48 AM
Well other than using the old document.write, the only thing I see wrong is the way your links are formatted.

<a href="javascript:loadImage('.GIF');"target="Please click to view this 1st image of my online album.">View Image 1</a>

You should have a space after the href. Using JS that degrades gracefully is better like so

<a href=".GIF" onclick="loadImage(this.href);return false" target="ImageView" title="Please click to view this 1st image of my online album.">View Image 1</a>
Your target should really be your newly opened window name and the tooltip onmouseover should be the title.

RexxCrow
08-06-2006, 06:44 AM
Thanks, I completely forgot that I changed it from onclick to javascript inline, I did not know that should not be used any longer though, good tip! It is back working again. Is it alright to use the links this way rather then targeting the window and returning false, I was thinking as this way is a little smaller unless it causes other problems or other negative effects?



<html><head><title>Place Title Here...</title><script language="JavaScript" type="text/JavaScript"><!--
var ht=screen.availHeight-75;
var wd=screen.availWidth;
var hty=Math.floor((ht/2)-175);
var wdx=Math.floor((wd/2)-247);
function loadImage(image){
setImage='<html><head><title>Image Viewer</title><STYLE TYPE="text/css"><!--BODY{background-color:#F0F8FF;padding:20px;cursor:default;}a{text-decoration:none;}a:hover{color:#FFFF00;}DIV{border: 10px inset #B0C4DE;}P{border:5px ridge #F5F5F5;text-align:center;color:#B0C4DE;font-family:Arial;font-size:14px;padding:20px;}img{height:200px;width:425px;magin:auto;}//--></STYLE></head><body ALIGN="center"><DIV><img src="'+image+'"alt="Images from my personal album..."title="These is from album part 1 of x."></DIV><P><a href=""onclick="self.close();"title="Click to close this image.">Close this window.</a></P></body></html>'
ImageView=window.open("","ImageView","width=500,height=350,top=0,left=0,");
ImageView.moveTo(wdx,hty);
ImageView.document.write(setImage);
ImageView.document.close();
ImageView.window.focus();
}
//--></script><STYLE TYPE="text/css"><!--
BODY{background-color:#F0F8FF;padding:20px;cursor:default;}
a{display:block;text-decoration:none;}
a:hover{color:#FFFF00;}
DIV{width:250px;margin:auto;border:10px inset #B0C4DE;text-align:center;color:#B0C4DE;font-family:Arial;font-size:14px;padding:20px;}
//--></STYLE></head><body ALIGN="center">
<DIV>
<a href=""onclick="loadImage('.GIF');"title="Please click to view this 1st image of my online album.">View Image 1</a>
<a href=""onclick="loadImage('.GIF');"title="Please click to view this 2nd image of my online album.">View Image 2</a>
<a href=""onclick="loadImage('.GIF');"title="Please click to view this 3rd image of my online album.">View Image 3</a>
<a href=""onclick="loadImage('.GIF');"title="Please click to view this 4th image of my online album.">View Image 4</a>
<a href=""onclick="loadImage('.GIF');"title="Please click to view this 5th image of my online album.">View Image 5</a>
</DIV></body></html>

_Aerospace_Eng_
08-06-2006, 11:00 PM
The way I showed you was for accessibility reasons. Rather than give the user a deadlink you give them a link that allows them to see the image anyways that is of course if they have JS disabled. With JS they will see the popup.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum