är det någon duktig som har lust att ta en titt på scriptet?
det är alltså javascriptet som den inte verkar fatta. och css:en också, trots att jag kör i strict mode.
varker inte gå att ladda upp filer här så jag klistrar in hela koden:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>scroller</title>
<style type="text/css" media="screen">
/* <![CDATA[ */
* { margin: 0; padding: 0; }
body {
font: 76%/1.3em Helvetica, Arial, sans-serif;
color: #000;
background-color: #fff;
}
#scroller {
position: relative;
float: none;
width: 740px;
height: 140px;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
}
#scroller #left,
#scroller #right {
position: absolute;
top: 0; bottom: 0;
width: 25px;
color: #ddd;
background-color: #aaa;
font-size: 2em;
line-height: 140px;
text-align: center;
text-decoration: none;
z-index: 100;
}
#scroller #left {
left: 0;
}
#scroller #right {
right: 0;
}
#scroller #left:hover,
#scroller #right:hover {
color: #fff;
background-color: #ccc;
}
#scroller #scrollerContent {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
height: 140px;
z-index: 1;
}
#scroller .scrollerItem {
float: left;
margin: 0 25px;
width: 690px;
}
/* ]]> */
</style>
<script type="text/javascript">
var moving = false;
function moveContent ( goal ) {
var content = document.getElementById( "scrollerContent" );
var left = new Number( content.style.left.substr( 0, content.style.left.length - 2 ) );
if ( goal < left && left < goal+1 ) {
moving = false;
content.style.left = goal + "px";
clearInterval(moveInterval);
return;
} else if (goal > left && left > goal-1 ) {
moving = false;
content.style.left = goal + "px";
clearInterval(moveInterval);
return;
} else {
newLeft = left + ( ( goal - left ) / 8 );
content.style.left = newLeft + "px";
}
}
function scrollLeft () {
var content = document.getElementById( "scrollerContent" );
var left = new Number( content.style.left.substr( 0, content.style.left.length-2 ) );
var width = new Number( content.style.width.substr( 0, content.style.width.length-2 ) );
if ( left == ( width + 740 - ( width * 2 ) ) || moving == true ) {
return;
} else {
moving = true;
goal = left - 740;
moveInterval = setInterval('moveContent(' + goal + ')', 15);
}
}
function scrollRight () {
var content = document.getElementById( "scrollerContent" );
var left = new Number( content.style.left.substr( 0, content.style.left.length - 2 ) );
var width = new Number( content.style.width.substr( 0, content.style.width.length - 2 ) );
if ( left == 0 || moving == true) {
return;
} else {
moving = true;
goal = left + 740;
moveInterval = setInterval( 'moveContent( ' + goal + ' )', 15 );
}
}
function scrollerWidth () {
var content = document.getElementById( "scrollerContent" );
var items = 0;
var divs = content.getElementsByTagName( "DIV" );
for ( var i=0; i<divs.length; i++ ) {
if ( divs[i].className == "scrollerItem" )
items++;
}
return 740 * items;
}
function init () {
var content = document.getElementById( "scrollerContent" );
content.style.width = scrollerWidth() + "px";
}
window.onload = init;
</script>
</head>
<body>
<div id="scroller">
<a href="javascript:scrollLeft();" title="Vänster" id="left">«</a>
<a href="javascript:scrollRight();" title="Höger" id="right">»</a>
<div id="scrollerContent">
<div class="scrollerItem">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed pulvinar. Suspendisse potenti. Proin imperdiet aliquet urna. Nunc scelerisque gravida nisl.</p>
</div>
<div class="scrollerItem">
<p>Proin lorem odio, accumsan et, suscipit vitae, consequat nec, erat. Fusce condimentum odio non dolor. Aenean erat. Quisque dignissim orci ut risus.</p>
</div>
<div class="scrollerItem">
<p>Maecenas aliquet enim. Aenean lorem. Integer fringilla, risus a adipiscing tempor, libero ipsum molestie tortor, eget bibendum libero odio vel dolor. Donec imperdiet sem at dolor. Fusce commodo orci ac enim. Mauris sit amet purus.</p>
</div>
</div>
</div>
</body>
</html>
