Javascript code doesnt work in IE

Question

Here is jsfiddle: http://jsfiddle.net/vZMyS/ EDIT: thanks to Buck Doyle i made an appropriate if else with different versions of the script for chrome and firefox/opera. Now it just doesnt work with IE.

Script is supossed to make user able to scroll down/up to scrollpoints that are specified in the "var scrollKeys", using up/down keyboard keys, it does work in chrome, but it doesnt in other browsers.

Any idea whats wrong here? How could i fix this code in order to make it work in firefox/opera/ie8+?

html

<div class="big">
<div class="box1">
    <input type="text" name="input1" class="input1" />
</div>
<div class="box2">
    <input type="text" name="input2" class="input1" />
</div>
<div class="box1">
    <input type="text" name="input3" class="input1" />
</div>
<div class="box2">
    <input type="text" name="input4" class="input1" />
</div>
</div>

css

.big {width:400px; height:4000px; float:left;}
.box1 {width:400px; height:1000px; background-color:#ccc; float:left;}
.box2 {width:400px; height:1000px; background-color:#ddd; float:left;}
.input1 {width:120px; height:16px; float:left;}

javascript

var scrollKeys = new Array('0', '1000', '2000', '3000');
$('body').on('keyup', function(event) {
    var keypressed = (event.which) ? event.which : event.keyCode;
    var curScroll = $('body').scrollTop();
    var keys = scrollKeys.length;
    var moved = false;
    for (i = 0; i < keys; i++) {
        //console.log(scrollKeys[i]);
        if (moved == false) {
            if (keypressed == 40 && i != (keys - 1) && parseInt(scrollKeys[i]) < curScroll && parseInt(scrollKeys[i + 1]) > curScroll) {
                $('body').animate({
                    scrollTop : (parseInt(scrollKeys[i + 1]))
                }, 'fast', function() {});
                console.log('down');
                moved = true;
            } else if (keypressed == 38 && i != 0 && parseInt(scrollKeys[i]) > curScroll && parseInt(scrollKeys[i - 1]) < curScroll) {
                $('body').animate({
                    scrollTop : (parseInt(scrollKeys[i - 1]))
                }, 'fast', function(){});
                console.log('up');
                moved = true;
            }
        }
    }
});

Please add your code here as well and explain what the issue is about. What are "scrollpoints"? What does the code do? What happens and what do you expect to happen? — Felix Kling
– Felix Kling, Commented May 10, 2012 at 12:04

Buck Doyle · Accepted Answer · 2012-05-10 12:37:23Z

1

Here is a fork of your fiddle that works in Firefox. But now it doesn’t work in Chrome. The important thing is that I changed it to scroll html instead of body.

answered May 10, 2012 at 12:37

Buck Doyle

6,4071 gold badge24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daniel Care Over a year ago

it should work in opera aswell, thanks :) so its just IE left... btw any reference on this?

Buck Doyle Over a year ago

It was only vague memories that made me try changing the selector. But this smooth scrolling code tries both html and body, so it’s definitely a Thing. Testing in IE is a pain for me due to weird hardware problems, so I can’t help you there, sorry.

Heretic Monkey Over a year ago

That fork works in IE9, and once I commented the references to console (which isn't enabled by default), it worked in IE8.

Collectives™ on Stack Overflow

Javascript code doesnt work in IE

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related