Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Disabling certain classes on touch devices

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.


This is not necessarily question for this theme, but since I am using it for my project, maybe there is a theme specific solution.

I have made a test page which you can see at:

When you hover over a picture it shows full resolution image. When you click on the image it opens a gallery. I need to work on styling still, but it works as I want it!

Problems arise when you try to browse on touch based device. Since there is no mouse pointer, there is no hover, so first click on the photo simulate hover and I get this large image that is not responsive and the effect is simply not suitable for touch device.

This is a code example for one image:
<div class="image"><a class="jcepopup icon-bottom-left preview" type="image" href="images/bep/clusters/motorised/80-700-0047-00.jpg" rel="/images/bep/clusters/motorised/80-700-0047-00.jpg group[motclusters];title[80-700-0047-00]" target="_blank"><img class="border" src="/scripts/timthumb.php?src=/images/bep/clusters/motorised/80-700-0047-00_medium.jpg&amp;h=240&amp;w=366&amp;zc=1" alt="80-700-0047-00" width="auto" height="auto" /></a>

If I remove class "preview", than the hover effect is not loaded.
I would like to know is it possible to automatically stop "preview" class from loading when touch based device is detected.
Or it could be the other way around, don't load "preview" class unless there is a mouse pointer detected. This might work better, since there are now hybrid Windows 8 computers. For the same reason I would like to avoid resolution based detection.

I have tried searching the web and found some JS and similar solutions that seem complicated to me, because I don't really know how to implement them.

Since this is a reposnsive template, I was wondering is there some kind detection built into the framework that could be easier to implement.
  • jarusica's Avatar
  • jarusica
  • 12 Month Developer
  • 20 posts
  • Karma: 0
The administrator has disabled public write access.
The only option available via the framework work is the option to add a class to a module suffix to hide the module on certain screen widths

I'll ask a developer when they are available if they have any more input

  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers