Question

I’m new to jquery and javascript, and to web site developing overall, and I’m having a problem with the .offset function. I have the following code working fine on chrome and FF but not working on IE:

$(document).keydown(function(k){  
    var keycode=k.which;  
    var posk=$('html').offset();  
    var centeryk=screen.availHeight*0.4;  
    var centerxk=screen.availWidth*0.4;  
    $("span").text(k.which+","+posk.top+","+posk.left);  
    if (keycode==37){  
        k.preventDefault();  
        $("html,body").stop().animate({scrollLeft:-1*posk.left-centerxk})  
    };  
    if (keycode==38){  
        k.preventDefault();  
        $("html,body").stop().animate({scrollTop:-1*posk.top-centeryk})  
    };  
    if (keycode==39){  
        k.preventDefault();  
        $("html,body").stop().animate({scrollLeft:-1*posk.left+centerxk})   
    };
    if (keycode==40){
        k.preventDefault();
        $("html,body").stop().animate({scrollTop:-1*posk.top+centeryk})
    };  
});  

hat I want it to do is to scroll the window a set percentage using the arrow keys, so my thought was to find the current coordinates of the top left corner of the document and add a percentage relative to the user screen to it and animate the scroll so that the content don’t jump and the user looses focus from where he was. The $(“span”).text are just so I know what’s happening and will be turned into comments when the code is complete.

So here is what happens, on Chrome and Firefox the output of the $(“span”).text for the position variables is correct, starting at 0,0 and always showing how much of the content was scrolled in coordinates, but on IE it starts on -2,-2 and never gets out of it, even if I manually scroll the window until the end of it and try using the right arrow key it will still return the initial value of -2,-2 and scroll back to the beggining.

I tried substituting the offset for document.body.scrollLetf and scrollTop but the result is the same, only this time the coordinates are 0,0. Am I doing something wrong? Or is this some IE bug? Is there a way around it or some other function I can use and achieve the same results?

On another note, I did other two navigating options for the user in this section of the site, one is to click and drag anywhere on the screen to move it:

$("html").mousedown(function(e)
{
    var initx=e.pageX
    var inity=e.pageY
    $(document).mousemove(function(n)
    {   
        var x_inc= initx-n.pageX;
        var y_inc= inity-n.pageY;
        window.scrollBy(x_inc*0.7,y_inc*0.7);
        initx=n.pageX;
        inity=n.pageY
        //$("span").text(initx+ "," +inity+ "," +x_inc+ "," +y_inc+ "," +e.pageX+ "," +e.pageY+ "," +n.pageX+ "," +n.pageY);

    // cancel out any text selections
    document.body.focus();

    // prevent text selection in IE
    document.onselectstart = function () { return false; };
    // prevent IE from trying to drag an image
    document.ondragstart = function() { return false; };

    // prevent text selection (except IE)
    return false;
    });
});

$("html").mouseup(function()
{
    $(document).unbind('mousemove');
});

The only part of this code I didn’t write was the preventing text selection lines, these ones I found in a tutorial about clicking and draging objects, anyway, this code works fine on Chrome, FireFox and IE, though on Firefox and IE it’s more often to happen some moviment glitches while you drag, sometimes it seems the “scrolling” is a litlle jagged, it’s only a visual thing and not that much significant but if there’s a way to prevent it I would like to know.

Answer 1

okay I just solved my problem changing the posk variable to

    var poskt=$(document).scrollTop(); 

and adding an new var for scrollLeft, this way the code behave the same on Chrome, FF and Internet Explorer