Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts

    tab switching using javascript

    I edited some code on a website concerning the tab views that change from year to year, and dynamically with php bringing in the volume of magazine in the tab.

    Here is the code
    Code:
    <!-- journal tabs defined -->         	
    <div class="featured_pan slider_bg">		
    <div class="year">                               
    <ul class="year">
    	    <li><a href="javascript:void(0);" id="tabBtn1" onmouseover="tabs('tab1', 'tab2', 'tab3', 'tab4', 'tab5','tab6','tab7',
    'tabBtn1', 'tabBtn2', 'tabBtn3', 'tabBtn4','tabBtn5','tabBtn6','tabBtn7');">2013</a>|</li>
    	    <li><a href="javascript:void(0);" id="tabBtn2" onmouseover="tabs('tab2', 'tab3', 'tab4', 'tab5', 'tab6','tab7','tab1',
    'tabBtn2', 'tabBtn3', 'tabBtn4', 'tabBtn5','tabBtn6','tabBtn7','tabBtn1');">2012</a>|</li>
                <li><a href="javascript:void(0);" id="tabBtn3" onmouseover="tabs('tab3', 'tab4', 'tab5', 'tab6', 'tab7','tab1','tab2',
    'tabBtn3', 'tabBtn4', 'tabBtn5', 'tabBtn6','tabBtn7','tabBtn1','tabBtn2');">2011</a>|</li>
                <li><a href="javascript:void(0);" id="tabBtn4" onmouseover="tabs('tab4', 'tab5', 'tab6', 'tab7', 'tab1','tab2','tab3', 
    'tabBtn4', 'tabBtn5', 'tabBtn6', 'tabBtn7','tabBtn1','tabBtn2','tabBtn3');">2010</a>|</li>
                <li><a href="javascript:void(0);" id="tabBtn5" onmouseover="tabs('tab5', 'tab6', 'tab7', 'tab1', 'tab2','tab3','tab4', 
    'tabBtn5', 'tabBtn6', 'tabBtn7', 'tabBtn1','tabBtn2','tabBtn3','tabBtn4');">2009</a>|</li>
                <li><a href="javascript:void(0);" id="tabBtn6" onmouseover="tabs('tab6', 'tab7', 'tab1', 'tab2', 'tab3','tab4','tab5', 
    'tabBtn6', 'tabBtn7', 'tabBtn1', 'tabBtn2','tabBtn3','tabBtn4','tabBtn5');">2008</a>|</li>			
                <li class="nodevider"><a href="javascript:void(0);" id="tabBtn7" onmouseover="tabs('tab7', 'tab1', 'tab2', 'tab3', 'tab4','tab5','tab6', 'tabBtn7', 'tabBtn1','tabBtn2', 'tabBtn3', 'tabBtn4', 'tabBtn5','tabBtn6');">2007</a></li>			
    </ul>
    </div>
    <!--tab content start -->		
    <div id="tab1"> 		
    <?php query_posts('category_name=Volume 8');			if ( have_posts() ) : while ( have_posts() ) : the_post();		?>		<?php $img_url = get_post_meta($post->ID, "img_url", true); ?>			<div class="book"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<? echo $img_url;?>" width="107" height="145" alt="" /></a><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo ShortenText(get_the_title()); ?></a></div> 		<?		endwhile; else:		endif;		//Reset Query		wp_reset_query();		?>          
    </div>		
    <!--tab content end --> 		<!--tab content start -->		<div id="tab2" class="headdentab"> 		<?php			query_posts('category_name=Volume 7');			if ( have_posts() ) : while ( have_posts() ) : the_post();		?>		<?php $img_url = get_post_meta($post->ID, "img_url", true); ?>			<div class="book"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<? echo $img_url;?>" width="107" height="145" alt="" /></a><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo ShortenText(get_the_title()); ?></a></div> 		<?		endwhile; else:		endif;		//Reset Query		wp_reset_query();		?>          </div>		<!--tab content end -->         <!--tab content start -->		<div id="tab3" class="headdentab"> 		<?php			query_posts('category_name=Volume 6');			if ( have_posts() ) : while ( have_posts() ) : the_post();		?>		<?php $img_url = get_post_meta($post->ID, "img_url", true); ?>            <div class="book"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<? echo $img_url;?>" width="107" height="145" alt="" /></a> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo ShortenText(get_the_title()); ?></a></div>   		<?		endwhile; else:		endif;		//Reset Query		wp_reset_query();		?>          </div>		<!--tab content end -->		<!--tab content start -->		<div id="tab4" class="headdentab">         <?php			query_posts('category_name=Volume 5');			if ( have_posts() ) : while ( have_posts() ) : the_post();		?>		<?php $img_url = get_post_meta($post->ID, "img_url", true); ?>            <div class="book"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<? echo $img_url;?>" width="107" height="145" alt="" /></a> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo ShortenText(get_the_title()); ?></a></div>        <?		endwhile; else:		endif;		//Reset Query		wp_reset_query();		?>          </div>		<!--tab content end -->        <!--tab content start -->		<div id="tab5" class="headdentab">         <?php			query_posts('category_name=Volume 4');			if ( have_posts() ) : while ( have_posts() ) : the_post();		?>		<?php $img_url = get_post_meta($post->ID, "img_url", true); ?>            <div class="book"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<? echo $img_url;?>" width="107" height="145" alt="" /> </a><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo ShortenText(get_the_title()); ?></a></div>        <?		endwhile; else:		endif;		//Reset Query		wp_reset_query();		?>        </div>		<!--tab content end --> <!--tab content start -->		
    <div id="tab6" class="headdentab">         <?php			query_posts('category_name=Volume 3');			if ( have_posts() ) : while ( have_posts() ) : the_post();		?>		<?php $img_url = get_post_meta($post->ID, "img_url", true); ?>            <div class="book"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<? echo $img_url;?>" width="107" height="145" alt="" /> </a><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo ShortenText(get_the_title()); ?></a></div>        <?		endwhile; else:		endif;		//Reset Query		wp_reset_query();		?>        </div>		<!--tab content end -->    
    <!--tab content start -->		<div id="tab7" class="headdentab">         <?php			query_posts('category_name=Volume 2');			if ( have_posts() ) : while ( have_posts() ) : the_post();		?>		<?php $img_url = get_post_meta($post->ID, "img_url", true); ?>            <div class="book"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<? echo $img_url;?>" width="107" height="145" alt="" /></a> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php echo ShortenText(get_the_title()); ?></a></div>        <?		endwhile; else:		endif;		//Reset Query		wp_reset_query();		?>          </div>		<!--tab content end -->
    and the website is http://www.sleepdt.com/journal

    the bottom is where the tabs are. they work going from right to left but going from right to left it just adds the magazines in until it runs out of room.

    Please help \

    Thanks.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,205
    Thanks
    23
    Thanked 605 Times in 604 Posts
    AVAST thew up a warning on this site!!!

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #year {
      width:500px;
    }
    
    
    #year UL{
      list-Style:none;
    }
    
    #year UL LI{
      float:left;
    }
    
    .active {
     color:blue;text-Decoration:underline;
    }
    
    #pages {
     position:relative;width:500px;background-Color:#FFFFCC;border:solid red 1px
    }
    
    .page {
     position:relative;display:none;left:0px;top:0px;width:500px;background-Color:#FFFFCC;
    }
    
    .book {
     width:120px;float:left;margin-Left:10px;margin-Top:10px;
    }
    
    .book IMG {
     border-Width:0px;
    }
    
    /*]]>*/
    </style>
    
    
    </head>
    
    <body>
    
     <div id="year">
       <ul>
        <li><a >2013</a> |</li>
        <li><a >2012</a> |</li>
        <li><a >2011</a> |</li>
        <li><a >2010</a> |</li>
       </ul>
     </div>
     <br />
    <div id="pages" >
    <div class="page">
     <div class="book">
     <a href="http://www.sleepdt.com/volume-8-1-februarymarch-2013/" rel="bookmark" title="Volume 8.1: February/March 2013">
     <img src="http://www.sleepdt.com/wp-content/uploads/2013/03/FrontCover_Screenshot.png" width="107" height="145" alt="" />
     </a>
     <a href="http://www.sleepdt.com/volume-8-1-februarymarch-2013/" rel="bookmark" title="Volume 8.1: February/March 2013">Volume 8.1:</a>
     </div>
    </div>
    
    <div class="page" class="headdentab">
    <div class="book">
    <a href="http://www.sleepdt.com/volume-7-7-november-2012/" rel="bookmark" title="Volume 7.7 : November 2012">
    <img src="http://www.sleepdt.com/wp-content/uploads/2012/11/cover-November.jpg" width="107" height="145" alt="" /></a>
    <a href="http://www.sleepdt.com/volume-7-7-november-2012/" rel="bookmark" title="Volume 7.7 : November 2012">Volume 7.7</a>
    </div>
    <div class="book">
    <a href="http://www.sleepdt.com/volume-7-6-october-2012/" rel="bookmark" title="Volume 7.6 : October 2012">
    <img src="http://www.sleepdt.com/wp-content/uploads/2012/10/FrontCover_V7N6_Oct11.png" width="107" height="145" alt="" />
    </a>
    <a href="http://www.sleepdt.com/volume-7-6-october-2012/" rel="bookmark" title="Volume 7.6 : October 2012">Volume 7.6
    </a>
    </div>
    <div class="book">
    <a href="http://www.sleepdt.com/volume-7-5-september-2012/" rel="bookmark" title="Volume 7.5 : September 2012">
    <img src="http://www.sleepdt.com/wp-content/uploads/2012/09/FrontCover_V7N5_Sep1.jpg" width="107" height="145" alt="" />
    </a>
    <a href="http://www.sleepdt.com/volume-7-5-september-2012/" rel="bookmark" title="Volume 7.5 : September 2012">Volume 7.5
    </a>
    </div> 							
    <div class="book">
    <a href="http://www.sleepdt.com/volume-7-4-august-2012/" rel="bookmark" title="Volume 7.4 : August 2012">
    <img src="http://www.sleepdt.com/wp-content/uploads/2012/08/FrontCover_V7N4_Aug.jpg" width="107" height="145" alt="" />
    </a>
    <a href="http://www.sleepdt.com/volume-7-4-august-2012/" rel="bookmark" title="Volume 7.4 : August 2012">Volume 7.4
    </a>
    </div> 							
    <div class="book">
    <a href="http://www.sleepdt.com/volume-7-3-may-jul-2012/" rel="bookmark" title="Volume 7.3 : Jun-Jul 2012">
    <img src="http://www.sleepdt.com/wp-content/uploads/2012/06/FrontCover_Thumb.png" width="107" height="145" alt="" />
    </a>
    <a href="http://www.sleepdt.com/volume-7-3-may-jul-2012/" rel="bookmark" title="Volume 7.3 : Jun-Jul 2012">Volume 7.3
    </a>
    </div> 							
    <div class="book">
    <a href="http://www.sleepdt.com/volume-7-2-mar-apr-2012/" rel="bookmark" title="Volume 7.2 : Apr-May 2012">
    <img src="http://www.sleepdt.com/wp-content/uploads/2012/06/cover.png" width="107" height="145" alt="" />
    </a>
    <a href="http://www.sleepdt.com/volume-7-2-mar-apr-2012/" rel="bookmark" title="Volume 7.2 : Apr-May 2012">Volume 7.2
    </a>
    </div> 							
    <div class="book">
    <a href="http://www.sleepdt.com/vol-7-1-jan-feb-2012/" rel="bookmark" title="Volume 7.1 : Feb-Mar 2012">
    <img src="http://www.sleepdt.com/wp-content/uploads/2012/04/v7e1.png" width="107" height="145" alt="" />
    </a>
    <a href="http://www.sleepdt.com/vol-7-1-jan-feb-2012/" rel="bookmark" title="Volume 7.1 : Feb-Mar 2012">Volume 7.1
    </a>
    </div>
    </div>		
    <!--tab content end -->         
    <!--tab content start -->
    <div class="page" class="headdentab">
    <div class="book">
    <a href="http://www.sleepdt.com/volume-6-6-dec-2011-jan2012/" rel="bookmark" title="Volume 6.7 : Dec-Jan 2011-12">
    <img src="http://www.sleepdt.com/wp-content/uploads/2011/11/ScreenShot189-e1322595832262.png" width="107" height="145" alt="" />
    </a> 
    <a href="http://www.sleepdt.com/volume-6-6-dec-2011-jan2012/" rel="bookmark" title="Volume 6.7 : Dec-Jan 2011-12">Volume 6.7
    </a>
    </div>   				            
    <div class="book">
    <a href="http://www.sleepdt.com/volume-6-5-september-2011/" rel="bookmark" title="Volume 6.5 : September 2011">
    <img src="http://www.sleepdt.com/wp-content/uploads/2011/09/ScreenShot041.png" width="107" height="145" alt="" />
    </a> 
    <a href="http://www.sleepdt.com/volume-6-5-september-2011/" rel="bookmark" title="Volume 6.5 : September 2011">Volume 6.5
    </a>
    </div>   				            
    <div class="book">
    <a href="http://www.sleepdt.com/volume-6-4-june-july-2011/" rel="bookmark" title="Volume 6.4 : June – July 2011">
    <img src="http://www.sleepdt.com/wp-content/uploads/2011/05/ScreenShot142.png" width="107" height="145" alt="" />
    </a> 
    <a href="http://www.sleepdt.com/volume-6-4-june-july-2011/" rel="bookmark" title="Volume 6.4 : June – July 2011">Volume 6.4
    </a>
    </div>   				            
    <div class="book">
    <a href="http://www.sleepdt.com/volume-6-2-march-april-2011/" rel="bookmark" title="Volume 6.2 : March – April 2011">
    <img src="http://www.sleepdt.com/wp-content/uploads/2011/03/v62.png" width="107" height="145" alt="" />
    </a> 
    <a href="http://www.sleepdt.com/volume-6-2-march-april-2011/" rel="bookmark" title="Volume 6.2 : March – April 2011">Volume 6.2
    </a>
    </div>   				            
    <div class="book">
    <a href="http://www.sleepdt.com/volume-6-1-january-2011/" rel="bookmark" title="Volume 6.1 : January 2011">
    <img src="http://www.sleepdt.com/wp-content/uploads/2011/01/ScreenShot0621.png" width="107" height="145" alt="" />
    </a> 
    <a href="http://www.sleepdt.com/volume-6-1-january-2011/" rel="bookmark" title="Volume 6.1 : January 2011">Volume 6.1
    </a>
    </div>   		          
    </div>		
    <!--tab content end -->		
    <!--tab content start -->
    <div class="page" class="headdentab">
    <div class="book">
    <a href="http://www.sleepdt.com/volume-5-7-december-2010/" rel="bookmark" title="Volume 5.7 : December 2010">
    <img src="http://www.sleepdt.com/wp-content/uploads/2010/11/V5N7_FrontCover_low-res.jpg" width="107" height="145" alt="" />
    </a> 
    <a href="http://www.sleepdt.com/volume-5-7-december-2010/" rel="bookmark" title="Volume 5.7 : December 2010">Volume 5.7
    </a>
    </div>        		            
    <div class="book">
    <a href="http://www.sleepdt.com/volume-5-6-october-2010/" rel="bookmark" title="Volume 5.6 : October 2010">
    <img src="http://www.sleepdt.com/wp-content/uploads/2010/09/V5N5.png" width="107" height="145" alt="" />
    </a> 
    <a href="http://www.sleepdt.com/volume-5-6-october-2010/" rel="bookmark" title="Volume 5.6 : October 2010">Volume 5.6
    </a>
    </div>        		            
    <div class="book">
    <a href="http://www.sleepdt.com/volume-5-5-september-2010/" rel="bookmark" title="Volume 5.5 : September 2010">
    <img src="http://www.sleepdt.com/wp-content/uploads/2010/09/V5N5.png" width="107" height="145" alt="" />
    </a> 
    <a href="http://www.sleepdt.com/volume-5-5-september-2010/" rel="bookmark" title="Volume 5.5 : September 2010">Volume 5.5
    </a>
    </div>        		            
    <div class="book">
    <a href="http://www.sleepdt.com/volume-5-4-july-aug-2010/" rel="bookmark" title="Volume 5.4 : July – Aug 2010">
    <img src="http://www.sleepdt.com/wp-content/uploads/2010/09/V5N4_FrontCover_low-res.jpg" width="107" height="145" alt="" />
    </a> 
    <a href="http://www.sleepdt.com/volume-5-4-july-aug-2010/" rel="bookmark" title="Volume 5.4 : July – Aug 2010">Volume 5.4
    </a>
    </div>        		            
    <div class="book">
    <a href="http://www.sleepdt.com/volume-5-3-may-june-2010/" rel="bookmark" title="Volume 5.3 : May – June 2010">
    <img src="http://www.sleepdt.com/_journal/v5n3/v5n3.jpg" width="107" height="145" alt="" />
    </a> 
    <a href="http://www.sleepdt.com/volume-5-3-may-june-2010/" rel="bookmark" title="Volume 5.3 : May – June 2010">Volume 5.3
    </a>
    </div>        		            
    <div class="book">
    <a href="http://www.sleepdt.com/volume-5-2-march-april-2010/" rel="bookmark" title="Volume 5.2 : March – April 2010">
    <img src="http://www.sleepdt.com/_journal/v5n2/v5n2.jpg" width="107" height="145" alt="" />
    </a> 
    <a href="http://www.sleepdt.com/volume-5-2-march-april-2010/" rel="bookmark" title="Volume 5.2 : March – April 2010">Volume 5.2
    </a>
    </div>        		            
    <div class="book">
    <a href="http://www.sleepdt.com/volume-5-1-january-february-2010/" rel="bookmark" title="Volume 5.1 : January – February 2010">
    <img src="http://www.sleepdt.com/_journal/v5n1/v5n1.jpg" width="107" height="145" alt="" />
    </a> 
    <a href="http://www.sleepdt.com/volume-5-1-january-february-2010/" rel="bookmark" title="Volume 5.1 : January – February 2010">Volume 5.1
    </a>
    </div>                  
    </div>		
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcTab(id,nu){
     o=zxcTabs['zxc'+id];
     o&&o.ary[nu]?o.tab(nu):null;
    
    }
    
    function zxcTabs(o){
     var id=o.LinksID,acls=o.ActiveClass,obj=document.getElementById(id),pp=document.getElementById(o.PagesID);
     if (obj&&pp){
      var clds=pp.childNodes,lks=obj.getElementsByTagName('A'),lk,ary=[],z0=0
      for (;z0<clds.length;z0++){
       lk=lks[ary.length];
       if (clds[z0].nodeName.toUpperCase()=='DIV'&&lk){
        this.addevt(lk,'mouseover','tab',ary.length);
        ary.push([clds[z0],lk]);
       }
      }
      this.nu=-1;
      this.ary=ary;
      this.acls=acls;
      zxcTabs['zxc'+id]=this;
     }
    }
    
    zxcTabs.prototype={
    
     tab:function(nu){
      var o=this,lst=o.ary[o.nu]
      if (lst){
       lst[0].style.display='none';
       lst[1].className=lst[1].className.replace(o.acls,'').replace('  ','');
      }
      o.ary[nu][0].style.display='block';
      o.ary[nu][1].className+=' '+o.acls;
      o.nu=nu;
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p); });
      }
     }
    
    }
    
    new zxcTabs({
     LinksID:'year',
     PagesID:'pages',
     ActiveClass:'active'
    })
    
    zxcTab('year',0);
    /*]]>*/
    </script>
    </body>
    
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New Coder
    Join Date
    Jan 2013
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    AVAST thew up a warning on this site!!!
    its a false positive, we are getting it worked out right now.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •