TouchSwipe failing silently with no errors

[FrankEBailey]

Hi, I hate opening issues in the Github issue area because this is likely not a problem with the plugin at all but probably something stupid I'm doing. I've added TouchSwipe to one of my pages and it doesn't throw any errors, it just doesn't work at all. Would you mind taking a look and telling me if there's anything obvious that you can see that I'm doing wrong, not doing or otherwise fowling up?

http://dev.creativeseed.co.za/blackelephant/buy-our-wines/

The swipe is enabled only for screen widths bellow 960 and over 480.

Thanks so much!

[mattbryson]

Hi,

Ive had a quick look at your code and there are a few things going on.

Firstly, you are applying touch swipe to 3 DOM elements on line 209, but at that point in you code those items do not exist in the DOM.

You insert those items into the DOM later in you code based on the width of the screen.

So when you try to apply the touchSwipe plugin, JQ finds nothing to apply it to.

Secondly, you code is only running on window load - if the user then resizes the page it will not responsively update the DOM. So loading the page at over 960 and then resizing it down will not update your content.

To get TouchSwipe working, you need to add it AFTER you have inserted those items into the DOM

Try moving it to after you switch statement, around line 354.

As a bit of unrelated advice, have you looked at CSS media queries? Its a very easy way to define CSS rules based on the current width of the viewport, and they update as the user resizes the page..

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

You could then move most of your code that builds HTML with widths and heights in it into some CSS.

And where you have things like .

onclick="jQuery(\'.all-wrapper\').animate({ \'marginLeft\': -'+sceneWidth*(g-1)+'});"

You could make a function that does that for you, and just call the function from the HTML, rather than re declaring the logic over and over.

onclick="slideAllWrapper()

and then in JS

function slideAllWrapper() { // here work out your sceneWidth var sceneWidth = {SOME LOGIC} jQuery('.all-wrapper').animate({ 'marginLeft': -sceneWidth}); }

m