Databases
StackOverflow2013
Postsdbo
POIpad orientation change causes jquery to fire multiple functions
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIpad orientation change causes jquery to fire multiple functions
    primarykey
    data
    text
    <p>I'm working on a site that we're trying to optimize for ipad use. When you change orientation of the ipad to landscape parts of the site should hide to make it easier to read. Everything works, but there when you change from portrait to landscape and back again, it seems to 'queue up' the previous jquery functions and run them one after another.</p> <p>So if you change from 0 to 90 degrees it fires the 90 degree function. Change from 90 to 180 then it fires the 90 and 180 functions. Change from 180 to -90 and it fires the 90, 180 AND -90 functions.</p> <p>Does anyone know why it's doing this and how to stop it?</p> <p>-Edit- The functions getting queued are the click events. This results in, when the button is clicked, the height of the targeted div rapidly increasing and decreasing like an accordion!</p> <p>Code below:</p> <pre><code>jQuery(window).bind('orientationchange', function(e) { if(Math.abs(window.orientation) == 0){ $('#slider').animate({height:'375px'});$('#top').animate({height:'445px'});$('#strap').animate({top:'445px'}, false); $("a.more-button").click(function(){ $('#slider').css({'height':'375px'});$('#top').css({'height':'445px'});$('#strap').css({'top':'445px'}); console.log('it fired 0'); }); return false; } if(Math.abs(window.orientation) == 90){ $("a.more-button").click(function(){ $('#slider').animate({height:'0px'}); $('#top').animate({height:'130px'}); $('#strap').animate({top:'130px'}, false); console.log('it fired 90'); }); $("#next-page").on("click", function(){ $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false); }); $("#prev-page").on("click", function(){ $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false); }); $(".menu-link").on("click", function(){ $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false); }); return false; } if(Math.abs(window.orientation) == -90){ $("a.more-button").click(function(){ $('#slider').animate({height:'0px'}); $('#top').animate({height:'130px'}); $('#strap').animate({top:'130px'}, false); console.log('it fired -90'); }); $("#next-page").on("click", function(){ $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false); }); $("#prev-page").on("click", function(){ $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false); }); $(".menu-link").on("click", function(){ $('#slider').animate({height:'375px'}); $('#top').animate({height:'445px'}); $('#strap').animate({top:'445px'}, false); }); return false; } if(Math.abs(window.orientation) == 180){ $('#slider').animate({height:'375px'});$('#top').animate({height:'445px'});$('#strap').animate({top:'445px'}, false); $("a.more-button").click(function(){ $('#slider').css({'height':'375px'});$('#top').css({'height':'445px'});$('#strap').css({'top':'445px'}); console.log('it fired 180'); }); return false; } }, false); </code></pre> <p>-Edit- The Solution! Following Simon's advice I've fixed the problem with a hybrid of his code and another user's (who didn't leave their name so I can't credit).</p> <pre><code>$(window).bind("resize", function(){ screenOrientation = ($(window).width() &gt; $(window).height())? 90 : 0; $("a.more-button, #next-page, #prev-page, .menu-link").off(".MyClickEvents"); if (screenOrientation === 90) { $("a.more-button").on("click.MyClickEvents", function () { $('#slider').animate({ height: '0px' }); $('#top').animate({ height: '130px' }); $('#strap').animate({ top: '130px' }, false); console.log('it fired 90'); }); $("#next-page").on("click.MyClickEvents", function () { $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false); }); $("#prev-page").on("click.MyClickEvents", function () { $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false); }); $(".menu-link").on("click.MyClickEvents", function () { $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false); }); } else { $('#slider').animate({ height: '375px' }); $('#top').animate({ height: '445px' }); $('#strap').animate({ top: '445px' }, false); console.log('portrait'); $("a.more-button").on("click.MyClickEvents", function () { $('#slider').css({ 'height': '375px' }); $('#top').css({ 'height': '445px' }); $('#strap').css({ 'top': '445px' }); console.log('it fired 0'); }); } }); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USevilscary
    1. USevilscary
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COA user suggested that I insert 'jQuery(window).unbind('orientationchange').bind('orientationchange', function(e)' and see if that worked. Then he deleted his comment. I can see the logic behind that but it didn't work; it still keeps queuing the functions. So frustrating!
      singulars
      1. POIpad orientation change causes jquery to fire multiple functions
      1. USevilscary
    2. COWhat functions are getting queued? Those that are bound to a `click`-Event?
      singulars
      1. POIpad orientation change causes jquery to fire multiple functions
      1. USiappwebdev
    3. COHere's an article I wrote last summer, it could help you adopt a simpler approach to this problem: [Cross-device, cross-browser portrait-landscape detection](http://pioul.fr/cross-device-cross-browser-portrait-landscape-detection)
      singulars
      1. POIpad orientation change causes jquery to fire multiple functions
      1. USPioul
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload