treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Anythingslider adds odd behavior to page scrolling. js conflict?

  • This one is probably going to be for Mottie. I have Anythingslider installed in a custom WordPress theme. I'm starting with _s theme from Automattic and Twitter Bootstrap 2.2.2 I just upgraded Anythingslider to 1.8.13 so I'm using the latest build.

    http://ddd.mrtwebdesign.com

    When I scroll down to the bottom.. the page pops back up a little bit and I'm not sure why. I'm not seeing any errors. I haven't been able to find anything in the css that does it. If I delete the HTML node of the "anythingSlider" classed div, the problem goes away. I'm sure it could be some odd conflict or something I did. I'm just not experienced enough to recognize the behavior. Thanks, -Matthew

  • Hmm, I couldn't tell you what the problem might be off the top of my head. Does this occur in all browsers? Or, let me guess just IE8?... I had a recent issue opened about bouncing occurring in IE8, it was due to a float not being cleared. Other than that I'd have to see the slider in situ to figure out the problem - the link above just tells me it's coming soon.

  • Sorry.. I thought I turned off "under construction". Try it now. And it appears to 'jump' in all browsers. An issue with clearing makes sense. When I have time to work on it this weekend I'll try clearing a bunch of things and see if I can get it to stop jumping. If I come up with a solution I'll document it. If it's something I can add to AnythingSlider I'll send you a pull request in github. Based on the distance it's jumping, I bet it's a issue with Bootstrap layout. Thanks! -Matthew

  • I was hoping I could figure it out. But It's a bit over my head. I tried adding a clearfix class to different levels in the DOM from html to the anythingSlider classed div. I also tried to simplify the problem by deleting DOM nodes in the AnythingSlider until the jumping went away. I found out was the jumping of the page stopped when I either removed the div for the anythingSlider class or stopped the javascript for the page.

    For now I think I may just replace the AnythingSlider with another slider for this project. -Matthew

  • Sorry I couldn't be more helpful =(... Have you looked at flexslider? It looks pretty good.

  • Hey.. thanks for trying! Your help was crucial in integrating AnythingSlider into my WordPress theme about a year ago. I've got a lot of things interacting here. The _s theme and Bootstrap overlap some css functionality. It's an edge case. I'm going to stick to AnythingSlider when I can because I know it best and I like the development and support on it. I'll try flexslider for this project. Thanks for the tip. No point in beating my head against a wall when I can just swap out another slider. -Matthew

  • I have exactly the same issue is it the bootstrap slider causing that?

  • If you look at Bootstrap page and resize your window the issue exists aswell.

  • btw it only occurs in FF(windows version) and IE, ofc chrome is working just fine