Jquery calendar and tab sliding div clash…

JavaScript
1

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.


 <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! :slight_smile:

David

2

Have you tried setting the nested divs to display:block?


.boxBody div div{display:block}
3

I just tried it and it did not seem to work :frowning:

David

4

Do you have an example with the calendar in place as I didn’t see it in the link you gave?

5

http://arshaw.com/fullcalendar/

Thats the calender i am using.

David

6

This works for me but is at the limits of my JS so if it doesn’t work for you then someone else can have a go :slight_smile:

I merged the two links you gave above. (changes in bold)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tab Menu</title>
<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.js'></script>
<script type='text/javascript' src='../jquery/ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../fullcalendar.min.js'></script>
<script type="text/javascript">

$(document).ready(function() {    

    var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        
        $('#calendar').fullCalendar({
            editable: true,
            events: [
                {
                    title: 'All Day Event',
                    start: new Date(y, m, 1)
                },
                {
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d-3, 16, 0),
                    allDay: false
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d+4, 16, 0),
                    allDay: false
                },
                {
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                },
                {
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                },
                {
                    title: 'Birthday Party',
                    start: new Date(y, m, d+1, 19, 0),
                    end: new Date(y, m, d+1, 22, 30),
                    allDay: false
                },
                {
                    title: 'Click for Google',
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: 'http://google.com/'
                }
            ]
        });
  //Get all the LI from the #tabMenu UL
  $('#tabMenu > li').click(function(){
    
    //perform the actions when it's not selected
    if (!$(this).hasClass('selected')) {    
           
    //remove the selected class from all LI    
    $('#tabMenu > li').removeClass('selected');
    
    //Reassign the LI
    $(this).addClass('selected');
    
    //Hide all the DIV in .boxBody
    $('.boxBod[B]y div.hide')[/B].slideUp('1500');
    
    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
    $('.boxBo[B]dy div.hide:e[/B]q(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');
    
  }
    
  }).mouseover(function() {

    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest    
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout');   
    
  }).mouseout(function() {
    
    //Add and remove class
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');    
    
  });

    //Mouseover with animate Effect for Category menu list
  $('.boxBody #category li').click(function(){

    //Get the Anchor tag href under the LI
    window.location = $(this).children().attr('href');
  }).mouseover(function() {

    //Change background color and animate the padding
    $(this).css('backgroundColor','#888');
    $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  }).mouseout(function() {
    
    //Change background color and animate the padding
    $(this).css('backgroundColor','');
    $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  });  
    
    //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
  $('#.boxBody li').click(function(){
    window.location = $(this).children().attr('href');
  }).mouseover(function() {
    $(this).css('backgroundColor','#888');
  }).mouseout(function() {
    $(this).css('backgroundColor','');
  });      
    
});

