Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    serie3 s3slider IE problem

    Hi everyone, I would appreciate your advice on the following problem.

    I am using the jquery s3slider plugin. It works well in FF, Chrome, Safari etc but there's a problem in IE8.

    I'll post the code but it's probably easiest to look at the site.

    http://www.teamcapital.co.nz

    As far as I'm aware the s3slider plugin is compatible with IE7 & IE8 so the problem must be with my markup or with a conflict with other scripts on the page although there is no JS error.

    If anyone can give there opinion on possible markup changes, css changes etc that might fix this I would really appreciate it.

    Relevant Code

    Full slider JavaScript here
    http://gerty.netcentric.be/scripts/s3slider.js

    Code:
    <head>
    <script type="text/javascript" src="http://www.teamcapital.co.nz/smartoptimizer/?scripts/jquery.js"></script><link id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_sslider" rel="stylesheet" type="text/css" href="http://www.teamcapital.co.nz/smartoptimizer/?css/s3slider.css"></link><script id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_slider" type="text/javascript" src="http://www.teamcapital.co.nz/smartoptimizer/?scripts/s3Slider.js"></script>
    </head>
    <body>
    <div id="home">
    <script type="text/javascript">
    $(document).ready(function() {
    $('#s3slider').s3Slider({
    timeOut: 7500
    });
    });
    </script>
    <style type="text/css">
    #s3slider
    {
    width:620px;
    height:350px;
    }
    #s3sliderContent
    {
    width:620px;
    }
    .s3sliderImage span {
    background-color:#000;
    }
    .s3sliderImage span.ctop,.s3sliderImage span.cbottom
    {
    width:594px;
    }
    .s3sliderImage span.cleft,.s3sliderImage span.cright,.s3sliderImage span.ccenter
    {
    width: 620px;
    height:330px;
    }
    .s3sliderImage span.ccenter
    {
    width: 310px;
    height:117px;
    }
    </style>
    <div id="s3slider">
    <ul id="s3sliderContent">
    <li class="s3sliderImage">
    <a href="/new-vehicles/hsv">
    <img src="/umbraco/imagegen.aspx?image=/media/5077/hsv-promo.jpg&amp;width=620&amp;height=350&amp;constrain=true" alt="HSV Advert" /></a>
    <span /></li>
    <li class="s3sliderImage">
    <a href="/new-vehicles/hsv">
    <img src="/umbraco/imagegen.aspx?image=/media/5087/hsv-advert-2.jpg&amp;width=620&amp;height=350&amp;constrain=true" alt="HSV Promo 2" /></a><span /></li>
    <li class="s3sliderImage">
    <a href="/new-vehicles/holden/barina-spark">
    <img src="/umbraco/imagegen.aspx?image=/media/4568/holden-barina-spark.jpg&amp;width=620&amp;height=350&amp;constrain=true" alt="Holden Barina Spark" /></a>
    <span class="cbottom"><b>New Barina Spark - Holden's next top model.</b><br />Practical, sleek and not just hot on the outside, but has what it takes on the inside.</span>
    </li><li class="clear s3sliderImage" />
    </ul>
    </div>
    </div>
    </body>
    Thanks for your time

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Seems fine to me on IE8. Maybe you've fixed it?

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your reply. I haven't fixed it yet however the problem only manifests when the image in the slider does not have an accompanying caption. When a caption is added it works in all browsers including IE. To work around the problem users of the site have added captions on all the images in the slider. I'll close this thread and work on the problem on the test site. I'll work out the problem myself eventually. I knew it was a long shot posting on here as no one wants to touch problems that are not well defined, specific pieces of code especially when the problem involves browser compatiblity. But I was desperate for a solution so I figured I'd give it a shot.
    Thanks again.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Hmm, well a quick test shows that if I remove the captions in the spans, it doesn't work in FF either. Then reading the plugin page it says:

    The second thing is that every .your_nameImage element in it self must have span.
    Which seems naff....what happens if you don't want captions. However....

    ...if you don't want captions at all, leave the spans empty and change this:

    Code:
    .s3sliderImage span {
    	background-color:#000;
    }
    to this:

    Code:
    .s3sliderImage span {
    	background-color:transparent;
    }
    Then the spans will be invisible. If you want captions on some and not on others, change the text colour of the span, or maybe, use a different slider.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Or, better, amend the slider js to add this:

    Code:
    var makeSlider = function() {
                current = (current != null) ? current : items[(items.length-1)];
                var currNo      = jQuery.inArray(current, items) + 1
                currNo = (currNo == items.length) ? 0 : (currNo - 1);
                if ($(itemsSpan[currNo]).html() == "")  (itemsSpan[currNo]).css({backgroundColor:'transparent'});
                var newMargin   = $(element).width() * currNo;
    So you need to leave the spans in, but if there's no content, the black background is changed to transparent so it's invisible.

    There are some very odd things in that slider js. This is my favourite:

    Code:
                } else {
                    console.log("Poof..");
                }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •