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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2002
    Location
    kansas city, mo
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Updating an image in new window while retaining focus

    Hello all,

    I work on a site that has a number of image galleries set up as clickable thumbnails. On a click, some js is called that opens a new window, sizes it and displays a large image there.

    Originally, I had an .html page for every image but that quickly grew cumbersome. My second try was to write the image directly to the page with a call to document.write(). This version opened the image but when the user clicked another thumbnail, the image didn't change and the new window lost focus.

    My third and current version is a kludgy monstrousity that opens a new window, then closes it, then opens it again and displays the image. It's the only way I could figure out to both change the image and retain the focus. This version works for most of the site's users but not all.

    Is there a better way to do this? To be clear, the behavior should be as follows:

    1. user clicks first thumbnail
    2. image window opens over the main window, and displays the enlarged image
    3. without closing the image window, the user clicks another thumbnail on the main window.
    4. image window is updated to display new enlarged image and gets the focus (comes to the front)

    My code is below. Thanks for any suggestions you might have!

    Christian

    //opens a window to show an enlarged photo
    function newEnlargeWin(img, ttl, w, h){
    var winStr = "width=" + w + ",height=" + h +",left=0,top=0,toolbar=no,scrollbars=no,resizable=no"
    var largeWin = window.open("", "largeWindow", winStr)
    largeWin = largeWin.close()
    largeWin = window.open("", "largeWindow", winStr)
    largeWin.document.write("<html><head><title>" + ttl + "</title></head>"
    + "<body onload='self.focus()' leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>" + "<img src='" + img + "'></body></html>")
    largeWin = largeWin.focus()
    }

    //use to add a status bar description of the current link
    function linkDescription( descriptionStr ){
    window.status = descriptionStr
    }

    //example call
    <a href="javascript:newEnlargeWin('image.jpg', 'title', 504, 336)"
    onmouseover="linkDescription('description');return true;"
    onmouseout="linkDescription('');return true;">
    <img src="thumbnail.jpg">
    </a>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Forget about document.write() method. It was never a dynamic one. Use either innerHTML attribute or DOM methods.


    For me.. I'd prefere the DOM. Example:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    style type="text/css">
    <!--
    .
    point{
    cursor:pointer;
    }
    -->
    </
    style>
    <
    script language="JavaScript" type="text/JavaScript">
    function 
    showBig(b){
    var 
    root document.getElementById('big');
    while(
    root.hasChildNodes()){
    root.removeChild(root.childNodes[0])//clears the div from possible former IMGs
    }
    var 
    oImg document.createElement('img');//creates the HTML element IMG
    oImg.setAttribute('src',b);// gives the attribute SRC and its value
    root.appendChild(oImg);//append the element inside the div
    }
    </script>
    </head>
    <body>
    <img class ="point" src="00.jpg" onclick="showBig('00_big.jpg')"><br>
    <img class ="point" src="01.jpg" onclick="showBig('01_big.jpg')"><br>
    <img class ="point" src="02.jpg" onclick="showBig('02_big.jpg')">
    <br>
    <div id="big"></div>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Oct 2002
    Location
    kansas city, mo
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Kor,

    Thanks for the answer. To be honest, I know nothing about DOM but I pasted your code into an .html doc, changed the srcs to point to some images on my hard drive and it worked -- almost.

    The problem is that I need the images to appear in a separate window. I added some code to your solution that does this. Could you take a look at it and see if there are any obvious problems?

    Also, since I've never dealt with DOM, are there any issues I should know about -- e.g. browser compatability, or host capabilities?

    Thanks,
    Christian

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
       <head>
          <title>Untitled Document</title>
          <meta http-equiv="Content-Type" content="text/html charset=iso-8859-1">
          <meta http-equiv="Content-Style-Type" content="text/css">
          <meta http-equiv="Content-Script-Type" content="text/javascript">
          <style type="text/css">
          <!-- 
             .point {cursor:pointer}
          -->
          </style>
          <script language="JavaScript" type="text/JavaScript">
             function showBig(b){ 
                var winStr = "width=336,height=504,left=0,top=0,toolbar=no,
                                   scrollbars=no,resizable=no";
                var largeWin = window.open("", "largeWindow", winStr);
                largeWin.document.write(
                               "<html><head><title>Image Window</title></head>"
                               + "<body onload='self.focus()' leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>"
                               + "<div id='big'></div></body></html>");
                            
                var root = largeWin.document.getElementById('big');
                while(root.hasChildNodes()){
                   root.removeChild(root.childNodes[0])             
                }
                var oImg = largeWin.document.createElement('img');
                oImg.setAttribute('src',b);
                root.appendChild(oImg);
                largeWin.focus();
             }
             
             function linkDescription( descriptionStr ){
                window.status = descriptionStr  
             }
          </script>
       </head>
       <body>
          <img class="point" src="00.jpg"
               onmouseover="linkDescription('view image 00');return true;" 
               onmouseout="linkDescription('');return true;" 
               onclick="showBig('00_big.jpg')"><br>
          <img class="point" src="01.jpg"
               onmouseover="linkDescription('view image 01');return true;" 
               onmouseout="linkDescription('');return true;" 
               onclick="showBig('01_big.jpg')"><br>
          <img class="point" src="02.jpg" 
               onmouseover="linkDescription('view image 02');return true;" 
               onmouseout="linkDescription('');return true;" 
               onclick="showBig('02_big.jpg')"><br>
          <!-- <div id="big"></div> -->
       </body>
    </html>

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I need the images to appear in a separate window
    What about users which might disable your new pop-up opened window? You might build a visible/hidden layer better for your job, similar with a pop up, with a close button and so on...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    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
    ____________________________________

  • #6
    New Coder
    Join Date
    Oct 2002
    Location
    kansas city, mo
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You might build a visible/hidden layer better for your job, similar with a pop up, with a close button and so on...
    Could you point me toward some literature on building layers. I am unfamiliar with this.

    Thanks to both of you for your great suggestions so far!


  •  

    Posting Permissions

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