10 Replies - 1483 Views - Last Post: 14 February 2013 - 06:42 AM

#1 MissPea  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 03-February 10

Hover not working with an iPad?

Posted 13 February 2013 - 08:15 AM

Hello everyone,

Once again, I am in desperate need of your help. I am working on this site that has a list and when each list item is hovered over a link appears that people an click on to access other pages. However, surprise surprise, it won't work with an iPad because I just learned that one cannot hover with an iPad. Considering that without this hover effect working, people using iPads and iPhones won't be able to access to rest of the site which is kind of a big deal.

I'm pretty sure I'm not the first one to stumble upon this problem, but I am not savvy enough to figure out how to fix it. Does anyone have any ideas?

Any help would be greatly appreciated.

Thank you!

Is This A Good Question/Topic? 0
  • +

Replies To: Hover not working with an iPad?

#2 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 9073
  • View blog
  • Posts: 34,115
  • Joined: 12-June 08

Re: Hover not working with an iPad?

Posted 13 February 2013 - 08:18 AM

Why not make what ever you are hovering over also respond to a click event that displays what ever the 'hover-over' was supposed to display?
Was This Post Helpful? 0
  • +
  • -

#3 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Hover not working with an iPad?

Posted 13 February 2013 - 10:58 AM

Like modi said, use a click event to simulate your hover action. In iOS, it translates your hover event into a double click event automatically (or so I've read), which would be undesired. Using this javascript snippet you can create an extra class that can be used on all hover links.
 
window.addEvent('domready',function() {
  $("iosClick").addEvents({
    click: function() {
      $("iosClick").addClass('over');
    }
  });
});


And of course to use it, add the id to an element
<li id="iosClick"></li>




Source: afxDesign
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,353
  • Joined: 12-December 12

Re: Hover not working with an iPad?

Posted 13 February 2013 - 11:13 AM

Note that the code in the previous post uses the MooTools framework.

@FerretHolmes I like your signature-image :)
Was This Post Helpful? 0
  • +
  • -

#5 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Hover not working with an iPad?

Posted 13 February 2013 - 11:54 AM

View Postandrewsw, on 13 February 2013 - 01:13 PM, said:

Note that the code in the previous post uses the MooTools framework.

@FerretHolmes I like your signature-image :)/>

Thanks :)
Was This Post Helpful? 0
  • +
  • -

#6 FrankC  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 45
  • Joined: 06-October 11

Re: Hover not working with an iPad?

Posted 13 February 2013 - 12:14 PM

View Postandrewsw, on 13 February 2013 - 11:13 AM, said:

Note that the code in the previous post uses the MooTools framework.

Neither MooTools nor jQuery is needed. It can be done with a very simple plain javascript, see here.
Was This Post Helpful? 0
  • +
  • -

#7 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Hover not working with an iPad?

Posted 13 February 2013 - 12:35 PM

View PostFrankC, on 13 February 2013 - 02:14 PM, said:

View Postandrewsw, on 13 February 2013 - 11:13 AM, said:

Note that the code in the previous post uses the MooTools framework.

Neither MooTools nor jQuery is needed. It can be done with a very simple plain javascript, see here.


Other than the speed increase from not using jquery, is there any other benefit to using this code rather than the mootools/jquery snippet? The jquery code is 7 lines, opposed to the 3 dozen or so it takes to achieve the same thing. Overall it seems the jquery is much easier and gives you the added bonus of being able to do much more if needed, but I am all ears if you have insight.

Incidentally while researching if jquery or javascript had any obvious advantages over each other in ios, I came across a responsive design article that said you should do away with any hover effects for mobile sites. So maybe you should take that into consideration OP, but of course it's your call.
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3354
  • View blog
  • Posts: 11,353
  • Joined: 12-December 12

Re: Hover not working with an iPad?

Posted 13 February 2013 - 12:43 PM

View PostFerretHolmes, on 13 February 2013 - 12:35 PM, said:

Other than the speed increase from not using jquery, is there any other benefit to using this code rather than the mootools/jquery snippet? The jquery code is 7 lines, opposed to the 3 dozen or so it takes to achieve the same thing. Overall it seems the jquery is much easier and gives you the added bonus of being able to do much more if needed, but I am all ears if you have insight.

It really depends if the OP is already using a framework such as jQuery or MooTools. If he is then it makes sense to use it as much as possible. Otherwise, it is unnecessary to load the whole library for something that could be achieved with some (vanilla) Javascript.
Was This Post Helpful? 0
  • +
  • -

#9 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Hover not working with an iPad?

Posted 13 February 2013 - 01:05 PM

View Postandrewsw, on 13 February 2013 - 02:43 PM, said:

View PostFerretHolmes, on 13 February 2013 - 12:35 PM, said:

Other than the speed increase from not using jquery, is there any other benefit to using this code rather than the mootools/jquery snippet? The jquery code is 7 lines, opposed to the 3 dozen or so it takes to achieve the same thing. Overall it seems the jquery is much easier and gives you the added bonus of being able to do much more if needed, but I am all ears if you have insight.

It really depends if the OP is already using a framework such as jQuery or MooTools. If he is then it makes sense to use it as much as possible. Otherwise, it is unnecessary to load the whole library for something that could be achieved with some (vanilla) Javascript.


That's reasonable.
Was This Post Helpful? 0
  • +
  • -

#10 FrankC  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 45
  • Joined: 06-October 11

Re: Hover not working with an iPad?

Posted 13 February 2013 - 06:19 PM

View PostFerretHolmes, on 13 February 2013 - 12:35 PM, said:

The jquery code is 7 lines, opposed to the 3 dozen or so it takes to achieve the same thing.

In the example I gave, there is an additional javascript to make IE6 support the hover action, which it natively does not do. And I like to write javascript so that you can easily see if the syntax is correct, which means many lines. To call that "7 lines, opposed to the 3 dozen or so" is ludicrous, because you can compress it to one line if you want.


View Postandrewsw, on 13 February 2013 - 12:43 PM, said:

It really depends if the OP is already using a framework such as jQuery or MooTools. If he is then it makes sense to use it as much as possible. Otherwise, it is unnecessary to load the whole library for something that could be achieved with some (vanilla) Javascript.

Correct. And for just this menu adaptation it would be an enormous overkill to use Query or Tools.

This post has been edited by FrankC: 13 February 2013 - 06:28 PM

Was This Post Helpful? 0
  • +
  • -

#11 MissPea  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 31
  • Joined: 03-February 10

Re: Hover not working with an iPad?

Posted 14 February 2013 - 06:42 AM

Thanks so much for all the help. While I didn't follow everything that was said, I will definitely look into all the suggestions and see which works best for me.

Thanks again!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1