applying jquery to single media queries

Question

I'm trying to add different values to the jquery based on below in relation to the media query.

HTML

<div id="content">
</div>

JS

$("html,body").animate({scrollTop: 360}, 1000);

Desired Effect, something along the lines of this

@media handheld, only screen and (max-width: 1024px) {

$("html,body").animate({scrollTop: 660}, 1000);

}

@media handheld, only screen and (max-width: 768px) {

$("html,body").animate({scrollTop: 260}, 1000);

}

What would be the most ideal way of doing this?

that cannot be done my friend. You have to use screen width and heigth to archive that. You cannot add javascript code to a stylesheet http://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa — Ligth, May 23 '13 at 18:28

Joe · Accepted Answer · 2013-06-13T18:30:15.783

1

As a commenter said, you can't use JS and CSS together like that. You could do this though:

var width = $(window).width(), scroll = 360;

if(width <= 1024){
    scroll = width > 768 ? 660 : 260;
    // if (width > 768) means width must be 769-1024 so scroll = 660.
    // else the width must be 768 or below so scroll = 260 
}

$("html, body").animate({scrollTop: scroll}, 1000);

edited Jun 13 '13 at 18:30

answered May 23 '13 at 18:35

Joe

15,205
8
49
56

Thats great, my crude code was the best way for me to describe what I was looking for. Thanks for your help, works a treat :) – Rob May 23 '13 at 18:47

applying jquery to single media queries

1 Answers1