Databases
StackOverflow2013
Postsdbo
POiOS 4 Safari and Android 2.3 Browser Modernizr / matchMedia / Enquire.js Cache Issues
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POiOS 4 Safari and Android 2.3 Browser Modernizr / matchMedia / Enquire.js Cache Issues
    primarykey
    data
    text
    <p>I'm doing some basic toggleClass functions using enquire.js for some of my responsive projects. </p> <p>For older browsers such as Android 2.3 and below and iOS 4 Safari, the following example does not work.</p> <p>I am doing some modernizr testing as you can see below. Older Android browsers and iOS 4 Safar do not support matchMedia, hence the matchMedia polyfill. </p> <p>I have created a test case and tested it using BrowserStack, and it fails on iOS 4 and below. <a href="http://goo.gl/3a3ss" rel="nofollow">http://goo.gl/3a3ss</a>, or a fiddle that may or may not work.. <a href="http://jsfiddle.net/jSg6X/" rel="nofollow">http://jsfiddle.net/jSg6X/</a></p> <p>Originally this is used on a Drupal site. On initial load, everything works. If you refresh the page or try to go to another page, the script fails at the matchMedia test. If you clear the browser cache and reload, it works again but just for that page.</p> <p>(function ($, window, document) {</p> <pre><code>Modernizr.load([ { test: Modernizr.mq('only all'), nope: 'js/respond.min.js' }, { test: window.matchMedia, nope: 'js/matchMedia.js' }, { load: 'js/enquire.min.js', complete: function(){ var query = "all and (max-width:600px)"; var $myButton1 = $(".mybutton1"); var $myButton2 = $(".mybutton2"); enquire.register(query, [ { match: function(){ $myButton1.on("click", function(){ $(".menu").toggleClass("showme"); }); }, unmatch: function(){ $myButton1.off("click"); }, match: function(){ $myButton2.on("click", function(){ $(".menu2").toggleClass("showme"); }); }, unmatch: function(){ $myButton2.off("click"); } } ],true).listen(); } } ]); </code></pre> <p>})(jQuery, this, this.document);</p> <p>Any help would be appreciated. I am not sure if I am not using enquire.js correctly, or I am missing something.</p> <p>I have created a further reduced test case without, and am getting thes ame result. I used the below js (doesn't make sense, I know, but it loads the alert on first load and that's it)</p> <p>(function ($, window, document) {</p> <p>Modernizr.load([ //first test need for matchMedia polyfill { test: window.matchMedia, nope: 'js/media.match.min.js', load: 'js/enquire.min.js', callback: function(){ alert("test"); } } ]);</p> <p>})(jQuery, this, this.document);</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. UShumanaut
    1. UShumanaut
    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. VO
      singulars
      1. POiOS 4 Safari and Android 2.3 Browser Modernizr / matchMedia / Enquire.js Cache Issues
      1. USIan Bullock
      1. VTFavorite
    2. VO
      singulars
      1. POiOS 4 Safari and Android 2.3 Browser Modernizr / matchMedia / Enquire.js Cache Issues
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHey @briggimus, as per my comment on twitter, could you look at creating a JSFiddle/codepen with a reduced test case.
      singulars
      1. POiOS 4 Safari and Android 2.3 Browser Modernizr / matchMedia / Enquire.js Cache Issues
      1. USWickyNilliams
 

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