Jquery detect screen resolution and apply different css

Question

I have a script for a sliding panel woring as a menu. It works welllm but i have to apply a different margin-top depending on what screen resolution (mobile).

$(document).ready(function() {
$(".topMenuAction").click( function() {
    if ($("#openCloseIdentifier").is(":hidden")) {
        $("#slider").animate({ 
            marginTop: "-130px"
            }, 500 );
        $("#topMenuImage").html('<img src="img/icono-nav.png"/>');
        $("#openCloseIdentifier").show();
    } else {
        $("#slider").animate({ 
            marginTop: "0px"
            }, 500 );
        $("#topMenuImage").html('<img src="img/icono-cerrar.png"/>');
        $("#openCloseIdentifier").hide();
    }
});

Thank you :)

See also http://stackoverflow.com/q/4802888/901048 and http://stackoverflow.com/q/9437584/901048 — Blazemonger, May 28 '14 at 20:25

Smith Smithy · Answer 1 · 2014-05-28T20:36:41.027

2

If you know the widths

screenWidth = $( window ).width();

switch (screenWidth){
    case 760:
    newMargin = 100;
    break;
    case 420:
    newMargin = 75;
    break
}

if you want a range

if (screenWidth < 1000 && screenWidth >= 760){
    newMargin = 100;
}
else if (screenWidth < 760 && screenWidth >= 420){
    newMargin = 75;
}
else{
    newMargin = 250
}

edited May 28 '14 at 20:36

answered May 28 '14 at 20:27

Smith Smithy

585
6
24

thnx smith! yup, the with should be 500px. Soo... how can i mix it with the code above? big thnx! – Oscar May 28 '14 at 20:35
This code will help you set the margin value based on the screen width. – Smith Smithy May 28 '14 at 20:37

Jquery detect screen resolution and apply different css

1 Answers1