Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    javascript windows

    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

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You may also like the Lightbox v2 script.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts
    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...


    Code:
    <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>

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well other than using the old document.write, the only thing I see wrong is the way your links are formatted.
    Code:
    <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
    Code:
    <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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder RexxCrow's Avatar
    Join Date
    Jul 2006
    Location
    California
    Posts
    275
    Thanks
    6
    Thanked 2 Times in 2 Posts
    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?


    Code:
    <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>
    Last edited by RexxCrow; 08-06-2006 at 06:48 AM.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •