Hi chaps…
I have divs that move in and out, depending on the nav clicks
The html structure:
<div id="contentContainer">
<div id="content">
<div id="home">
<div class="image"></div>
<h1> Title</h1>
<p> copy </p>
</div>// home
</div>// content
</div>// contentContainer
....and the links are simply
<a href="#home" </a> etc etc
and the js:
$('p a').each(function(){
$(this).attr('target','_blank');
});
var curLoaded = 'home';
$('#contentContainer').hide();$('#contentContainer').delay(5200);
// start by showing the about us section
$('#contentContainer').show();$('#contentContainer').animate({
left: 175
},"slow", function(){
// fade in the content
$('#' + curLoaded).fadeIn();
});
// navigation trigger
$('.mb_menu a').each(function() {
var $this = $(this)
var target = $this.attr('href').split('#')[1];
var $contentContainer = $('#contentContainer');
var oldPos = -100;
var newPos = 175;
// add a click handler to each A tag
$this.click(function(){
if ($contentContainer.css('left') == '201px') {
// trigger the animation
$contentContainer.animate({
left: newPos
},"slow", function(){
// fade in the content
$('#' + target).fadeIn();
});
} else {
if (curLoaded == target) {
$contentContainer.animate({
left: oldPos
},"fast", function(){
$('#content div').hide();
});
} else {
$contentContainer.animate({
left: oldPos
},"fast", function(){
$('#content div').hide();
$contentContainer.animate({
left: newPos
},"slow", function(){
$('#' + target).fadeIn();
});
});
}
}
curLoaded = target;
return false;
});
});
The problem is that the h1 a p tags load…however the image div isnt showing…any ideas?
Thanks in advance