Jquery to kick in if screen width is less than 500px

Question

I have this code that shows content if clicked. The thing is that this function should only be availible if the screen/device width is 500px maximum. How would I go about doing this?

$(function () {
    $('.row1').hide();
    $('#show').toggle(function () {
        $('.row1').slideDown("slow");
        $(this).attr("src", "bilder/cancel.png");
    }, function () {
        $('.row1').slideUp("slow");
        $(this).attr("src", "bilder/add.png");
    });
});

UPDATE: I didn't do a good job explaining what I wanted to accomplish : / I I want this image to show when the screen width is above 500px. And when the width is less than 500px I want a line that say click here to show image and the image appears

Solution 1

You need to first get the screen width and then you can use an if statement to then run the code you posted above, if the screen width is above the certain width.

For example.

if($(window).width() > 500){
   $('.row1').hide();
   $('#show').toggle(function(){
      $('.row1').slideDown("slow");
      $(this).attr("src","bilder/cancel.png" );
   },function(){
      $('.row1').slideUp("slow");
      $(this).attr("src", "bilder/add.png" );
   });
};

EDIT

Looking at your comments you want to show an image else hide it. I would probably agree this would be nicer and easier to do with css media queries but please see the below edit which shows a JS solution.

if($(window).width() > 500){
   //show the image
   $('.row1').slideDown("slow");
   //etc...   
}else{
   //hide the image
   $('.row1').slideUp("slow");
   //etc...
}

Solution 2

Try tracking screen.width and screen.height.

Something like this:

    function doSomething(){
        if (screen.width < 500){
            //Do Something
       }
    }

Solution 3

You can bind the event when the size of the window is less than 500, or use an if statement in your handler. Note that toggle event method is deprecated, you can use slideToggle method instead.

$(function () {
    var $row = $('.row1').hide();
    $('#show').click(function () {
        if ($(window).width() > 500) return;
        $row.stop().slideToggle("slow");
        $(this).prop("src", function(i, src){
            return src === "bilder/cancel.png" 
                   ? "bilder/add.png" 
                   : "bilder/cancel.png";
        });
    });
});

Or:

$(function () {
    if ($(window).width() > 500) {
       var $row = $('.row1').hide();
       $('#show').click(function () {
           $row.stop().slideToggle("slow");
           $(this).prop("src", function(i, src){
                return src === "bilder/cancel.png" 
                       ? "bilder/add.png" 
                       : "bilder/cancel.png";
           });
       });
    }
});

Solution 4

You can also bind your function to the resize event. This will call your function whenever the browser window is resized.

function myFunction() {
    if($(window).width() > 500)
    {   
        //Code to run when greater than...
    }
    else
    {
        //Code to run when less than...
    }
}

//initialize
myFunction();

//call when the page resizes.
$(window).resize(function() {
    myFunction();
});

You can view a working visual example here: http://jsfiddle.net/q6BpH/1/

View more solutions