Forums

chezhenry

I posted this in comments on the AnythingSlider page. Need help as I cannot find any solution. Live sample online at http://www.mymacwizard.com/test/web_portfolio.html
------
I created my own “lower third” for my website in development. Everything looks fine in Firefox. In Safari, text from the second slide shows up in the first, etc. See code and screenshots at -

http://web.mac.com/chezhenry/anythingslider/

Must be a webkit problem traversing the DOM or with the elements array from JQuery. Any ideas?

cybershot

it's not the html that runs the slider. You need to post the code.

chezhenry

That would be the code from the anythingslider.js http://css-tricks.com/anythingslider-jquery-plugin/ script from this site. The javascript code in the head section is copy and paste from Chris's examples but here it is. All is viewable in live sample on first post.

<script type=\"text/javascript\">

    function formatText(index, panel) {
	  return index + \"\";
    }

    $(function () {
    
        $('.anythingSlider').anythingSlider({
            easing: \"easeInOutExpo\",        // Anything other than \"linear\" or \"swing\" requires the easing plugin
            autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
            delay: 5000,                    // How long between slide transitions in AutoPlay mode
            startStopped: false,            // If autoPlay is on, this can force it to start stopped
            animationTime: 600,             // How long the slide transition takes
            hashTags: true,                 // Should links change the hashtag in the URL?
            buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
    		pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
    		startText: \"Go\",             // Start text
	        stopText: \"Stop\",               // Stop text
	        navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
        });
        
        $(\"#slide-jump\").click(function(){
            $('.anythingSlider').anythingSlider(6);
        });
        
    });
</script>

berto

You problem is with the position of the .lower3rd element, you should set the <li> elements inside the wrapper to position:relative and the .lower3rd to position:absolute

something like this in your case


.wrapper ul li{
	position:relative;
}
.lower3rd{
	position:absolute;
	bottom:0;
        ....
}

hope that works

You can check a working demo here: http://riotortonotempo.org/ just check the css :)

treehouse : what would you like to learn today?

Forums

Anything Slider webkit error