0

I have some jQuery code I would like to fire depending on screen width. I want this to trigger on page load AND resizing the browser window. Currently it only loads on page load.

$(function(){
  if ($(window).width() < 720) {
    $(".mobile").click(function(){
      $("#mobile").toggle();  
    });
  } else {
    $(".desktop").click(function(){
      $("#desktop").toggle();  
    });
  }
});

E.g. if a user loads at desktop size, and resizes down, the mobile click would not trigger unless the user refreshes the page.

I have googled around and understand I need to use the jQuery resize event, but I cannot get it to work.

Any help would be greatly appreciated. Here is a codepen...http://codepen.io/anon/pen/WbxKrv

3

3 Answers 3

0

From your comment below, you're not toggling this with user clicks after all. (Not sure what the click handlers in your code example are meant to be, then.)

The best way to handle this is with CSS, not JavaScript, using media selectors:

@media screen and (max-width: 720px) {
    selector-for-your-big-screen-only-content {
        display: none;
    }
}
@media screen and (min-width: 721px) {
    selector-for-your-small-screen-only-content {
        display: none;
    }
}

More: http://www.w3.org/TR/css3-mediaqueries/


Original answer:

I take it your goal is to show the mobile or desktop site either automatically or when the user clicks a button.

Fundamentally, you put the logic in functions and reuse them:

$(function(){

  // Auto select on load and resize
  autoSelect();
  $(window).on("resize.autoselect", autoSelect);

  // If user makes an explicit choice, switch to their choice and don't
  // auto-select anymore
  $(".mobile").click(function() {
    showMobile(true);
    $(window).off("resize.autoselect");
  });
  $(".desktop").click(function() {
    showMobile(false);
    $(window).off("resize.autoselect");
  });

  function autoSelect() {
    if ($(window).width() < 720) {
      showMobile(true);
    } else {
      showMobile(false);
    }
  }

  function showMobile(flag) {
    $("#mobile").toggle(flag);
    $("#desktop").toggle(!flag);
  }
});
3
  • No I want to only show desktop on desktop and mobile on mobile. It works fine as I have in the original code, I just want it so when you resize the window down, you automatically activate the mobile button, as opposed to refreshing the page in mobile view.
    – Adam
    Dec 19, 2014 at 16:58
  • @Adam: Then remove the click handlers from the above. (What were they for if not to allow the user to do it?) The fundamental point is that you put the logic that makes the decision in a function, call that function on load, then call it again on resize. Dec 19, 2014 at 17:03
  • No the click handlers are there to demonstrate a simple test case of using javascript. Ok let me try and rephrase. Let's say I am on a desktop view (width bigger than 720px). I click on the desktop button, and the desktop text is displayed. This is perfect, and if I try clicking on the mobile button, nothing would happen, which is fine. Now when I resize my window down to below 720px wide, I want to be able to click on the mobile button, and have this display the mobile text, without refreshing my window. Does this make sense?
    – Adam
    Dec 19, 2014 at 23:41
0

This is what I was trying to achieve - http://codepen.io/anon/pen/azmvWE

The jQuery function is now triggered on page load as well as resize...

function checksize() {
  if ($(window).width() < 720) {
    $(".mobile").click(function(){
      $("#mobile").toggle();  
    });
  } else {
    $(".desktop").click(function(){
      $("#desktop").toggle();  
    });
  }
}

checksize();

$(window).resize(checksize);
-1

You can use this. Here you need to add onresize attribute on body tag and call function where your logic is written.

<body onresize="myFunction()">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.