serie3 s3slider IE problem

ernie99

12-07-2010, 11:34 PM

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

I am using the jquery s3slider plugin (http://www.serie3.info/s3slider/). 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

<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&width=620&height=350&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&width=620&height=350&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&width=620&height=350&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

SB65

12-08-2010, 09:58 AM

Seems fine to me on IE8. Maybe you've fixed it?

ernie99

12-08-2010, 12:11 PM

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.

SB65

12-08-2010, 01:11 PM

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:

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

to this:

.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.

SB65

12-08-2010, 02:19 PM

Or, better, amend the slider js to add this:

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:

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