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 7 of 7

Thread: JS Tabs.

  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS Tabs.

    Hi, I implemented this JavaScript jQuery tab on my other themes easily. However, on my recent theme the jQuery tab doesn't seem to work and all the content doesn't show. I checked through my coding so many times and haven't found any mistake. I usually make a mistake that causes it not to work. But, I've checked like a hundred time and couldn't find a mistake. All help is appreciated.

    Code:
    <html>
    <head>
    <link rel="stylesheet" href="justanimes-css.css" type="text/css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.tabs.min.js"></script>
    </head>
    <body>
    <div id="container">
    <div class="clear"></div>
    <img src="images/banner.jpg" width="980" height="150" alt="JustAnimes" />
    <div id="nav">
     <ul>
      <li class="current_page_item"><a href="#" title="Home">Home</a></li>
    
      <li><a href="#" title="Anime List">Anime List</a></li>
     </ul>
    </div>
    <div id="nav-bar"></div>
    <div id="entry-content">
    <div id="homeTabs">
     <ul class="displayshow">
      <div id="sub-title">Browse JustAnimes</div>
      <li><a href="#homeja" class="selected">From JustAnimes</a></li>
    
      <li><a href="#popularanime">Popular Animes</a></li>
      <li><a href="#dubbedanime">Dubbed Anime List</a></li>
      <li><a href="#subbedanime">Subbed Anime List</a></li>
      <li><a href="#animemovies">Anime Movies</a></li>
      <div class="sub-title">Browse a Genre</div>
      <li><a href="#">Action</a></li>
    
      <li><a href="#">Adventure</a></li>
      <li><a href="#">Comedy</a></li>
      <li><a href="#">Drama</a></li>
      <li><a href="#">Ecchi</a></li>
      <li><a href="#">Fantasy</a></li>
      <li><a href="#">Mystery</a></li>
    
      <li><a href="#">Romance</a></li>
     </ul>
    </div>
    <div id="homeja">
    <div class="homeContent">
    <div class="sub-title">From JustAnimes</div>
    <div class="context">
     <div class="title">Recently Added Episodes</div>
      <div id="list">
       <ul>
    
        <li><a href="#">Anime Hero</a></li>
    	<li><a href="#">Anime Hero</a></li>
    	<li><a href="#">Anime Hero</a></li>
    	<li><a href="#">Anime Hero</a></li>
    	<li><a href="#">Anime Hero</a></li>
    	<li><a href="#">Anime Hero</a></li>
    
    	<li><a href="#">Anime Hero</a></li>
    	<li><a href="#">Anime Hero</a></li>
    	<li><a href="#">Anime Hero</a></li>
    	<li><a href="#">Anime Hero</a></li>
    	<li><a href="#">Anime Hero</a></li>
    	<li><a href="#">Anime Hero</a></li>
    
       </ul>
      </div>
      <div class="clear"></div>
    </div>
    <div class="context">
     <div class="title">JustAnimes Updates</div>
      <div class="update">
       <img src="anime-img/bleach.jpg" width="120" height="120" alt="" />
       All the latest Bleach subbed episodes have been added to the site.<br /><br />
    
       <strong>Summary: </strong>15 year old Kurosaki Ichigo is not your everyday high school student. He has from as far he can remember always had the ability to see ghosts and spirits. A fateful day arrives as Ichigo encounters the shinigami Kuchiki Rukia, who saves him and his family from a Hollow at the cost of injuring herself. During this encounter, with Rukia unable to defeat the hollow... <span><a href="#">read more.</a></span>
       <br /><br />
       Watch Bleach Subbed.
      </div>
      <div class="update">
       <img src="anime-img/naruto-shippuden.jpg" width="120" height="120" alt="" />
       All the latest Naruto Shippuden dubbed episodes have been added to the site.<br /><br />
    
       <strong>Summary: </strong>Naruto: Shippuuden is the continuation of the original animated TV series Naruto.The story revolves around an older and slightly more matured Uzumaki Naruto and his quest to save his friend Uchiha Sasuke from the grips of the snake-like Shinobi, Orochimaru. After 2 and a half years Naruto finally returns to his village of Konoha, and sets about putting his ambitions... <span><a href="#">read more.</a></span>
       <br /><br />
       Watch Naruto Shippuden Dubbed.
      </div>
      <div class="clear"></div>
    </div>
    </div>
    </div>
    <div id="popularanime">
    <div class="homeContent">
    
    <div class="sub-title">From JustAnimes</div>
    </div>
    </div>
    <script type="text/javascript"> 
      $("#entry-content").displayshow(function(id,list,set){ 
        $("a",set).removeClass("selected") 
        .filter("[href='"+id+"']",set).addClass("selected"); 
        for(i in list) 
          $(list[i]).hide(); 
        $(id).fadeIn(); 
        return false; 
      }); 
    </script>
    </div>
    <div id="homeSidebar">
    <div class="title">Chat</div>
    <object width="300" height="500" id="obj_1325915117590"><param name="movie" value="http://justanimes-chat.chatango.com/group"/><param name="AllowScriptAccess" VALUE="always"/><param name="AllowNetworking" VALUE="all"/><param name="AllowFullScreen" VALUE="true"/><param name="flashvars" value="cid=1325915117590&a=000000&b=100&c=999999&d=848484&e=000000&g=CCCCCC&h=000000&j=CCCCCC&k=666666&l=1B1B1B&m=000000&n=CCCCCC&t=0&v=0&w=0&aa=1"/><embed id="emb_1325915117590" src="http://justanimes-chat.chatango.com/group" width="300" height="500" allowScriptAccess="always" allowNetworking="all" type="application/x-shockwave-flash" allowFullScreen="true" flashvars="cid=1325915117590&a=000000&b=100&c=999999&d=848484&e=000000&g=CCCCCC&h=000000&j=CCCCCC&k=666666&l=1B1B1B&m=000000&n=CCCCCC&t=0&v=0&w=0&aa=1"></embed></object>
    </div>
    <div class="clear"></div>
    </div>
    </body>
    </html>
    That's the code. If you want to see the live chat I can post the link here.
    Last edited by whaaatha; 01-09-2012 at 12:21 AM. Reason: change does to doesn't

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    One mistake is that you don’t have a doctype.
    Then, I don’t know what tabs plugin this is and you really have to show us a live example in order to find out what’s wrong. It’s impossible to say that by seeing the HTML alone. What is the error console saying?

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is the live one

    www(dot)justanimes(dot)com/justanimes-dark-theme/home.html

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,479
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Well, the error console tells me
    uncaught exception: Syntax error, unrecognized expression: #
    It doesn’t tell me where the error occurs, though. I just see it coming up twice on each page load. You may wanna test it by removing functions step by step to narrow down when the error comes up. Firebug or similar built-in webdeveloper tools in other browsers are useful for debugging JS.

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I believe it's this one <div id="homeja"> and the link I created <li><a href="#homeja" class="selected">From JustAnimes</a></li>

    The <div id="homeja"> in the CSS is set as #homeja{display: block;}

    while in the css #popularanime{display: none;}

    After the closing div tag for <div id="homeja"> is

    Code:
    <div id="popularanime">
    <div class="homeContent">
    <div class="sub-title">From JustAnimes</div>
    </div>
    </div>
    So when someone clicks the "Popular Animes" button on the left menu whatever is within that div id "popularanime" will show because apparently the JS changes the style for that div to "block" and will change the #homeja css to "display: none".

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Then I have the JS code

    Code:
    <script type="text/javascript"> 
      $("#entry-content").displayshow(function(id,list,set){ 
        $("a",set).removeClass("selected") 
        .filter("[href='"+id+"']",set).addClass("selected"); 
        for(i in list) 
          $(list[i]).hide(); 
        $(id).fadeIn(); 
        return false; 
      }); 
    </script>
    Which just removes the "class="selected"" from the unselected button and adds that class to the new selected button.

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I use the same structure and method of applying this to my other sites and it works fine.


  •  

    Tags for this Thread

    Posting Permissions

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