js - css og IE
Jeg har på min side et billede slideshow som indeholder tekst og et billede det er lavet i div og skiftes via js men i IE viser den alle efter hinanden.Hvor den kun skal vise en af gangen.
IE viser:
http://line-web.dk/js_fejl/ie.jpg
Firefox viser:
http://line-web.dk/js_fejl/ff.jpg
Google Chrome viser:
http://line-web.dk/js_fejl/gc.jpg
Og ingen af browser'ne vil vise mig sidens baggrund.
Men en af mine kammerater siger at han kan se den.
Dette er mit slideshow:
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/startstop-slider.js"></script>
<div id="page-wrap">
<div id="slider">
<div id="mover">
<div id="slide-1" class="slide">
<a href="product_info.php?products_id=46"><h1>Stikprop u/jord</h1></a>
<p>Helt almindelig stikrop til montering på lampeledning.</p>
<h2>kr. 8,50,-</h2>
<a href="product_info.php?products_id=46"><img src="images/4051.png" alt="learn more" /></a>
<a href="product_info.php?products_id=46"><img src="images/slide-image.png" alt="learn more" /></a>
</div>
<div class="slide">
<a href="product_info.php?products_id=45"><h1>Vinkelstikprop m/jord</h1></a>
<p>Stikprop med jordbeskyttelse. Ledningsafgangen er vinklet nedad.
</p>
<h2>kr. 42,50,-</h2>
<a href="product_info.php?products_id=45"><img src="images/4055.png" alt="learn more" /></a>
<a href="product_info.php?products_id=45"><img src="images/slide-image.png" alt="learn more" /></a>
</div>
<div class="slide">
<a href="product_info.php?products_id=47"><h1>PKAJ plastkabel 3x1,5</h1></a>
<p>Blød plastkabel. Må ikke bruges til faste installationer. Max: 13A</p>
<h2>kr. 9,50,-</h2>
<a href="product_info.php?products_id=47"><img src="images/8306.png" alt="learn more" /></a>
<a href="product_info.php?products_id=47"><img src="images/slide-image.png" alt="learn more" /></a>
</div>
</div>
</div>
</div>
Del af min css:
BODY { background: #cccccc;
background-image: url('images/bg.gif');
color: #000000;
margin: 0px;
}
#page-wrap { background: white;
width: 530px;
height: 213px;
margin: 0 auto;
}
#slider { background: white url(images/p.png);
height: 213px;
overflow: hidden;
position: relative;
margin: 0px 0;
}
#mover { width: 2880px;
position: relative;
}
.slide { padding: 10px 10px;
width: 650px;
float: left;
position: relative;
}
.slide h1 { font-family: Helvetica, Sans-Serif;
font-size: 30px;
letter-spacing: -1px;
color: #ac0000;
z-index: 800;
}
.slide p { color: #999;
font-size: 12px;
line-height: 20px;
width: 200px;
}
.slide img { position: absolute;
top: 40px;
right: 200px;
}
.slide h2 { text-decoration: underline;
position: absolute;
bottom: -90px;
right: 360px;
font-family: Helvetica, Sans-Serif;
font-size: 30px;
letter-spacing: -1px;
color: #ffffff;
z-index: 700;
}
#slider-stopper { position: absolute;
top: 1px;
right: 20px;
background: #ac0000;
color: white;
padding: 3px 8px;
font-size: 10px;
text-transform: uppercase;
z-index: 1000;
}
.logo_png { position: absolute;
top: 50px;
left: 360px;
}
js filen 'startstop-slider.js':
var delayLength = 4000;
function doMove(panelWidth, tooFar) {
var leftValue = $("#mover").css("left");
// Fix for IE
if (leftValue == "auto") { leftValue = 0; };
var movement = parseFloat(leftValue, 10) - panelWidth;
if (movement == tooFar) {
$(".slide img").animate({
"top": -200
}, function() {
$("#mover").animate({
"left": 0
}, function() {
$(".slide img").animate({
"top": 20
});
});
});
}
else {
$(".slide img").animate({
"top": -200
}, function() {
$("#mover").animate({
"left": movement
}, function() {
$(".slide img").animate({
"top": 20
});
});
});
}
}
$(function(){
var $slide1 = $("#slide-1");
var panelWidth = $slide1.css("width");
var panelPaddingLeft = $slide1.css("paddingLeft");
var panelPaddingRight = $slide1.css("paddingRight");
panelWidth = parseFloat(panelWidth, 10);
panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
panelPaddingRight = parseFloat(panelPaddingRight, 10);
panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;
var numPanels = $(".slide").length;
var tooFar = -(panelWidth * numPanels);
var totalMoverwidth = numPanels * panelWidth;
$("#mover").css("width", totalMoverwidth);
$("#slider").append('<a href="#" id="slider-stopper">Stop</a>');
sliderIntervalID = setInterval(function(){
doMove(panelWidth, tooFar);
}, delayLength);
$("#slider-stopper").click(function(){
if ($(this).text() == "Stop") {
clearInterval(sliderIntervalID);
$(this).text("Start");
}
else {
sliderIntervalID = setInterval(function(){
doMove(panelWidth, tooFar);
}, delayLength);
$(this).text("Stop");
}
});
});
