Hi everyone,

 

I've got sort of a strange problem. I'm trying to make a 300px width window (.container with overflow: hidden;), which shows the selected colored block. Whenever a link inside a colored block is clicked, the anchor should slide a colored block, which is outside the container because of absolute positioning inside the .container.

 

When overflow:hidden is turned off, everything seems to be working good. But whenever it is turned on, the positions of the absolute blocks seem to be going all crazy?

 

With the code it all should become a little be more clear. An example an be found at: http://abovetherim.nl/slide.html (this is WITH overflow: hidden).

 

Javascript (jQuery)

<script type="text/javascript">
$(document).ready(function(){	

$('.title').click(function(){

	var targetClick = $(this).attr('href');
	var curEl = $(this).parent();	

if ($(targetClick).css('left') === '0px') {
   	$(curEl).animate({left: '300px'}, 'slow');

   	$(targetClick).animate({left: '0px'}, 'slow');
	}

if ($(targetClick).css('left') === '300px') {		
	$(curEl).animate({left: '-300px'}, 'slow');

	$(targetClick).animate({left: '0px'}, 'slow');
   		}

if ($(targetClick).css('left') === '-300px') {
	$(curEl).animate({left: '300px'}, 'slow');

	$(targetClick).animate({left: '0px'}, 'slow');
		}

}); //end click
}); //end script
</script>

 

CSS

.container{
position: relative; 
width: 300px; 
height: 300px; 
margin: 0 auto; 
overflow: hidden;
}
.screen{
	position: absolute; 
	left:0; 
	top:0; 
	width: 300px; 
	height: 300px; 
	z-index: 0;
	}
	.green{background: green;}
	.red{background: red;}
	.yellow{background: yellow;}

 

HTML

<div class="container">
<article class="screen red" id="red">
	<a href="#green" class="title">become green!</a>
</article>

<article class="screen yellow" id="yellow">
	<a href="#red" class="title">become red!</a>
</article>

<article class="screen green" id="green">
	<a href="#yellow" class="title">become yellow!</a>
</article>
</div>

 

So why doesn't this work. I am obviously doing something wrong?

Edited April 11, 201214 yr by SamP

http://jsfiddle.net/aY8MB/

 

Your code works fine on JSfiddle. Have you got a link to the actual page you're using?

http://jsfiddle.net/aY8MB/

 

Your code works fine on JSfiddle. Have you got a link to the actual page you're using?

 

It works untill we go green again. After three clicks, it all goes wrong

 

http://abovetherim.nl/slide.html - This is the page i'm using. It's a proof of concept for a little application i'm building.

Edited April 11, 201214 yr by SamP

He guys,

 

I just figured it out. All I had to do was add:

 

e.preventDefault();

 

Still don't understand exactly why it was going all crazy?