two versions of script on responsive site

[Martinthoren]

Hi.
I am looking for suggestions on best practice for a jQuery script for a responsive web.
In full screen mode it will be a horizontal list of word. When a word is clicked, the corresponding text will be visible.
When screen size reaches mobile size it shall change behavior and let the user swipe through the words.

But I can’t find out what would be the best approach, to separate versions, and toggle the display value with media queries or a script that take screen size in consideration.

Suggestions?

[Mottie]

Hi Martinthoren!

I’m not sure how you are adding swipe support, but maybe you can just detect if swipe support exists and use it if it does. It is essentially what I did in this blog post on how to add swipe support:

var touch = "ontouchend" in document,

startEvent = (touch) ? 'touchstart' : 'mousedown',

moveEvent = (touch) ? 'touchmove' : 'mousemove',

endEvent = (touch) ? 'touchend' : 'mouseup';

This detection method is from Modernizr which is a better all around method for detecting browser support.

[Author]

Posts