|
JavaScript - After Open A Child, How To Keep Parent On Focus?
After open a child window, I would like to keep parent window on focus. I tried self.focus(), set new window in blur() as well as setting the setInterval, none of them works in either Firefox or IE. I think this question relates to the opening window in tab rather than in new window.
Actually, in Firefox, it was opened in tab and in IE it was opened in new window. Similar TutorialsHi All, I need to show/focus the parent window which is in back when click a link from child window in Chrome.This problem is in Chrome browser only. We have used the below code self.blur(); Window.opener.focus(); But this is not working in Google Chrome. Please suggest me some workaround to achieve this. Thanks in Advance Reply With Quote 12-19-2014, 09:26 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Window is not defined. window is. JavaScript (and the DOM) is case sensitive. You must pay attention to upper/lower case spelling, carefully. By the way, you shouldn't need the blur() call. If you focus on some window (any window) then any other focus should be lost. I have a web page which lists and displays all the characters for which a Named Entity code exists, with coding details etc.. Some of these characters are quite obscure and the reader will only be able to see them if they have a suitable Unicode font on their own PC/browser. If not, they will just see placeholder squares. For these obscure characters, I've set up a popup window. Click on a placeholder square and a small window appears which shows a .gif of what the character should look like, and a label saying what it's called. If the user closes the window after viewing, there's no problem. The difficulty comes in if somebody wants to click on a succession of placeholders and view a succession of character .gifs, and meanwhile the initial child window has slipped to the back of the stack and is behind the webpage instead of in front. In IE, Netscape and Safari, it's easy - I just use .focus to bring the child window to the fore. In Chrome, which doesn't recognise the .focus command, I close the child window and re-open it. [There's code further up the document which identifies the browser.] However, neither .focus nor closing and re-opening the window works with Opera, which turns the child window into a tab rather than a separate window, and then shoves that tab to the back. Anybody know how I can get Opera to either move the focus to the child-tab on command, or close it on command so it can be re-opened? This is the code that generates the child window: Code:
function charDisplayer()
{
if (isIEorInnerGroup == "Yes") {codeWidth = windowWidth*.171, codeHeight = windowWidth*.239, codeInset = windowWidth*.041} else {adjust(200), codeWidth = adjust_by, adjust(280), codeHeight = adjust_by, adjust(48), codeInset = adjust_by}
if (isChrome == "Yes") {
if (window.generator) {
window.generator.close();
window.generator= null;
}
}
window.generator=window.open('', 'charwindow', 'height='+codeHeight+', width='+codeWidth+', left='+codeInset+', top='+codeInset*2+', scrollbars=yes');
window.generator.document.write('<html><head><title>Character sample</title>');
window.generator.document.write('<link rel="stylesheet" href="'+styleType+'">');
window.generator.document.write('</head><body>');
window.generator.document.write('<p style="text-align: center;"><div class=centred><table class=centred><tr><td style="text-align: center;"><div class=centred><img src="artwork/font_characters/'+charID+'.gif" border=3 alt="'+charName+'" align=bottom border=0 width='+charWidth+'></div>'+charName+'</td></tr></table></div>');
window.generator.document.write('<hr /><a href="javascript:self.close()">Close</a> the popup if you have finished viewing characters.</p>');
window.generator.document.write('</body></html>');
window.generator.document.close();
if (window.focus) {window.generator.focus()}
}
Ignore the line which begins if (isIEorInnerGroup == "Yes") - this is part of a setup which resizes all art, tables etc to maintain a constant size across all browsers and screen resolutions. "stylesheet" is passed as a variable because I have two different stylesheets on the go, to accommodate the fact that Netscape handles text-size differently from the other browsers. There's a function elsewhere which sets the value of stylesheet according to whether the browser is Netscape or not, and whether the platform is a Mac or not. "charID" is a variable which identifies the code name of the character (taken from the Named Entity code) and looks it up under that name in a list of .gifs. "charName" is a variable which passes a text-string saying what the character is called, e.g. "Not a subset of". There is an "isOpera" variable which can be used to start a specific action if the browser is Opera. currently i have the script as below which open the link in new tab but also shifts the focus to it...how do i keep the focus on the parent window PHP Code: <script type="text/javascript"> function openlink(url) { window.open(url); return false; } </script> <div class="btn" onclick="openlink()">Open Link</div> I have an Iframe in my webpage wher I have the focus. I now want to give the focus back to the parent document, so i've used top.focus() in my code. Works fine in almost every browser but not inIE7. Any hints? Dear Madam/Sir, I would greatly appreciate any help. I am working on this site: http://www.pathology.ubc.ca/Path_UBC...Professor.html. The list of names on the right hand side is conencted to the iframe, left hand side. By clicking on individual name the eprofile is populated in the iframe. Everything works fine but what I would like to add is some kind of extention to the url so we can externaly link directly to each these profiles. Please let me know if this is something that can be done? Many thanks, Debbie After a parent checkbox has been selected and the user changes their mind and just unchecks the Parent checkbox I need to figure out how to automatically uncheck the child checkboxes as well. Code: <script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
} else {
e.style.display="none"
}
return true;
}
</script>
<script type="text/javascript">
$('input[type=checkbox]').change(function() {
// get id of the current clicked element
var id = $(this).attr('id');
// find elements with classname 'parent-<id>' and (un)check them
var children = $('.parent-' + id).attr('checked', $(this).attr('checked'));
});
</script>
<body>
<form name='f1' action='#'>
<h2 align="center">Test</h2><br>
<br>
<input id="s1" type="checkbox" onclick="return toggleMe('para1')" value="1">1
<br>
<div id="para1" style="display:none">
<input id="b"class="parent-s1" type="checkbox" name="cb1"/>
<label for="cb1">a</label><br>
<input id="b" class="parent-s1"type="checkbox" name="cb1"/>
<label for="cb1">b</label>
<br>
</div>
<input type="checkbox" onclick="return toggleMe('para2')" value="2">2
<br>
<div id="para2" style="display:none">
<input id="b"class="parent-s2" type="checkbox" name="cb2"/>
<label for="cb2">a</label><br>
<input id="b" class="parent-s2"type="checkbox" name="cb2"/>
<label for="cb2">b</label>
<br>
</div>
<script type='text/javascript'>
function Cb2Rb( setRef )
{
this.boxGroup = setRef;
for( var i=0, len=setRef.length; i<len; i++ )
setRef[ i ].onclick=( function(inst, idx){return function(){inst.scan(idx)}} )(this, i);
this.scan=function(index)
{
if( this.boxGroup[ index ].checked )
for(var i=0, g=this.boxGroup, len=g.length; i<len; i++)
if( i != index )
g[i].checked = false;
}
}
new Cb2Rb( document.forms.f1.cb1 );
new Cb2Rb( document.forms.f1.cb2 );
</script>
<script type='text/javascript'>
function sub_delete{
if (typeof document.checks.cb.length === 'undefined') {
/*then there is just one checkbox with the name 'cb' no array*/
if (document.checks.cb.checked == true )
{
document.checks.submit();
return 0;
}
}else{
/*then there is several checkboxs with the name 'cb' making an array*/
for(var i = 0, max = document.checks.cb.length; i < max; i++){
if (document.checks.cb[i].checked == true )
{
document.checks.submit();
return 0;
}
}
}
}//sub_delete end
</script>
<script type='text/javascript'>
$('input[class*="parent"]').change(function(){
var cls = '.' + $(this).attr('class') + ':checked';
var len = $(cls).length;
var parent_id = '#' + $(this).attr('class').split('-')[1];
// 3. Check parent if at least one child is checked
if(len) {
$(parent_id).attr('checked', true);
} else {
// 2. Uncheck parent if all childs are unchecked.
$(parent_id).attr('checked', false);
}
});
</script>
<br><br><br>
<input type="button" class="button" onclick="return toggleMe('para10')" value="Submit">
Hey, I'm looking for a way to get a variable from a parent window in a child window. I'm aware that you can write the variable to a hidden field and then get the field's value in the child window, but I'm looking for a cleaner (all JS preferable) way of doing this. Something like this, but I believe this is an out-dated solution: Code: var str = window.opener.str; alert(str); Any solutions? Hi Experts, i have 2 JS array and i need to have dependency between them knowing that 1st Array has parent element of the 2nd one. i.e ARRAY1 ID VAL ID2 2 Dep1 10 3 Dep2 20 4 Dep3 30 ARRAY2 ID VAL ID2 PARENT 20 team1 11 10 21 team2 12 10 22 team3 13 20 23 team4 14 30 i need to have two different DDL's where when i choose VAL = Dep1 on ARRAY1 , i should see on the 2nd DDL only elements with parent corrsponding to Dep1 ( PARENT =10). how this can be possible thanks Hi, I have a small problem with a page I'm working on. I have an anchor tag inside a table that has a mouseover event that updates a contextual help box. I need to add a similar mouseover event to the anchor tag that does the same thing, but updates the help box with different text. The problem I have is that when the mouse is over the table, no matter if I move the mouse over the anchor, the help text only displays the message that is passed from the table's mouseover function call. I think the solution *may* be something to do with event bubbling, but I'm not exactly sure how to implement it. The code I'm dealing with is below: The code below is PHP. The table mouseover (for reference): Code: echo "<table class='cleanTable' width='100%' style='margin-top: 5px'";
echo " onMouseOver=\"updateHelpText('Message 1.');\" onMouseOut='clearHelpText();'>";
echo "<tr><th> </th><th> </th><th>First Name</th><th>Surname</th><th>Last Login</th></tr>";
The anchor mouseover: Code: echo "<tr class='cleanrow'><td><a href='newMember.php'><img border='0' src='images/icon_add.gif'></a></td><td></td>";
echo "<td colspan='3'><a class='workbenchLink' href='newMember.php' onMouseOver=\"updateHelpText('Message 2');\" onMouseOut='clearHelpText();'>Invite a new colleague...</a></td></tr>";
echo "</table>";
The function (javascript): Code: function updateHelpText(newText) {
document.getElementById("helpBox").innerHTML = "<h4> " + newText + "</h4>";
}
Any help with this would be great, thanks. I have home page with session close button and 10 child window link and i am opening all child window.All child windows should close after clicking on session close button. Code bellow <html> <script type="text/javascript"> openWins = []; curWin = 0; function openWin(page) { openWins[curWin++] = window.open(page,'_blank'); } function closeAll() { for(var i=0; i<openWins.length; i++) if (openWins[i] && !openWins[i].closed) openWins[i].close(); } window.onunload = closeAll; </script> <body > <input type="button" onClick="openWin('http://www.google.com');" value="Open PopUps"> <input type="button" onClick="closeAll('http://www.google.com');" value="Close PopUps"> </body> </html> Hello, First post here. I have the need to create a popup after a delay. The problem I'm getting is that the parent page is refreshing automatically from the action of creating the popup. I don't want the parent page to refresh! This is what I currently have: Code: $popupScript = '
<script language="JavaScript">
setTimeout("window.open(\'index.php?do=renew\',\'Popup1\',\'toolbar=0, width=500, height=500\')",' . $delay . ');
</script>';
The page is in php, so that's why I have it as a string, which I later pass to a template page. This would simply be: Code: <script language="JavaScript">
setTimeout("window.open('index.php?do=renew','Popup1','toolbar=0, width=500, height=500')",6000);
</script>
... if it was placed straight into the HTML. Incidentally, it's included into the HTML HEAD area, not the body, as the original source of the script suggested: http://www.itechies.net/tutorials/js...op-delayed.htm $delay is the delay before the popup opens, in microseconds (so 6000 would be 6 seconds). What can I do to have the same delayed auto-popup functionality, but without it automatically refreshing the parent page where the above code resides? As some background to what I'm achieving: The issue with not wanting the parent page to refresh is that each time it does, the login session gets extended. The popup itself (which I already have working ok) provides a 'continue working' function, or close and refresh the parent is nothing has been done after a short period. Any help very welcome. Instead of using window.open, which I understand opens a new window, is there a code that will make the link open in the parent window?
i have this code i need to close the parent.html window when the child window opened, i need the code for that working well in IE and Firefox Parent.html <HTML> <SCRIPT TYPE="text/javascript"> function sendTo() { window.open('child.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+''); } </SCRIPT> <BODY > <form name="form"> <input type="text" value="" name="text1" id="pdetails1"> <input type="text" value="" name="text1" id="pdetails2"> </br> <input type="submit" value="submit" onClick="sendTo()"> </BODY> </HTML> child.html <html> <body> <form> <input type=text name="text5" value=""> <input type=submit name="submit"value="submit"> </form> </body> </html> For a widget I made, I have a dropdown select menu. It is constrained to a very small width and IE does not auto expand on click. I wrote a simple javascript to handle this but I run into two problems. The onmouseout function is fired when I click into a child node, and the onmousedown of the <option> tags doesn't work in IE. The code works fine in all other browsers. var wid; var campaign_i = 0; function campaignWidget_capture(myID){ wid=document.getElementById(myID).style.width; campaign_i++; } function campaignWidget_SubDes(myID,state){ if(state==0){ if(campaign_i==0) campaignWidget_capture(myID); document.getElementById(myID).style.width="auto"; }else document.getElementById(myID).style.width=wid; } onmouseout="campaignWidget_SubDes(id,1)" This is in the select tag. onmousedown="campaignWidget_SubDes(id,0)" This is in the select tag onmousedown="campaignWidget_SubDes('campaignWidget_Sub_Designation',1)" This is in the option tag. The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? I want to implement a javascript function where a submit button will be submitted from the parent page each time I close a child page. Please let me know what I did wrong in my code and please elaborate your answer so that I could understand it better. Thank you so much for your help. I have the following jscript code but it is now working. Code: window.onunload = submitParent;
function submitParent()
{
var doc = window.opener.document,
theForm = doc.getElementById("finalForm");
theField = doc.getElementById("finalSelected");
theForm.submit();
theField.trigger('click');
}
My form from the parent page is as follow. I want my jscript to just click on the submit button once. Code: <form id = "finalForm "name= "finalForm" method="POST" action=""> <input type="Submit" id = "finalSelected" name="finalSelected"/> After following the instructions from the answer below: http://bytes.com/topic/javascript/an...arent-document I was able to have the child window perform the function defined in the parent window. The function was to only have an alert window pop up as the child page was loading. I easily modified this to my intention which was to have a parent function performed when the child window was clicked. Using the body tag: Code: <body onclick="parent.FUNCTION NAME HERE()"> I first change the method in which the function would be triggered, all went well there. then I tried to change which function would be triggered. (Basically use the function I wanted to happen on click of the child window rather then the function from the test). Once I did this switch, nothing happens. The site this is being used on is: http://tylerpanesar.ca/ What I want is when the menu bar is open in the parent window, the user chooses a link and the menu closes and goes to that link in the child window. This already works. However if the user opens the menu bar and then changes there mind and continues with the page the are currently on (clicks any content in the child window), the menu stays open. Currently the menu "hides" only when you choose one of the menu items, but it does not "hide" when you CLICK on child document. If you could figure out how to get it to "hide" on a "mouse out" that would be the better option. I attempted this method however i could only get it to "toggle" the menu on "mouse out". This method does however create an annoying flicker when you hover over the menu items (as it is toggling the open menu command I guess). If I had it "hide" the menu on "mouse out" it would "hide" as soon as you moved off of the main button. The viewer doesn't even have a chance to click a link. or at least that is what happens when I did it. You may have a better method to achieve this. The script that tells it to hide on click is within a jQuery function: Code: menua
.click(
function(){
menu.hide();
the code I used for the mouseout toggle was: Code: menu
.mouseout(
function(){
menu.toggle();
Here is the script that I am currently using for the menu to open and the "click" hide feature. This menu feature comes from the following help: http://www.bennadel.com/blog/1740-Bu...-FaceBook-.htm Code: <script type="text/javascript">
jQuery(function( $ ){
var menuRoot = $( "#menu-root" );
var menu = $( "#menu" );
var menua = $( "#menu a" );
// Hook up menu root click event.
menuRoot
.attr( "href", "javascript:void( 0 )" )
.click(
function(){
// Toggle the menu display.
menu.toggle();
// Blur the link to remove focus.
menuRoot.blur();
// Cancel event (and its bubbling).
return( false );
}
)
;
menua
.click(
function(){
// Toggle the menu display.
menu.hide();
}
)
;
// Hook up a click handler on the document so that
// we can hide the menu if it is not the target of
// the mouse click.
$( document ).click(
function( event ){
// Check to see if this came from the menu.
if (
menu.is( ":visible" ) &&
!$( event.target ).closest( "#menu" ).size()
){
// The click came outside the menu, so
// close the menu.
menu.hide();
}
}
);
});
</script>
I've tried adding the click to "hide" menu feature to the child document but there is now menu in that document for it to "hide". What I was trying to was have the child document execute a function from the parent document and have that function executed IN the parent document. I've tried the technique from the link in my very first post but I believe it only calls the function from the parent and executes it IN the child. Which does not work for me as the menu is not in the child. There should be a way to make the child execute a function FOR the parent. I apologize for this very wordy post, but I am extremely frustrated with this now as I have been trying to get this to work for a few weeks now. Any help would be greatly appreciated. Thanks in advance, Tyler I have created and opened a child window called "checkwin" and have written some data to it. If the data is valid, I want the user to click on the 'CONFIRM' button on the child window, at which time I want the "submit()" function for the form on the parent window to be executed. If the data is invalid the user clicks on 'MODIFY' and I want focus to return to a field on the parent form. However, when I click on the "CONFIRM" or "MODIFY" buttons on the child window, nothing happens. Here is the code: Code: checkwin.document.write("</td></tr><tr><td align='right'><input type='button' value='CONFIRM'
onclick='opener.document.personnel_form.submit()'></td><td></td><td><input type='button' value='MODIFY'
onclick='opener.document.personnel_form.first_name.focus()'></td></tr></table>")
hello all, i'm newbie in javascript fucntion. here i got problem to passing the value from child popup form to parent form. here my code parent form Code: <script language="JavaScript">
function selectItem(){
var selindex=document.myForm.myselect.selectedIndex;
if (selindex!=0) {
document.myForm.item_desc.value=myArray[1];
document.myForm.item_code.value=myArray[0];
}
}
</script>
<form name="myForm" method="post">
<input class="input" type="text" name="item_code" id="item_code" size="30" value ="" />
<input type="button" name="opener" value="Search" class="myButton" onclick="window.open('child_form.php',
'print_view','left=20,top=20,width=750,height=650,toolbar=0,resizable=0,scrollbars=1');return(false);" />
<input class="input" type="text" name="item_desc" id="item_desc" size="80" value ="<?php echo $item_desc?>" />
</form>
child_form.php Code: <script language="JavaScript">
function selectItem(){
var selindex=document.popUpForm.myselect.selectedIndex;
if (selindex!=0) {
window.close();
var myArray = document.popUpForm.myselect[selindex].value.split('*');
window.opener.document.myForm.item_desc.value=myArray[1];
window.opener.document.myForm.item_code.value=myArray[0];
}
}
</script>
<form name="popUpForm">
$i = 0;
while ($i < 5){
<input type="image" src="images/plus.png" onclick="selectItem();" name="myselect[]" value=<?php echo $i."*".test;?> width="18" height="18"/>
$i++;
}
</form>
|
|||||||