How to make child window stay on top?

Asked 20/12, 2012 at 4:58 Answered 13/12, 2013 at 18:40

I am using window.open to open a child window from the parent window. I want the child window to stay on top so the user can refer to it while making an entry in the parent window. Can this be done? I'm using Firefox at the moment, but it would be a bonus if it worked in all browsers.

Lucillelucina answered 20/12, 2012 at 4:58 Comment(6)

You can focus at the new window, but then you won't be able to type or do anything in the parent window. – Shackleton 20/12, 2012 at 4:59

How about using a popup div instead of opening a new window? – Meingoldas 20/12, 2012 at 5:2

This is the best you can do with windows: jsfiddle.net/DerekL/WFsyY – Shackleton 20/12, 2012 at 5:4

+1 for the popup div idea, that's very cool. My child window opens a php page and that page is pulling data from a mysql database. Will the popup div work for that, or can it only be text or static information? – Lucillelucina 20/12, 2012 at 5:7

@AndrewFox - A popup div is just like a regular HTML div element. It can contain anything you want. – Shackleton 20/12, 2012 at 5:9

@Meingoldas please add your answer as a solution so I can accept it, I'm reading through the docs on it right now and if Derek is right, this will be the best answer. Thanks! – Lucillelucina 20/12, 2012 at 5:15

How about using a popup div instead of opening a new window?

Meingoldas answered 20/12, 2012 at 5:46 Comment(1)

The problem with this is that you can't move a HTML popup outside the parent window. – Mephitic 20/2, 2017 at 9:37

this popup layer is also good: DOMWindowDemo.

Zipah answered 20/12, 2012 at 5:9 Comment(1)

I'm going to +1 this because I know it will come in handy someday, even though none of them are what I had in mind for this task. – Lucillelucina 20/12, 2012 at 5:13

How about using a popup div instead of opening a new window?

Meingoldas answered 20/12, 2012 at 5:46 Comment(1)

The problem with this is that you can't move a HTML popup outside the parent window. – Mephitic 20/2, 2017 at 9:37

yes you can do this by this code you have give onBlur="self.focus()" in body for child window

    //Parent page...
    <html>
      <body>
      <a href="#" onClick="window.open('two.html','sdvwsv','width=200,height=200');">here...</a>
         </body>
     </html>


   //Child page...
         <html>
          <body onBlur="self.focus();">
               here...
              </body>
          </html>

Candie answered 20/12, 2012 at 5:14 Comment(2)

This doesn't seem to work as I was expecting, when I click back onto the parent window, the child window is lost. – Lucillelucina 20/12, 2012 at 5:18

here the problem is to write content from child to parent so its enough and when there is no parent then there is no child exist. – Candie 20/12, 2012 at 5:21

<html>
    <script language="JavaScript">
    <!--
    function openWin(){
      var myBars = 'directories=no,location=no,menubar=no,status=no';

      myBars += ',titlebar=no,toolbar=no';
      var myOptions = 'scrollbars=no,width=400,height=200,resizeable=no,top=10, left=10,';
      var myFeatures = myBars + ',' + myOptions;
      var myReadme = 'This is a test.'

      var newWin = open('', 'myDoc', myFeatures);

      newWin.document.writeln('<form>');
      newWin.document.writeln('<table>');
      newWin.document.writeln('<tr valign=TOP><td>');
      newWin.document.writeln('<textarea cols=45 rows=7 wrap=SOFT>');
      newWin.document.writeln(myReadme + '</textarea>');
      newWin.document.writeln('</td></tr>');
      newWin.document.writeln('<tr><td>');
      newWin.document.writeln('<input type=BUTTON value="Close"');
      newWin.document.writeln(' onClick="window.close()">');
      newWin.document.writeln('</td></tr>');
      newWin.document.writeln('</table></form>');
      newWin.document.close();
      newWin.focus();
    }
    -->
    </script>
    <body>
    <form>
      <b>Click the following button to open a new window: </b>
      <input type=BUTTON value="Open" onClick='openWin()'>
    </form>
    </body>

Inaugural answered 20/12, 2012 at 5:18 Comment(1)

Thank you for the reply, but this isn't what I was going for. This creates a new window with a text box in it, but still gets lost when I click into the parent window. I want the child window to stay on top so the user can refer to it while making an entry in the parent window. – Lucillelucina 20/12, 2012 at 5:22

I wrestled with this for a long time. It seems to be a bug in FF, but I noticed that after the new window opens, if I click on it, it does get focus and comes to the top. However calling window.focus() on it didn't work, so I guessed it was happening too early.

So in the new window code, at the bottom of the page I added

setTimeout(function(){window.focus()},100);

It does not feel like solid practice but if you need it to work... The 100mSec seems to be the lowest that works on my system.

Reid answered 13/12, 2013 at 18:40 Comment(2)

Also, it seems it only works if the open() request is made from insaide an event handler. Further, the event handler has to be on an object that can itself accept focus, such as input elemnts etc. – Reid 21/12, 2013 at 15:56

Even though you ca attach event ahndlers to things like divs, they cannot accept focus and so the above will not work on them. – Reid 21/12, 2013 at 15:57

-1

<html>
    <script language="JavaScript">
    <!--
    function openWin(){
      var myBars = 'directories=no,location=no,menubar=no,status=no';
      myBars += ',titlebar=no,toolbar=no';
      var myOptions = 'scrollbars=no,width=600,height=400,resizeable=no,top=10, left=10';
      var myFeatures = myBars + ',' + myOptions;
      var newWin = open('test.html', '', myFeatures);
      newWin.document.close();
      newWin.focus();
    }
    -->
    </script>
    <body>
    <form>
      <b>Click the following button to open a new window: </b>
      <input type=BUTTON value="Open" onClick='openWin()'>
    </form>
    </body>
</html>
    </html>

Inaugural answered 20/12, 2012 at 5:24 Comment(1)

Thank you, but I'm not sure you understand what I want. "I want the child window to stay on top so the user can refer to it while making an entry in the parent window." – Lucillelucina 20/12, 2012 at 5:30

Recommended topics

Hot tags