homepage Welcome to WebmasterWorld Guest from 54.196.201.253
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Keeping the focus on the parent window with child window above it
Focus on a window in the background
skyzhere




msg:3604147
 3:43 pm on Mar 18, 2008 (gmt 0)

Hi Everyone,

I have a requirement which is as follows..

I have a button on a html page which opens another window on click of that button. The focus is on the child window once it is loaded.

Now what i want is that when i move away( by clicking on the parent window) from the child html window , a confirmation dailog should come up asking whether user really wants to move away from the child window. If the user confirms the same then the focus should go on the parent html window but the child window should still be on top of the parent window even though it is blurred. The user should be able to fill the parent form.

Request you all to help me on this....Please let me know if i have not conveyed the problem statement clearly.

Thanks in Advance

 

httpwebwitch




msg:3604319
 6:12 pm on Mar 18, 2008 (gmt 0)

Instead of opening a new window, use a floating layer, positioned and styled with CSS.

skyzhere




msg:3604999
 7:57 am on Mar 19, 2008 (gmt 0)

Thanks for your reply httpwebwitch.

Can you please provide some more details as to how exactly this can be implemented..If you have a code sample, that would be of great help.I am not proficient with js and css.

Thanks again.

MarkFilipak




msg:3605059
 9:23 am on Mar 19, 2008 (gmt 0)

Let's start simple.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><style type='text/css'>
#child{
position:absolute;left:5em;top:10em;
padding:0.5em;border:solid black 1px;background-color:cyan;
display:none
}
</style></head><body>
<button onclick="document.getElementById('child').style.display = 'block'">Show Child</button>
<div id="child">This is some child content</div>
</body></html>

httpwebwitch




msg:3605204
 1:09 pm on Mar 19, 2008 (gmt 0)

then add a title bar with a "close" button:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
#child{
position:absolute;left:5em;top:10em;
padding:0;
border:solid black 1px;
background-color:cyan;
display:none;
width:300px;
}
.titlebar{
background:#888;
display:block;
height:18px;
}
a.closebutton{
float:right;
width:18px;
height:18px;
background:#f00;
border:0;
padding:0;
margin:0;
cursor:pointer;
}
.popupcontent{
padding:10px;
}
</style>

<script>
function closepopup(id){
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<button onclick="document.getElementById('child').style.display = 'block'">Show Child</button>
<div id="child">
<div class="titlebar"><a class="closebutton" onclick="closepopup('child')">X</a>Your title here</div>
<div class="popupcontent">
This is some child content
</div>
</div>
</body>
</html>


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved