search

CSS-Tricks / AnythingSlider

A jQuery Slider plugin for anything.
http://css-tricks.github.io/AnythingSlider/
GNU Lesser General Public License v3.0
1.15k stars 380 forks source link

Slider breaks when there is a re-calculation of browser width #629

Closed MichaelSteenC closed 9 years ago

MichaelSteenC commented 10 years ago

Hi I'm having a problem with the slider. It keeps disappears when the jquery code re-calculate the window width. Can you help me find the problem. It's in a umbraco installation. Please try to change the browser size on the site: http://tinyurl.com/ktvdd6m In firebug I can see that the width is changing to letters and numbers...

Mottie commented 10 years ago

Hi @MichaelSteenC!

Instead of updating the slider everytime the browser window is resized, try this code instead (demo)

CSS

.wrapper {
    width: 90%;
    height: 200px;
    margin: 0 auto;
}

HTML

<div class="wrapper">
    <ul id="slider">
        ...
    </ul>
</div>

Script

$('#slider').anythingSlider({
    theme: 'default',
    // If true, the entire slider will expand to fit the parent element
    expand: true,
    // If true, solitary images/objects in the panel will expand to
    // fit the viewport
    resizeContents: true
});
MichaelSteenC commented 10 years ago

Hi @Mottie Thank you for your quick reply. The only one that wasn't set right was expand. Changed it but still no solution. It's odd. When I am having firebug enabled sometimes when I reload the page there is no problem. When disable the firebug and reload the problem reappears.

Mottie commented 10 years ago

Did you remove the code to update AnythingSlider during a window resize?

MichaelSteenC commented 10 years ago

No I don't think so.. I haven't touched the code at all. Is there a way, where I can find out if it has been moved?

I have pasted all the code from the anythingslider.js file. Hope that maybe you can find the resize problem.

Mottie commented 10 years ago

I still see this code in the functions.js file:

//////////// Because the sliders don't resize automatically, refresh page on resize
// ...on second thought, let's not do that, it is a silly idea.
// let's instead update the slider, so it gets the right size again.. /hartfelt
$(window).bind('resize',function(){
    //window.location.href = window.location.href;
    $('#headline_slider').anythingSlider();
});
MichaelSteenC commented 10 years ago

Sorry. Did not see that in the functions.js. Removed it and it now seems to work. I really appreciate your help. One more thing. It seems that there still is a problem on iOS. I haven't checked other mobile OS. Do you know if there are any solutions of fixing the issue on mobile?

Mottie commented 10 years ago

Can you describe the issue on iOS? I don't own any Apple devices, so there is no way for me to test or even look for a problem. Is it just in Safari? If so, then I definitely can't help... Safari isn't even available for Windows anymore.

MichaelSteenC commented 10 years ago

When I'm loading the page, the only thing that is showing in the slider area, is the background color. When I push the navigation button I can see that the content is loaded, but it slides out in 0.2 seconds to the left. It is the same problem in the chrome browser for iOS. It all seems to work on the desktop versions.

MichaelSteenC commented 10 years ago

I did check the Safari browser, and it seems that it still has a problem, but not Firefox and Chrome. So maybe it is a Safari issue now. But sometimes it seems to work find.

MichaelSteenC commented 10 years ago

Did some more testing. The site load perfectly, when I'm type in the address for the website. When I'm then reloading the page, the slider content disappears. Only in Safari in mac and iOS. Understandable if you can't help any further. Great help otherwise. Thank you.

Mottie commented 10 years ago

Honestly, we haven't updated this slider in over a year. There are a bunch of fully responsive sliders out there that are made to work on mobile & iOS devices. And some use really cool css transitions.

Maybe some day I'll get around to updating the plugin to use built-in css transitions and other cool stuff.

MichaelSteenC commented 10 years ago

That's alright. The one who build this website was not doing a great job with the syntax on the website. It was impossible for Google to read it, so I'm just fixing what can be fixed on the website. I'm quite surprised that your slider working so well in Umbraco. It's a shame that there is a problem in Safari, but for now it's okay. Actually a lot of other sliders that has been updated recently is having the same issue with Safari, so your slider is still usable to many. Thank you again for your time and effort :+1: