Hello Guys,
Right my problem is, I am creating a slider where in which each element is slid (using animate width) into place.
This is how it works, the element currently displayed is give a margin-left: of 842px (same as my slider width) and then a margin-top: of 300px (height of my slider) then it will snap the margin-left to -842px thus moving it to the other side then reset the top margin to put it inline with the slider.
This works fine whilst I have position absolute on but then you can see the overflow, this system works on the fact that whatever overflows the slider will be hidden. I tried floating them but however they all come in at once.
What is the answer to this question?
JS
// JavaScript Document
jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
};
function beginSlide() {
setTimeout('slide()',10000);
}
function slide() {
var next = $("#current").next();
if( $(next).html() == null ) {
var next = $("#slider ul li:first").log("Flagged Issue");
}
$("#current").animate(
{ "margin-left": "842px" },
1000,
function() {
$(this).animate(
{"margin-top":"300px"},
1,
function() {
$(this).animate(
{"margin-left": "-842px"},
1,
function() {
$(this).animate(
{"margin-top": "0"},
1,
function() {
$(next).animate(
{ "margin-left":"0" },
1000
);
}
);
}
);
}
);
}
);
$(next).attr("id","tempCurrent");
$(".current").removeAttr("id");
$(".tempCurrent").attr("id","current");
setTimeout('slide()',10000);
}
$(document).ready(function() {
$("#current").animate( { "margin-left": "0" } , 1000 ).log("Displayed The First Element");
beginSlide();
})
HTML
<div id="slider">
<div id="current"><h3>Some Title 1</h3><p>Some Text</p></div>
<div><h3>Some Title 2</h3><p>Some Text</p></div>
<div><h3>Some Title 3</h3><p>Some Text</p></div>
</div>
CSS
#content #slider {
width: 842px;
height: 300px;
background: url(../images/base/slider_background.gif);
border-bottom: solid 1px #101010;
overflow: hidden;
}
#slider div {
width: 842px;
height: 270px;
margin-left: -842px;
position: absolute;
}
Thanks.