CODEWITHSUNDEEP
javascriptjquerywindow
J82
J82

Reputation: 8457

jQuery window width conditional not working

I'm having a bit of trouble with adjusting the code according to window width. If the window width is less than 450, I want it to scroll to a certain part, else another. Where am I going wrong?

$('.artist-kina').click(function( e ){
    e.preventDefault();
    $('html, body').animate({
        if ($(window).width() < 450 {
            scrollTop: $('#artists').offset().top - 60
        }
        else {
            scrollTop: $('#artists').offset().top - 115
        }
    }, 500);
    $('.artists-home').fadeOut(function() {
        $('.kina-gallery').fadeIn('slow');
    });
});

Upvotes: 0

Views: 111

Answers (2)

Joel Strellner
Joel Strellner

Reputation: 1

There were several issues with the way that you nested the code, but the largest issue was the Animate call.

This should work:

$('.artist-kina').click(function( e ){
    e.preventDefault();
    if ($(window).width() < 450) {
        $("html, body").animate({
            scrollTop: $('#artists').offset().top-60
        }, 500);
    }
    else {
        $("html, body").animate({
            scrollTop: $('#artists').offset().top-115
        }, 500);
    }
    $('.artists-home').fadeOut('slow', function() {
        $('.kina-gallery').fadeIn('slow');
    });
});

Here is a working jsFiddle: http://jsfiddle.net/yy1v940u/5/

Upvotes: 0

Pointy
Pointy

Reputation: 413717

The parenthesis was a problem, but in a larger sense the syntax is just completely wrong:

$('html, body').animate({
    scrollTop: $("#artists").offset().top - (
      $(window).width() < 450 ? 60 : 115
    )
}, 500);

You can't just drop an if statement into the middle of an object literal. You can, however, use the ? : operator to make a choice between values as part of an expression.

Now be aware that fooling around with the scroll position of the <body> may or may not work in all browsers. Safari used to have a problem with that; it may work in more modern versions of the browser.

Upvotes: 3

Related Questions