Responsive Horizontal Page Scroll
Hi there,
I have a really frustrating issue right now. Building my site in plain html, everything works fine with the combination of scripts I'm using - mostly (more on that in a minute). I started from a tutorial at Tympanus (
Responsive Horizontal Page Scroll). However, the tutorial was written in 2012, and the demo files are fairly old. Ok, this was fine in the raw html version of things, but since I'm using Bootstrap as well, the old version of jquery wasn't compatible. If I only called the most recent, then the page scrolling stuff wouldn't work anymore. If I only called the one from the demo, then the bootstrap carousels didn't work anymore. So I was calling both. Obviously not ideal.
Ok, fast forward...I got all of that working nicely in html. And I started converting it to a WordPress theme. Mostly went well, and up until last night, it was all working great in FF, Chrome, and Safari! YAY! I have NO idea what I did this morning to break it all :( And I've tried rebuilding it all again from scratch, enqueing the scripts again, etc. It just doesn't work right in ANY of the browsers now! WTF?
I hesitate to include dev URLs, but what the hey.
Here's the raw html version of what I had going on:
html version
Here's the WP version:
WP version
As you can see from the html version, not only should I be able to be clicking on the menu item on the left to scroll to the next pane, but I should also be able to click in the partially-revealed pane on the right to bring it to the active state.
Here's where I suspect the problem lays, but I have no clue how to fix it because I'm really fairly new to jquery:
When I look in Console (and note that this is still with both versions of jQuery being called at once - I don't now how to fix this), I get two errors. The first is "JQMIGRATE: Migrate is installed, version 1.4.1" (and this file is not called in my functions.php). It's not a full-on error. It's only grey. The main error is:
- jquery.smartresize.js?ver=4.5.3:31 Uncaught TypeError: Cannot read property 'apply' of undefined(anonymous function) @ jquery.smartresize.js?ver=4.5.3:31
Which seems to refer to line 31 of the file, which reads:
- jQuery.event.handle.apply( context, args );
If I remove the call to the older version of jQuery, I get the following error:
- jquery.page.js?ver=4.5.3:5 Uncaught TypeError: $ is not a function(anonymous function) @ jquery.page.js?ver=4.5.3:5(anonymous function) @ jquery.page.js?ver=4.5.3:210(anonymous function) @ jquery.page.js?ver=4.5.3:214
Which links me to row 5 of page.js:
- var $container = $( '#px-container' ),
So I'm wondering if "$" is no longer used, has been deprecated. And if this is the case, how do I modify things to work with the more modern version?
I'm sorry if I'm not giving the right information. Like I said, I'm fairly new to jQuery. If you need more info, please tell me. And if I don't understand something you suggest I try, please bear with me. Sometimes I need it explained "for dummies".