Question

I am trying to save / restore the scrolling location on Postbacks.
My code works for Firefox and all major browsers except for Internet Explorer.

    function saveScrollPosition() {

    // Save the cookie if the requestor is Internet Explorer
    if (navigator.appName.indexOf("Microsoft") != -1) {
       alert("Internet Explorer browser has been identified...");
       var scrollX, scrollY;
       var strA = "KulScrollPos=";
       var strB = ",";
       var strC = "; path=";

       // Depending on the version of Internet Explorer --- call the appropriate API
       if (!document.documentElement.scrollLeft)
         scrollX = document.body.scrollLeft;
       else
         scrollX = document.documentElement.scrollLeft;
       if (!document.documentElement.scrollTop)
         scrollY = document.body.scrollTop;
       else
         scrollY = document.documentElement.scrollTop;
       alert("scrollX = " + scrollX + " and " + "scrollY = " + scrollY);
       alert("strA = " + strA);

       //document.cookie = "KulScrollPos="+scrollX+","+scrollY+"; path="+document.location.pathname;
       document.cookie = strA.concat(scrollX, strB, scrollY, strC, document.location.pathname);
    }
    // Save the cookie for all other major browsers
    else {
       document.cookie = "KulScrollPos="+f_scrollLeft()+","+f_scrollTop()+"; path="+document.location.pathname;
    }
    alert("cookie = " + document.cookie)
}

function restoreScrollPosition() {
    alert("Entered the restore method...");
    cookieName = "KulScrollPos";

    if (document.title == "KFS :: Create Purchase Log") {
       resetScrollPosition();
       expireCookie( cookieName );
       return true;
    }
    else {
       var matchResult = document.cookie.match(new RegExp(cookieName+"=([^;]+);?"));
       if ( matchResult ) {
         var coords = matchResult[1].split( ',' );
         if (coords[1] != 0) {
           alert("Restoring the scroll position before scrollTo... " + coords[0] + " and " + coords[1]);
           window.scrollTo(coords[0],coords[1]);
           parent.window.scrollTo(coords[0],coords[1]);

        }
        expireCookie( cookieName );
        return true;
    }
    else {
     return false;
    }
}

Notice my alert box where I am printing the cookie name.

Firefox prints the following:

cookie = KulScrollPos=0,1946; kualiSessionId=A7807919-4719-D5B4-91D6-9CC04EEA1BA8;JSESSIONID=1F155C7FC23C48A4DAF557CA4B92D2CB

Internet Explorer prints the following:

cookie = kualiSessionId=072BE31C-6AF5-6D4C-11A4-55E799790C6A; JSESSIONID=76D83E8E7EBA5F25B8A1B1990B9344E8

Notice that the string
KulScrollPos=0,1946;
is being left off the cookie name. This only happens in Internet Explorer!

***I tried another approach at setting the string variable (the line that is commented out) where I am setting document.cookie = … This line also produced the same alert output as displayed above.

Notice my ELSE Block in my RestoreScrollPosition.
The if (matchResult) condition always fails because of this, because of which, my code there where I call my scrollTo method never gets called!

Ughhh, am I concatenating the strings wrong? What doesn’t IE like that FF does?

Very strange behavior indeed!

Answer 1

Apparently Internet Explorer doesn’t like the “=” (equal sign) in cookie names that is provided within double quotes. It was interpreting the ‘=’; rather than accepting it as a literal; thus, I solved the problem using the single quotes. Apparently, you have to be forceful with IE! Go figure….

The following code fixed the problem that I was having –

function saveScrollPosition() {

    // Save the cookie if the requesting browser is Internet Explorer
    if (navigator.appName.indexOf("Microsoft") != -1) {
        // Ensure that the cookie will be saved on IE version 5/+
        if (!document.documentElement.scrollLeft)
          scrollX = document.body.scrollLeft;
        else
          scrollX = document.documentElement.scrollLeft;
        if (!document.documentElement.scrollTop)
          scrollY = document.body.scrollTop;
        else
          scrollY = document.documentElement.scrollTop;
        document.cookie = 'KulScrollPos =' + scrollX+','+scrollY+';'+document.location.pathname;
    }

    // Save the cookie for all other major browsers
    else {
        document.cookie = "KulScrollPos="+f_scrollLeft()+","+f_scrollTop()+"; path="+document.location.pathname;
    }
}

Lessons learned –

Don’t use “=” signs in your cookie names. If you need them, use the single quotes to tell IE not to interpret it, but to accept it as a literal.