JavaScript/CSS Problem

[Froger93]

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.

[luckywolf]

In the HTML syntax the div id is "current" and in the CSS the div id is listed as #content. I think you need to either change the HTML to "content" or the CSS to #current.

[Froger93]

There is no CSS for the #current div, the CSS provides the rules for each div and the wrapping #slider div. The JavaScript should handle the CSS therafter.

[Froger93]

Okay, I solved the problem. The resolution is to get rid of moving the objects down butr instead hide them then when they come back in show them then animate the margin to 0.

[luckywolf]

Good job

[Froger93]

Also the main thing that allowed me to do this is the second parenthasis of the toggle function.

toggle( 500 , function() { $("#current").animate( { "margin-left": "-842px" } , 1000 ); } );