</script>
<style>
body {
    padding-bottom:150px;
}
#ads {
    clear:both;
    position:fixed;
    z-index:1000;
    bottom:0;
    left:0;
    width:100&#37;;
    background:#e1e1e1;
    height:160px;
    border-top:1px solid #ccc;
    text-align:left;
}
#ads a.back {
    display:block;
    font-family:arial;
    font-size:11px;
    color:#333;
    padding:5px 0 0 12px;
    text-decoration:none;
}
#ads a.back:hover {
    text-decoration:underline;
}
#ads div {
    display:inline !important;
}
#ads img {
    margin-top:5px;
    margin-bottom:10px;
    margin-left:10px;
    border:1px solid #ccc;
}
.adhere {
    font-weight:bold;
    margin-left:20px;
}
</style>
<style>
body {
    font-family:arial;
    font-size:10px;
    color:#ccc;
    background-color:#555
}
a {
    color:#ccc;
    text-decoration:none;
}
a:hover {
    color:#ccc;
    text-decoration:none
}
#tabMenu {
    margin:0;
    padding:0 0 0 15px;
    list-style:none;
}
#tabMenu li {
    float:left;
    height:32px;
    width:39px;
    cursor:pointer;
    cursor:hand
}
li.comments {
    background:url(http://www.queness.com/resources/html/tabmenu/images/tabComment.png) no-repeat 0 -32px;
}
li.posts {
    background:url(http://www.queness.com/resources/html/tabmenu/images/tabStar.png) no-repeat 0 -32px;
}
li.category {
    background:url(http://www.queness.com/resources/html/tabmenu/images/tabFolder.png) no-repeat 0 -32px;
}
li.famous {
    background:url(http://www.queness.com/resources/html/tabmenu/images/tabHeart.png) no-repeat 0 -32px;
}
li.random {
    background:url(http://www.queness.com/resources/html/tabmenu/images/tabRandom.png) no-repeat 0 -32px;
}
li.mouseover {
    background-position:0 0;
}
li.mouseout {
    background-position:0 -32px;
}
li.selected {
    background-position:0 0;
}
.box {
    width:227px
}
.boxTop {
    background:url(http://www.queness.com/resources/html/tabmenu/images/boxTop.png) no-repeat;
    height:11px;
    clear:both
}
.boxBody {
    background-color:#282828;
}
.boxBottom {
    background:url(http://www.queness.com/resources/html/tabmenu/images/boxBottom.png) no-repeat;
    height:11px;
}
.boxBody div {
    display:none;
}
.boxBody div.show {
    display:block;
}
[B].boxBody div.show div {
    display:block;
}[/B]
.boxBody div ul {
    margin:0 10px 0 25px;
    padding:0;
    width:190px;
    list-style-image:url(http://www.queness.com/resources/html/tabmenu/images/arrow.gif)
}
.boxBody div li {
    border-bottom:1px dotted #8e8e8e;
    padding:4px 0;
    cursor:hand;
    cursor:pointer
}
.boxBody div ul li.last {
    border-bottom:none
}
.boxBody div li span {
    font-size:8px;
    font-style:italic;
    color:#888;
}
</style>
</head>
<body>
<h2><a href="http://www.queness.com">jQuery Tabbed Side Menu from Queness WebBlog</a></h2>
<div class="box">
    <ul id="tabMenu">
        <li class="posts selected"></li>
        <li class="comments"></li>
        <li class="category"></li>
        <li class="famous"></li>
        <li class="random"></li>
    </ul>
    <div class="boxTop"></div>
    <div class="boxBody">
        <div id="posts" class="show[B] hide"[/B]>
            <ul>
                <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
                <li>Simple JQuery Modal Window Tutorial.</li>
                <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
                <li>Exclusive RSS Icons from Queness.</li>
                <li>50 Monochromatic Website Designs.</li>
                <li>Food Plates and Creative Dishware Designs.</li>
                <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
                <li class="last">New Smashing Freebies For Designers and Bloggers.</li>
            </ul>
         [B]   <div id='calendar'></div>[/B]
        </div>
        <div id="comments"[B] class="hide"[/B]>
            <ul>
                <li><a>jQuery Tabbed Navigation Menu. <span> - kevin</span></a></li>
                <li><a>You can add links in here! <span> - kevin</span></a></li>
                <li><a>It's easy to understand. Though it's not the best, but hell yeah it works. <span> - kevin</span></a></li>
                <li><a>I hope you will like it. <span> - kevin</span></a></li>
                <li><a>My next tutorial will be jQuery-based Accordion. <span> - kevin</span></a></li>
                <li class="last"><a>And, I'm working on a free wordpress template as well : ) <span> - kevin</span></a></li>
            </ul>
        </div>
        <div id="category" [B] class="hide">[/B]
            <ul>
                <li><a href="http://www.queness.com/tag/ajax">ajax</a></li>
                <li><a href="http://www.queness.com/tag/css-html">css-html</a></li>
                <li><a href="http://www.queness.com/tag/freebies">freebies</a></li>
                <li><a href="http://www.queness.com/tag/icon">icon</a></li>
                <li><a href="http://www.queness.com/tag/inspiration">inspiration</a></li>
                <li><a href="http://www.queness.com/tag/javascript">javascript</a></li>
                <li><a href="http://www.queness.com/tag/logo">logo</a></li>
                <li><a href="http://www.queness.com/tag/photography">photography</a></li>
                <li><a href="http://www.queness.com/tag/photoshop">photoshop</a></li>
                <li><a href="http://www.queness.com/tag/php">php</a></li>
                <li><a href="http://www.queness.com/tag/seo">seo</a></li>
                <li><a href="http://www.queness.com/tag/tutorial">tutorial</a></li>
                <li><a href="http://www.queness.com/tag/usability">usability</a></li>
                <li><a href="http://www.queness.com/tag/wallpaper">wallpaper</a></li>
                <li class="last"><a href="http://www.queness.com/tag/wordpress">wordpress</a></li>
            </ul>
        </div>
        <div id="famous[B]"  class="hide">[/B]
            <ul>
                <li>Simple JQuery Modal Window Tutorial.</li>
                <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
                <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
                <li class="last">Exclusive RSS Icons from Queness.</li>
            </ul>
        </div>
        <div id="random" [B] class="hide"[/B]>
            <ul>
                <li>50 Monochromatic Website Designs.</li>
                <li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
                <li>Simple JQuery Modal Window Tutorial.</li>
                <li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
                <li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
                <li>Exclusive RSS Icons from Queness.</li>
                <li>New Smashing Freebies For Designers and Bloggers.</li>
                <li class="last">Food Plates and Creative Dishware Designs.</li>
            </ul>
        </div>
    </div>
    <div class="boxBottom"></div>
</div>
<div style="font-size:10px;color:#ccc">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>
<a href="http://www.queness.com">Queness.com</a> | <a href="http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial">Back to Tutorial</a>
</body>
</html>

I added a class of “hide” to the nested divs and then changed the js to target div.hide so that it only hides the parent and not the nested elements.

The above was working for me locally.

7

hey man i was having the same problem but for a form autocomplete (where it suggests things to search by querying a databe using jquery) and also like a banner scroller (more like a jcarousel using jquery). I had the problem where both of them worked independently but if i tried to embed the two ajax items on the page one will stop working.

What I suggest is keep things external. Have the code for one ajax/jquery item completely in your page then when you want the second ajax/jquery item make use of the object tag.

e.g.


<object type="text/html" data="filecontainingsecondajaxobject.html">
</object>

so the output is being generated off site then the output is just inserted into your html without clashing with the two jquery.js files. My .js files were unique and i didn’t know why this was happening. It must have something to do with the naming convention in both source files of your jquery files e.g. variable names being used in both.

I hope this helps!

blackboy