Tablet portrait/landscape toggles is not reexecuting jQuery?

Question

I have an issue when toggling a tablet from portrait to landscape and vice versa, the tablet doesn't reexecute jQuery codes.

Here is the scenario:

<div class="links">
  <ul class="hide">
    <li></li>
  </ul>
</div>

Initially, the ul element is hidden through CSS. Then I give this code to be opened on click event.

if ($(window).width() <= 800) { // portrait orientation
    $(".links").click(function() {
       $(this).find('ul').slideToggle();
    });
}

It works good so far. If I don't click anything, it still works fine even when I keep toggling to landscape back and forth. The issue comes when on portrait orientation, I click the element to open it and click it again to close.

It seems after the second click, the ul element got additional style="display:none" (initially this ain't there because it's handled by CSS). This is why the ul element got hidden when I switch back to landscape. Then I tried to give this code below.

if ($(window).width() > 800) { // landscape orientation
    if ($('.links ul').is(":hidden")) {
        $('.links ul').css("display","block");
    }
}

However, it seems this code never got executed whenever I switch to landscape orientation leaving the ul element hidden. Is there a work around so that the browser will execute code every time I toggle the orientation?

Have you seen this http://stackoverflow.com/a/13869089/562036? — Jianhong, Aug 21 '13 at 02:01
Thanks, but that doesn't solve the issue. My main issue is how to change an inline styling when switch from portrait to landscape or vice versa (based on window width). Because it seems tablets only execute CSS, but not JS when the window width changes. — user2395853, Aug 21 '13 at 04:30

score 3 · Accepted Answer · answered Aug 21 '13 at 06:14

You can use .resize() jQuery handler to check the height of window when resize the screen,

$(document).ready(function(){
    $(window).resize(function()
    {
        if ($(window).width() > 800)
        { // landscape orientation
            if ($('.links ul').is(":hidden"))
            {
                $('.links ul').css("display","block");
            }
        }
    });
});

dc5 · Answer 2 · 2013-08-21T15:13:17.227

Depending on your browser support requirements, you could use a combination of orientation change and matchMedia.

According to MDN: window.matchMedia mobile support is reasonable:

Feature        Android   Firefox Mobile (Gecko)   IE Mobile      Opera Mobile   Safari Mobile
Basic support      3.0              6.0 (6.0)     Not supported          12.1        5

There are also a couple of matchmedia polyfills available depending on your needs:

if you combine this with orientationchange you could do something like:

window.addEventListener("orientationchange", function(evt) {
    if (window.matchMedia("(min-width: 400px)").matches) {
      /* the view port is at least 400 pixels wide */
    } else {
      /* the view port is less than 400 pixels wide */
    }    
}, false);

This should give you pretty decent control over your orientation changes.

If you are willing to use an additional library Enquire.js has some great support for both matching and unmatching events. It's small and no jQuery required.

score 0 · Answer 3 · answered Aug 21 '13 at 06:08

0

You could set up an event listener such as:

window.addEventListener("orientationchange", function() {
    alert("orientationchange");
}, false);

answered Aug 21 '13 at 06:08

Mark Simon

612
1
6
17

Tablet portrait/landscape toggles is not reexecuting jQuery?

3 Answers3