Scrolling Image/Text Content
I'm sure we're doing something wrong here, but I have no idea what it is. We're attempting to place the code below in a custom content section to create a scrolling text area inside an image. When we save, the first section of text shows up correctly but the additional text areas don't ever show up. When analyzing the page the subsequent divs (b, c, d, e, etc) all show up vertically down the page so when the scroll occurs they are off the page. Any ideas on what could be causing this and any ideas to make this work would be greatly appreciated.
<html>
<head>
<style>
.mask {
position: absolute;
left: 31px;
top: 35px;
width: 356px;
height: 205px;
overflow: hidden;
}
.canvas {
position: relative;
width: 2195;
height: 205px;
}
.page {
width: 356px;
height: 205px;
float:left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $canvas
$(function(){
$canvas=$("div.canvas")
setInterval(scroll, 5000);
});
function scroll(){
if ($canvas.position().left!=-1424){
$canvas.animate({left: "-=356"});
}else{
$canvas.animate({left: 0});
}
}
</script>
</head>
<body>
<p><img src="url to img">
</p>
<div class="mask">
<div class="canvas">
<div class="page">a</div>
<div class="page">b</div>
<div class="page">c</div>
<div class="page">d</div>
<div class="page">e</div>
</div>
</div>
<div>
<div>
</div>
</div>
</body>
</html>
