CODEWITHSUNDEEP
javascriptjquerydocument-body
kgam
kgam

Reputation: 227

$(window).width() and $('body').scrollLeft() not working in IE and Firefox

Sample: http://kat.isltest.net/col/

This sample site is working in chrome. The function is the body is centered even it contains a wide div of 1600px. The scrollbar is then by default centered in every window size.

Now, the problem is this is not working in IE and Firefox.

Here's the code:

if ($(window).width() <= 1600) {
    $('body').scrollLeft(0);
}
if ($(window).width() <= 1400) {
    $('body').scrollLeft(110);
}
if ($(window).width() <= 1360) {
    $('body').scrollLeft(130);
}
if ($(window).width() <= 1280) {
    $('body').scrollLeft(170);
}
if ($(window).width() <= 1152) {
    $('body').scrollLeft(235);
}
if ($(window).width() <= 1024) {
    $('body').scrollLeft(300);
}
if ($(window).width() <= 800){
    $('body').scrollLeft(400);
}

DO you guys have idea why? Thanks a lot! :)

Upvotes: 0

Views: 1087

Answers (2)

Maulik
Maulik

Reputation: 379

If you want to do scroll on click any button then you can do following using jquery.

$('#next').click(function(event) {
event.preventDefault();
$('.surr-cor').animate({
scrollLeft: "+=1350px"
}, "slow");
});

Mention event for firefox because it works on events. You can replace .surr-cor to your div element or body

Upvotes: 0

Mario A
Mario A

Reputation: 3363

You need to wrap you code with a listener that executes when the window is resized, otherwise the scrollbars are adjusted only once:

$(window).on('resize', function() {
  /* your code */
});

I guess the reason that chrome adjusts it's vertical scrollbar to the center when the width of the browser window is smaller then 1600px is default behaviour and has nothing to do with your code.

Edit

Further, you need to use $(document).scrollLeft() instead of $('body').scrollLeft() if you want the viewport to scroll.

Upvotes: 3

Related Questions