CODEWITHSUNDEEP
javascriptjqueryorientation-changes
Yesi
Yesi

Reputation: 51

orientationchange event on websites (no mobile apps)

Do you have to use jquery Mobile to detect the orientation change event? I have simple site (not a mobile app) and I have something specific to do only when orientation changes on iPad/iPhone/etc but I'm not currently using the jQuery Mobile files, so when I test this, it doesn't work.

jQuery version:

$(window).bind('orientationchange',function(e){
      $("#navTempResize").click();
});

javascript version:

window.onorientationchange = function () {
    document.getElementById("navTempResize").click();
}

Also, is there a way to emulate orientation change on web browsers(FF, Safari, Chrome)?

Upvotes: 3

Views: 1308

Answers (1)

Chango
Chango

Reputation: 6782

I haven't tested this, I'll test it later if I have the time:

Something = function () {
  this.init();
};
Something.prototype = {
  constructor: Something, // <-- fixed constructor

  this.resizeEvent: null,

  init: function () {
    this.resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize';
    document.body.addEventListener($.proxy(this.resizeEvent, this), this, false);
  },

  handleEvent: function (e) {
    switch(e.type) {
      case this.resizeEvent: this.resize(e); break;
    }
  },

  resize: function(event) {
    var ratio = $(window).width()/$(window).height();
    if (ratio < 1.0) {
      this.portrait();
    } else {
      this.landscape();
    }
  },
  portrait: function () {
    // do something...
  },
  landscape: function () {
    // do something...
  }
};

I like to organize my js like this, but you could do it without the object (or choose a better name :P, I'm out of imagination). So you just need to do new Something() on document ready (I have my doubts if it must be done there or if can be done anywhere). I'll edit when I have tested it all.

----------- EDIT --------------

Here is another solution using CSS3 media queries:

You could use a smart choice of max and min width like this:

@media screen and (min-width: 800px) and (max-width: 1200px) {
  .class1 {
     ...
  }
  .class2 {
     ...
  }
  ...
}

For the iPad specifically, there is also a media query property called orientation. The value can be either landscape (horizontal orientation) or portrait (vertical orientation).

@media screen and (orientation: landscape) {
     .iPadLandscape {
       ...
     }
}
@media screen and (orientation: portrait) {
     .iPadPortrait {
       ...
     }
}

You can find more information here: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Upvotes: 1

Related Questions