Pop up and pop in like gmail chat

user_538669 0
Viewed 6834

I want to do popup like gmail chat popup window as well as I want to do pop-in like the way gmail does.

once the pop-out is done particular div should be open in new window and once the pop-in done the particular div should be placed in the position where it was been already, so far I am able to do the pop up the window in new window with the following code, but I don't have the idea how to do pop-in

Please note: once the pop-out done particular div should be open in another window and the variables in the main window also should be accessible in the pop-out window.

work out in Jsfiddle Pop out demo

  <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    //<![CDATA[ 
    $(function(){
    $('.popup').click(function (event) {
     event.preventDefault();
     window.open($(this).attr("href"), "popupWindow",              
     "width=600,height=600,scrollbars=yes");
    });
   });//]]>  

</script>


</head>
<body>
  <a href="http://google.com" class="popup">google</a>
</body>
</html>

UPDATE

I have found the option how to open the div in new window the code as follows, now I am able to pop out the window with contents in the div, now I need to know how can I access the variable value in the pop out window and how to attach back the pop out window into that original place

Jsfiddle demo

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>
      Popup demo
    </title>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
    </script>

  </head>
  <body>
    <a href="#" class="popup">
      google
    </a>
    <div id="toNewWindow">
      Testing
      <input type="button" onclick="test()" value="click">
    </div>

    <script type="text/javascript">
      //<![CDATA[ 

      $('.popup').click(function (event) {
        event.preventDefault();
        var w = window.open("","myWin","height=400px,width=600px");
        w.document.write( $("#toNewWindow").html() );

        $('#toNewWindow').detach();
      });

      var a=3;
      function test()
      {
        alert(a);
      }
      //]]>      
    </script>
  </body>
</html>

Second edit

Now I have found the way to access the variables in between opener and child, code as follows

Now my problem is

if I have typed in the text box in child.html which is inside the iframe is not showing when on the popout.

Opener

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup checking</title>
<script type="text/javascript">
var winObj;
function openwindow()
{
    winObj=window.open("","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
    var s=document.getElementById('page').innerHTML;
    console.log(s);
    //var s=document.getElementById('page');
winObj.document.write(s);
    //win.parent.detach(win);

}
function changeValue()
{
    console.log(winObj.document.getElementById('changer').value);
    winObj.document.getElementById('changer').value='changer';
}
</script>
</head>

<body>
   <div id="page">
        <iframe src="child.html" width="100" height="100"></iframe>
   </div>
   <div id="page1">
    <input type="text" id="text1"/>
    <input type="button" value="popup" onclick="openwindow()"/>
    <input type="button" value="changevalue" onclick="changeValue()"/>
   </div>
</body>
</html>

Child

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    function openerChange()
    {
            window.opener.document.getElementById('text1').value="Value changed.."
    }
</script>
</head>

<body>
    <input type="text" value="" id="changer" />
    <input type="button" value="changed" onclick="openerChange()"/>
</body>
</html>
html jquery javascript
2 Answers

If I understand the question correctly, you want state preserved when you popout the window. It looks like you are populating the popout HTML from the #page node, which contains an iFrame.

First of all, know that when using an iFrame, any reparenting of the iframe node will cause a reload, losing all state. It's unfortunate ;(

If I were you, I would make it so that all event handling and state management is done in the main window. You're somewhat on the right track. When you open up the popout, if the main window is holding the state you can write that state to the opened window's iframe. Likewise when you close the popout and the iframe mounts back in the main window, you can initialize it with the correct values because the main window is keeping track of the state.

The details of how to do so...I'll leave as an exercise to the reader.

user_9370660
Related