/    Sign up×
Community /Pin to ProfileBookmark

Keep pop-up window on top

Copy linkTweet thisAlerts:
May 13.2008

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>

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@budsterMay 13.2008 — 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/cgi-bin/hunbug/doco.cgi?11540

Hope this helps
Copy linkTweet thisAlerts:
@bigbaronauthorMay 14.2008 — 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..
Copy linkTweet thisAlerts:
@bigbaronauthorMay 15.2008 — 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.
Copy linkTweet thisAlerts:
@budsterMay 15.2008 — Try setting the DIV position before it is displayed by getting the values from scrollTop, scrollLeft, clientHeight and clientWidth document properties.
Copy linkTweet thisAlerts:
@bigbaronauthorMay 15.2008 — 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.
×

Success!

Help @bigbaron spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...