Databases
StackOverflow2013
Postsdbo
POjQuery not running on mobile browers
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery not running on mobile browers
    primarykey
    data
    text
    <p>So I'm working on the mobile menu for a website and it seemed like everything was running smoothly until I started testing it on a few devices. Resized window on a desktop was perfectly fine but mobiles are doing some strange things.</p> <p>Take a look at the jsFiddle I made: <a href="http://jsfiddle.net/Amp3rsand/s9Hpa/2/" rel="nofollow">http://jsfiddle.net/Amp3rsand/s9Hpa/2/</a></p> <p>It should give an idea of what I'm trying to achieve. If you look at that link on a desktop the menu button will toggle the navigation div no problem but I have found that when viewing it with an iPhone 4 on IOS6, the menu button only changes to its hover state and doesn't execute the jQuery. This is the same thing I'm finding with the website I'm working on.</p> <p>The html follows this structure:</p> <pre><code>&lt;head&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;ul id="navigation"&gt; &lt;li id="home" class="current"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; ... &lt;li id="contact"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;a href="#" id="menu"&gt;&lt;/a&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>On the desktop site #menu is set to display:none; and under 480px it is set to display:block; and #navigation is set to display: none; Nothing particularly fancy is happening besides restyling for a mobile screen. As you can see I'm using jQuery 1.10.2 from Google.</p> <p>Then I'm trying to use jQuery to set a click event on #menu which will toggle #navigation. This is what my current code looks like:</p> <pre><code>$(document).ready(function() { $.fn.slideFadeToggle = function(speed, easing, callback) { return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); }; $('#menu').click(function () { $('#navigation').slideFadeToggle(); }); $(window).resize(function () { if(window.innerWidth &gt; 500) { $("#navigation").removeAttr("style"); } }); }); </code></pre> <p>I feel like I'm obviously doing something wrong but I can't figure out what it is. Any help would be greatly appreciated.</p> <p>It doesn't seem to be the fault of slideFadeToggle, I have tried without it with no change. I have tried a bunch of different versions of jQuery, no change there either. I have made sure javascript is allowed on the phone.</p> <p>The actual website can be found here: <a href="http://www.bridgeport.net.au/new/index.html" rel="nofollow">http://www.bridgeport.net.au/new/index.html</a></p> <p>You can see there is some animation with the header and captions and the image will cycle through a few. I'm finding that IOS devices (I haven't been able to test on Android so far) aren't running any of these animations either.</p> <p>Everything works perfectly fine on a desktop when you resize the window but something isn't working right on a phone. Even the caption fonts on the home page are different on a phone and they are google web fonts using @import in the css like so:</p> <pre><code>@import url(http://fonts.googleapis.com/css?family=Raleway:200|Josefin+Slab:400italic); </code></pre> <p>I was thinking it was a problem with the hosting server until I made the jsFiddle page and found the same problems. Now I'm stumped.</p> <p>Edit: I just tested it on an iphone 5 with IOS7 and found it is doing the same thing.</p> <p>Edit 2: I realised that the jQuery I was using wasn't taking into account touch events so I changed to click function to:</p> <pre><code>$('#menu').on('touchstart click', function(){ $('#navigation').slideFadeToggle(); }); </code></pre> <p>And added in cursor: pointer; to #menu as per some suggestions I found around stack overflow.</p> <p>Still no change as far as I can tell. New fiddle can be found here: <a href="http://jsfiddle.net/Amp3rsand/s9Hpa/14/" rel="nofollow">http://jsfiddle.net/Amp3rsand/s9Hpa/14/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAmpersand
    1. USAmpersand
    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. This table or related slice is empty.
 

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