Grow your CSS skills. Land your dream job.

Anythingslider adds odd behavior to page scrolling. js conflict?

  • # January 19, 2013 at 4:35 am

    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](http://ddd.mrtwebdesign.com “StagingServer”)

    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

    # January 19, 2013 at 9:00 am

    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](https://github.com/CSS-Tricks/AnythingSlider/issues/479) 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.

    # January 19, 2013 at 2:16 pm

    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

    # January 24, 2013 at 11:35 am

    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

    # January 24, 2013 at 12:35 pm

    Sorry I couldn’t be more helpful =(… Have you looked at [flexslider](http://www.woothemes.com/flexslider/)? It looks pretty good.

    # January 24, 2013 at 2:42 pm

    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

    # February 25, 2013 at 1:28 pm

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

    # February 25, 2013 at 1:36 pm

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

    # February 25, 2013 at 1:38 pm

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

    # September 11, 2013 at 10:16 am

    I have run into this problem myself using Twitter Bootstrap 3.0, Anything Slider 1.8 and Chrome, but I found that the problem only existed when I set the expand option to true.

    # February 10, 2014 at 5:33 pm

    I am having the same problem. I have a pretty complicated setup that is a little beyond my control, so I am not at all surprised that there could be some conflicts happening.

    The only thing that I can figure so far is that when expand is set to true on the second slider on the page the scroll at the bottom jumps. When expand is set to false the jumping does not happen.

    It seems to be effecting all browsers (on OSX as least).

    I will post back here if I come up with an answer.

    # February 20, 2014 at 3:50 pm

    Unfortunately, I also couldn’t track this one down, so I switched to a different slider…

    http://bxslider.com/

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".