JS "@media" device resolution change property of js command

Question

I'm doing responsivity on my website in JS. How can I change this (normal resolution):

$(".card1_content_arrow").click(function () {
    $(".card1_content").css('margin-left', '-45%');
});

Into this, when media width is <860px (in css @media all and (max-width: 860px)):

$(".card1_content_arrow").click(function () {
    $(".card1_content").css('margin-left', '-100%');
});

When I click on .card1_content_arrow on big resolution, then margin-left will be changed to -45%', but if I will change the resolution to 860px (and less) I want, that when I click on same .card1_content_arrow, then margin-left will be changed to -100%. Thanks :)

Answer 1

You can detect the screen resolution as described on this question.

$(".card1_content_arrow").click(function () {
    var margin = "-45%";

    if (window.screen.availWidth < 860) {
        margin = "-100%";
    }

    $(".card1_content").css('margin-left', margin);
}); 

I would suggest using media queries instead by specifying another class to control the margin.

.yourClass {
    margin-left: -45%;
}

@media (max-width: 859px) {
    .yourClass {
        margin-left: -100%;
    }
}

You can just add the class into your element and let the browser do the checking.

$(".card1_content_arrow").click(function () {
    $(".card1_content").addClass('yourClass');
});