Hey all, i am trying my best to figure out another way around this problem i seem to have encountered. On my website i have a jquery calendar and also a jquery
div tab slider (this: http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html).
The problem comes into play with the
DIV tag. The calender loads up inside a
DIV with a id of 'calender'. The CSS for the tabs have the
DIV hidden:
CSS:
.boxBody
div {display:none;}
.boxBody
div.show {display:block;}
.boxBody #category a {display:block;}
And because of that, the calender never shows on the page. However, if i comment out that css code above, it shows up but does not cover each section as it should. In other words, everything is shown when it should be hidden until the tabs are clicked on to revel it.
code:
<script type="text/javascript">
$(document).ready(function() {
$('#tabMenu > li').click(function(){
$('#tabMenu > li').removeClass('selected');
$(this).addClass('selected');
$('.boxBody
div').slideUp('1500');
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
}).mouseover(function() {
$(this).addClass('mouseover');
$(this).removeClass('mouseout');
}).mouseout(function() {
$(this).addClass('mouseout');
$(this).removeClass('mouseover');
});
$('.boxBody #category li').mouseover(function() {
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});
$('.boxBody li').click(function(){
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});
});
</script>
<div align="center">
<div class="Mainbox">
<ul id="tabMenu">
<div id="theLogo"><[img] src="img/theLogo.png" width="415" height="146" /></div>
<li class="stats"><[img] src="img/Stats.png" width="70" height="52" id="tab1" /></li>
<li class="cal"><[img] src="img/cal.png" width="70" height="52" id="tab2" /></li>
<li class="loyalty"><[img] src="img/Loyalty.png" width="70" height="52" id="tab3" /></li>
<li class="Employees"><[img] src="img/Employees.png" width="70" height="52" id="tab4" /></li>
<li class="txtemail"><[img] src="img/TxtEmail.png" width="70" height="52" id="tab5" /></li>
</ul>
<div class="boxTop"></div>
<div class="boxBody">
<div id="stats" class="show">
Just a test here....
</div>
<div id="cal">
<div id='calendar'></div>
</div>
<div class="boxBottom"></div>
</div>
</div>
How can i change the tab javascript code so that it does not have to hide the
DIV's so that the calendar will work? I've tried to replace all
div's with 'span' or 'p' but that does not seem to work at all.
Any help would be great as i am stuck on this and can not go any further without it being solved! :)
David
