Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Stop javascript function on mobile devices

10:00 am on May 10, 2013 (gmt 0)

5+ Year Member

I would like to use the sticky footer bar [dynamicdrive.com...] on my website.

It works on all browsers, but looks awful on an iPad.
How can I detect iPad, iPod and Iphone and automatically disable expstickybar.js on those devices?
6:48 pm on May 10, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

How can I detect

Lots of ways. But if you're already using a process that requires js, may as well put the UA detection into the same function. If the user doesn't have js, no point in even checking.

Now, what about other mobiles? You'd want to screen out androids and so on too wouldn't you?

Alternative approach: Can you code it to detect mouse-hovers that are not clicks? This alone might make the mobiles problem go away. In a browser, a click is always preceded by a hover. In a tablet, there's only one mouse event. (Talking here about vanilla html, not custom-written apps.)
10:41 am on May 11, 2013 (gmt 0)

5+ Year Member

I thought that fixed position was not supported by iPads, iPods and iPhones only. But, yes, maybe it is better to exclude all mobile devices.

The problem is that I am a javascript dummy and don't know how to write the code to detect mobile devices and disable a certain script.
7:36 pm on May 11, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Oh, oops, you're thinking about position. I thought you were concerned about the opened-out navigation bar taking up too much real estate. So I was thinking only of disabling the popup element.

I don't have the exact UA-detection formula at my fingertips, but it's quite basic; you can find it anywhere, down to and including w3schools.

It's not really a matter of "disabling" a script. You'd be adding one nest to the structure:

if (action is mouse-hover)
if (user-agent is on this short list-- or is NOT on this other short list, whichever is convenient and appropriate)
carry on with the function.

Menu activation is something that typically happens more than once on a page, let alone more than once on a site, so you probably don't want to check the UA every time. Check once and set either a global variable or a cookie, depending on how long you want it to last.

:: detour here to do what I should have done in the first place: check the actual link with an iPad ::

There's a preliminary hiccup where the navigation footer expands and drifts upward as I scroll, but as soon as I "click" it collapses and stays at the bottom. There may be a glitch in the way your source site detects user-agents. But, hey, nothing wrong with writing code that's better than the original ;)

Featured Threads

Hot Threads This Week

Hot Threads This Month