www.webdeveloper.com
Results 1 to 6 of 6

Thread: Keep pop-up window on top

  1. #1
    Join Date
    May 2008
    Posts
    5

    Keep pop-up window on top

    Hi... I asked a question yesterday, but I suspect I had not explained what I wanted to do in a short javascript. So I'm hoping to make it clear with a very short listing of what I want. This is a very short part of the program for a clearer idea --

    <html>
    <head>
    <title>Open New Window</title>
    </head>
    <script language="JavaScript1.2">
    function newWindow (newUrl)
    {
    window.open (newUrl,"mywindow","location=1,status=1,scrollbars=1,width=650,height=650");
    }
    </script>

    <body>
    Owl==>><br>
    <img src=owl.jpg height=30 width=30 hspace=20 onMouseDown=newWindow('owl.html')><br>
    Penguin ==>><br>
    <img src=penguin.jpg height=30 width=30 hspace=20 onMouseDown=newWindow('penguin.html')><br>
    </body>
    </html>

    When the user goes onMouseDown on the thumbnail in the main page, it brings up a popup window of the same name as the jpg but with a much larger amount of data. I have everything worked out except that when going onMouseDown anywhere but manually closing the popup window by using the "X" close, the popup window goes BEHIND the main frame, and thus in the much larger program I have the user now cannot see that the popup window has not closed, and when going onMouseDown on another thumbnail the user does not see that the new popup replaced the old popup window, but he cannot see it, because it is now behind the main window. I'd like to know how to keep the popup window on top of the main window in all cases! So that it never goes behind the main window no matter what new onMouseDown action is taken, other than to manually close the popup window.

    <fx: prays that this convoluted explanation is clear to someone far far better than I am>

  2. #2
    Join Date
    Feb 2008
    Posts
    59
    Hi BigBaron
    Have you considered using popup style div elements instead of new windows, they give a similar effect with much more control.
    Take a look at http://www.astral-consultancy.co.uk/...doco.cgi?11540
    Hope this helps

  3. #3
    Join Date
    May 2008
    Posts
    5
    Thanks a lot!!! That appears to be exactly what I need. It will take some work to change all the html but it does keep the popup on top, which is what I wanted. Again... thanks..

  4. #4
    Join Date
    May 2008
    Posts
    5

    Keep pop-up window on top

    Oops... I spoke too soon. Using the methods in that link I did find that it keeps the pop-up on top, but always at the same absolute relative uppermost position in respect to the main page. The main html page in my whole program is quite long, so when the thumbnail is located more than the length of the part of the entire main page which is in view, by having scrolled down that far, clicking on the thumbnail does keep the pop-up on top but it can't be seen without going back to the TOP of the main page. I'm almost there but I need something that will bring up the popup relative to where the thumbnail is located on the main page, rather than the uppermost part of the entire main page. The div function does keep the popup on top... but also on the absolute upper edge of the main page as well. So far on the upper edge that no one can see it, if clicking on a thumbnail that has been found by scrolling down the main page far enough that the uppermost part of the main page is no longer in view.

  5. #5
    Join Date
    Feb 2008
    Posts
    59
    Try setting the DIV position before it is displayed by getting the values from scrollTop, scrollLeft, clientHeight and clientWidth document properties.

  6. #6
    Join Date
    May 2008
    Posts
    5
    Again, thanks. I now have the popup html windows positioned exactly as I want them. They also open and close the way I want them.

    But... eeekk!!! One last problem remains. The html files I use in the popup windows also contain a wav sound file. And in some of the browsers I have tried the image and the popup window html go away, but the sound continues, even though the popup window has been closed with the "close" button, and if clicking on another thumbnail the two sounds, one from the previous popup and the other from new popup, mix in gibberish. When I say "some" of the browsers I have, I mean IE 7, safari, and opera, have the problem. While, Firefox and Netscape 9.0 work exactly as I want them to work!! Since when closing the popup window in those two browsers, using the exact same code, the sound from the popup url also stops!!

    Weird, but apparently there is some conflict between browsers. You've been so patient, I wonder if you have any ideas so this will work across all browsers.

    ----------------------------------------------------------
    <html>
    <head>

    <style type="text/css">

    .popup {
    border: solid 1px #333;
    font-family: Tahoma;
    font-size: 12px;
    display: none;
    position: absolute;
    z-index: 60;
    }

    .popuptitle {
    position: relative;
    background: blue;
    color: white;
    font-weight: bold;
    height: 15px;
    padding: 5px;
    }

    .popuptitle input {
    position: absolute;
    font-size: 75%;
    right: 2px;
    top: 2px;
    }

    .popupbody {
    background: #ddd;
    padding: 5px;
    text-align: center;
    }

    #popup1 { top: 0px; left: 50px; }
    #popup1 iframe { width: 650px; height: 650px }

    </style>

    <script type="text/javascript">
    function popupWindow(o,u)
    {
    var obj = document.getElementById(o);
    if(u) {
    obj.style.display = 'block';
    window.open(u,o)
    }
    else
    obj.style.display = 'none';
    }
    </script>

    </head>

    <body>

    <h1>Popup Style Window Using Elements</h1>

    <img src="bird.jpg" height="50" width="50" onClick="popupWindow('popup1','bird.html');"></a></a>

    <div id="popup1" class="popup">
    <div class="popuptitle">Bird<input type="button" value="close" onClick="popupWindow('popup1');">
    </div>
    <iframe name="popup1" class="popupbody"></iframe>
    </div>

    </body>
    </html>
    ---------------------------------------
    Thanks again.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles