Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Using jQuery Plugins Using a jQuery Carousel Explore Carousel Settings

Posted by Faddah Wolf
Faddah Wolf
12,811 Points

in Using jQuery Plugins => Carousel, carousel plugin has major conflict with sticky & animsition plugins

hi Dave McFarland & all,

not so much a question as a notification ā€” i've tested this on mac os x 10.11.3 el capitan with all the latest updates and browsers, and in the latest Chrome, Safari & Firefox browser. in all these latest browsers for mac os x, there is a massive conflict between the carousel and the sticky and animsition jQuery plugins.

on the front index.html page, if you attempt to scroll down, with all the code in html, css & javascript done as you had indicated for carousel, sticky & animsition, you no longer get the sticky navbar plug-in effect; instead, the browser window bounces up & down very shakily & the animstion effect on the text as if you had just scrolled all the way back up to the top and the different text selectors in that nav bar look weird at that point.

on the work.html, even though all the code and css is still there for sticky.js, the sticky divs no longer work once the carousel plug-in code is also in.

just thought you'd want to know this. i will also send a note to dave & treehouse support on this.

best,

ā€” faddah

 portland, oregon, u.s.a.

2 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Faddah Wolf,

I've tested the finished files from the course in El Capitan on Chrome, Safari and Firefox. I'm not seeing the same problems that you list above. I did find a problem with the sticky nav in Safari. That bug was related to CSS. The fix for that is to open the main.css file and change this rule:

.header { background-color: white; transition: 1s; }

to this:

.header { background-color: white; transition: background 1s; }

Adding background to the transition property solves the weird display stuff in Safari. Safari was trying to animate a bunch of CSS properties that shouldn't be animated.

Can you share the files where you are seeing the problem? You could take a snapshot if you're using Workspaces and share it here?

Faddah Wolf
Faddah Wolf
12,811 Points
Faddah Wolf
Faddah Wolf
12,811 Points

hi Dave McFarland & treehouse folk,

whoops! my bad. although some of the behavior i describe is still true, you, dave, resolved this two videos later with showing how to resolve conflicts in the jQuery plug-ins with z-order.

sorry! my bad! guess i should just learn patience.

ignore this and close it out, unless you can resolve some of the other things i mention.

best,

ā€” faddah wolf portland, oregon, u.s.a.

Faddah Wolf
Faddah Wolf
12,811 Points

oh, and Dave McFarland, you are right ā€” that CSS code fixed the sticky.js nav bar problem, though on the main home index.html page, if you have the browser window height at maxium on your screen so all of the page is visible and then try to scroll down, you get a weird shakiness in the window as if it is trying but not succeeding to start the sticky code. maybe just a quirk of sticky.js? in any case, than you much for all the kind help.

best,

ā€” faddah wolf 

portland, oregon, u.s.a.