Grow your CSS skills. Land your dream job.

Organic Tabs do not switch between tabs

  • # November 14, 2010 at 11:57 am

    Hey I’ve been trying to implement Chris’s Organic Tabs plugin to my wordpress site. I have 4 main categories on my site and I want to use Organic Tabs to display the latest 10 posts from each of these categories. The rough implementation I’ve done is here – http://pastie.org/1297277

    I can make the posts listed but when I want to switch between tabs, lets say from category “teknik” to “film”, it doesn’t respond and thus doesn’t display posts from “film” category. The only thing I can see whole time is the posts listed under first category.

    I’ve included stated js and css files to my theme. However I’ve not changed ids and css classes. Once I get it working, I’ll fix them.

    If you have look at my code and tell me where my mistake is, I’d really appreciate.

    Thank you.

    # November 14, 2010 at 7:24 pm

    one thing you can do to debug the code is throw in an alert statement. This will tell you that the jquery is working.

    alert(“working”);

    if you get that when the page runs then you know it is a code problem. If you don’t get it then you know that you are not calling your javascript correctly

    # November 15, 2010 at 12:07 am

    The HTML/PHP looks alright so I can’t really say what the problem would be without seeing a live example test. As cybershot said it sounds like the Javascript isn’t being being loaded or called. Try using a debugger like with Firebug and see if it throws any errors on the console when you load the page.

    Cybershot’s snippet will tell you if javascript is on but not if jQuery is loaded so to test for it just load up Firebug on the page and type jQuery (exactly like that) in the console.

    If it returns this:

    function()

    or something similar, then it is loaded. If not it will say something like:

    ReferenceError: jQuery is not defined { message="jQuery is not defined", more...}

    In the second case you need to look at your headers and such to make sure you’re loading the scripts correctly.

    # November 15, 2010 at 6:34 am

    Hey cybershot and jfreehill,

    Thank you for your help. I have solved the problem.
    The problem was that in the header instead of ” $(function() “, the following must be used ” jQuery(document).ready(function($) “. Otherwise it says ” $(function() ” is not a function.

    # November 15, 2010 at 11:44 am

    That’s odd. Typically using the $() wrapper is supposed to do the same thing. Is there another library maybe interfering with it?

    # September 28, 2012 at 4:04 pm

    I’m having the same type of problem in FF/Chrome but not within IE. I _think_ I know why. We’re using SharePoint for this solution and placing the initalizing code within the _pageLoad()_ function which is used instead of _$(document).ready()_ when using the MS Ajax library (for UpdatePanels and such). Again, it works in IE, but when I’m in Chrome or FF I can only click a tab once and then afterwards it doesn’t act as if the UL containing my tabs are even links!

    # October 3, 2012 at 3:14 pm

    In case anyone was wondering, I figured out my issue. I was moving

    up 40 pixels (as in negative margins) so that my tabs would be flush against our sort/paging control and it must have messed up the z-index. I tried setting the z-index to 1000 and it still shut down after the initial tab, so I’m just giving up on having it flush.

    If anyone else is having the same issue make sure that the tabs and the tab content

      are not overlapping.
    # March 31, 2013 at 5:19 pm

    I can’t see to get this to work with a wordpress query for terms because I can’t seem to get a current and hide class on my elements. My code is below.

    < ?php

    $the_query = new WP_Query(‘post_type=faq_post&order=ASC’);

    ?>
    < ?php
    $args = array( ‘taxonomy’ => ‘faq_category’,
    ‘order’ => ‘DESC’,
    ‘hide_empty’ => 0,
    ‘parent’ => 0 );

    $terms = get_terms(‘faq_category’, $args);
    $count = count($terms);
    if ( $count > 0 ){
    echo ‘

    ‘;
    } ?>

    < ?php $faq_cats = get_terms( 'faq_category' );

    foreach ($faq_cats as $faq_cat) {
    $faq_name = $faq_cat->name;
    $category_id = get_cat_ID($faq_name);
    ?>

      “>Q: < ?php the_title(); ?>

      < ?php endwhile; ?>
      < ?php wp_reset_query(); ?>

      < ?php $loop = new WP_Query( array( 'post_type' => ‘faq_post’, ‘faq_category’ => $faq_name, ‘order’ => ‘ASC’ ) ); ?>
      < ?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

      Back to the top

      < ?php endwhile; ?>

      < ?php wp_reset_query(); ?>
      < ?php rewind_posts(); ?>

    < ?php } // End foreach faq ?>

    This outputs

      Q: Are adolescent groups the same as adult groups?

      Q: Are adolescent groups the same as adult groups?

      The first step to becoming a MTS lay facilitator is to do your own work by going through your own MTS small support group as a participant. This not only provides understanding of the group process and how it works, but it allows you to experience healing from the distortions of your own original design and therefore understand what future participants will experience themselves.

       

      After you have completed your MTS small support group and feel you are ready to take the next step, we encourage you to speak to your church pastor about their support of this ministry at your church. You may have taken this step earlier which is wonderful. We just want to reiterate that it is very important that the church recognizes and supports you in this role. There is a facilitator application we encourage the church to use to interview and screen potential MTS small support group lay facilitators.

       

      Finally you will need to either attend a live weekend training (usually held once per year) or watch the MTS Facilitator Training DVD’s (available in our MTS Store). After completing these steps you are technically ready to facilitate a group. We do have a facilitator guide available in the MTS Store that provides questions to ask yourself to see if you are ready to facilitate, group forms, and additional information about facilitation of a MTS small support group. We recommend all MTS lay facilitators have a copy of this resource.

      Back to the top

    Any Ideas or references I can go to? Thanks for the help!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Projects

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.

*May or may not contain any actual "CSS" or "Tricks".