Jquery calendar and tab sliding div clash...
- by StealthRT
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
