JavaScript - Preserving Window Position Between Sessions

Posted on 2006-03-21
Last Modified: 2009-12-16
I need to preserve the window (i.e., browser) position between sessions for a give web page.  So a user opens a particular web page (an ASP.NET page) and moves it around then closes it.  When the user opens that page again I want it to open at the same location that it was last at.  I can get the window’s position using window.screenLeft and window.screenTop and preserve this in a cookie.  I could then move the window to the former position on an onload event.  What I don’t know what to do is when to trigger this process.  What I need is something like an onmove event to trigger the process when the user moves the window.  Does such an event exist?  Or is there some better way to do this?  I am using ASP.NET 2.0, Internet Explorer and JavaScript.

Question by:stminfo
    LVL 10

    Expert Comment

    I take it you mean to ask when to store the position? Use the body event onunload for this.
    LVL 75

    Expert Comment

    by:Michel Plungjan
    That would not be useful since the position of the window is actually the hack to find when the window is closed because it gets a silly value like 6000 or so.
    Better is to set a cookie at intervals if allowed. Set one and if that cookie is correctly set, set one every second or so or monitor when the window moves and set one when it stops

    LVL 10

    Expert Comment

    Well, you could always use the onresize event of the window. You have to set that in javascript though (not in HTML) like this:

    window.onresize = function() {
      // set the cookie here

    Author Comment

    Thanks for your feedback thus far.

    How do I set an interval to save the window position or how can I monitor window movement?

    Using the onresize event wouldn't work since the window that I am concerned with is of a fixed size.
    LVL 10

    Expert Comment

    The window also has an onmove event:

    window.onmove = function() {
      // set the cookie here

    Does this help?

    Author Comment

    I don't think that Internet Explorer has a window.onmove event.

    Based on some of the comments, I was able to come up with the following:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="" >
        <title>Saving Position With Cookies</title>
        <script language="javascript" type="text/javascript">
        // Global variables
        var formerXPos = 0;
        var formerYPos = 0;
        // The following interval is how often the page will
        //   check if it's been moved (1000 = 1 second)
        var myInterval = window.setInterval("checkPosition()", 500);
        // This function get the specified cookie's value and returns
        //   as a number.
        //   returns NaN is not a number.
        function getTheCookieNumber(cookieName)
            var ret = NaN;
            var xStr = "";
            var theCookie = document.cookie;
            var startIdx = theCookie.indexOf(cookieName);
            var endIdx;
            if (startIdx != -1)
                endIdx = theCookie.indexOf(";", startIdx);
                if (endIdx == -1)
                    // no ending semicolon, us end of string
                    endIdx = theCookie.length;
                xStr = theCookie.substr(startIdx + cookieName.length, endIdx);            
                ret = parseInt(xStr, 10);          
                return ret;
        function myOnLoad()
           var xTheStr = "";
           var xCoordinate = -1;
           var yCoordinate = -1;
           // Check for former position cookie
            var xCookieStr = "FormerWinPosX=";
            var yCookieStr = "FormerWinPosY=";
            xCoordinate = getTheCookieNumber(xCookieStr);
            yCoordinate = getTheCookieNumber(yCookieStr);
            if ((isNaN(xCoordinate)) || (isNaN(yCoordinate)))
                // No cookies set coordinates to middle bottom of the screen
                xCoordinate = (screen.availWidth - WindWidth) / 2;
                yCoordinate = screen.availHeight - WindHeight;
                // Use the former position cookie
                // Adjust for border            
                xCoordinate = xCoordinate - 3;
                yCoordinate = yCoordinate - 10;
             window.moveTo(xCoordinate, yCoordinate);
        function checkPosition()
            var expiresOn = new Date();
            if ((formerXPos != window.screenLeft) ||
                 (formerYPos != window.screenTop))
                // set cookie expiration for 6 months;
                expiresOn.setMonth(expiresOn.getMonth() + 6);        
                document.cookie = "FormerWinPosX=" + window.screenLeft + ";expires=" + expiresOn + ";";
                document.cookie = "FormerWinPosY=" + window.screenTop + ";expires=" + expiresOn + ";";
                // Save position
                formerXPos = window.screenLeft;
                formerYPos = window.screenTop;
    <body onload="myOnLoad()">
            This is sample page of how to save position!</div>


    The one problem is that this code is not generic.  window.screenLeft and window.screenTop give the coordinates of the client area and so you need to adjust for the boarders.  In in my case, I have a set window size (not included in the code above) so I can hard code the adjustment.  It would be nice to be able to not hard code the adjustment.

    Does anyone know of a way to get the coordinates of the entire browser window (i.e. Internet  Explorer) and not just the client area?
    LVL 75

    Accepted Solution

    If you open the window yourself the very first time, you know where it is, then you can use the screenLeft and top to calculate where to open it next time

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    "That which we persist in doing becomes easier, not that the task itself has become easier, but that our ability to perform it has improved." Ralph Waldo Emerson Introduction: One of the wonderful things about the web is that it makes it s…
    This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now