tabs, jquery…

  • dave

    #1736

    so I am thinking of switching my home page to tabs and am having trouble making the scripts work.

    so I copied the source from here:

    http://flowplayer.org/tools/demos/tabs/index.htm

    to:

    http://freetravelgenius.com/___testpage (without the underscore, I don’t want the page crawled)

    cutting out the singlepage styleing, moving the tabs style to my childs function.php like this:

    function dave_add_tabstyle() {
    ?>

    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" />
    <?php
    }
    add_action('wp_head', 'dave_add_tabstyle');

    And trying to add the jquery tools in a few ways

    1) putting it in function.php as an add action to wp_head

    2) just putting it on the top of the page’s wordpress gui html (i.e., in the <body> where it is probably not supposed to be)

    3) ignoring it since something (assume the theme, but not sure) is already calling the following:

    <script type='text/javascript' src='http://freetravelgenius.com/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>

    <script type='text/javascript' src='http://freetravelgenius.com/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.88'></script>

    <script type='text/javascript' src='http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js?ver=3.2.1'></script>

    <script type='text/javascript' src='http://freetravelgenius.com/wp-content/plugins/contact-form-7/jquery.form.js?ver=2.52'></script>

    I am not able to get the tab functionality to work, however. As you see, the panes from all three tabs are already on the screen before hitting anything. Hitting the different tabs does nothing.

    Does anyone have any ideas on how to fix this? Or is there a better way to do pretty tabs?

    Thank you!

    Mod

    Kenneth John Odle

    #17029

    Please place code between backticks, please (under the tilda key in the upper left-hand corner).

    Wow, what you are trying to do is very complicated. Do you want to do this place of Graphene’s navigation menu, or in addition to it? I am not sure how you could accomplish the first one, and I am not sure of what purpose the second would serve.

    I can help you with this one, though:

    Hitting the different tabs does nothing.

    That’s because they’re not linked to anything. Each tab is coded like this:

    <li><a href="#">Tab 1</a></li>

    Ken

    dave

    #17030

    No, this will have nothing to do with the site’s navigation/menus. This will simply be implemented on a single page. I thought that was the whole point of “tabs”.

    So this page also has them linked to “#”, but it works:

    http://flowplayer.org/tools/demos/tabs/index.htm

    The goal is not to jump to different pages, but use script to show the information I want in different tabs immediately upon switching tabs.

    Sorry, I am brand new to javascript (and quite an amature at web ‘programming’ in general) so I am probably phrasing my questions very poorly.

    Thank you.

    Mod

    Kenneth John Odle

    #17031

    Oh, I got you. It might not be terribly complicated. You want each tab to point to a box (technically, a “pane”) below and fill it with certain content. This would be very cool if you can get it to work.

    Looking at your page, I see that the CSS is where it should be. However, I don’t see that you’ve loaded the jQuery tools in the header. This should work:

    And trying to add the jquery tools in a few ways
    1) putting it in function.php as an add action to wp_head

    If you look at the source of the demo site you mentioned, it’s one of the first items loaded. For some reason, you have it loading in the footer. What does your functions.php file look like?

    I’m fairly a noob at jQuery and javascript, either, so none of my advice may work.

    Ken

    Admin

    Syahir Hakim

    #17032

    The theme has already loaded jQuery Tools on all pages, though this will not be the case in the next update (1.5), which will load the jQuery Tools only on the front page where it is needed by the theme.

    To make sure jQuery Tools is loaded regardless of whether the theme needs it or not, just add this to your child theme’s functions.php file:

    function graphene_enqueue_scripts_custom(){
    wp_enqueue_script( 'jquery-tools' );
    }
    add_action( 'init', 'graphene_enqueue_scripts_custom' );

    That will make sure WordPress loads jQuery Tools, if it hasn’t already been loaded.

    Next, you didn’t mention anywhere in your first post that you have written the extra javascript needed to initialise the tabs, so I assume that’s why the tabs don’t work. The script is there, but it’s not initialised.

    Go to the demo page, and see the codes under the “JavaScript code” section. You need to add that to your website, after the jQuery Tools have been loaded. This is best done by adding this code to your child theme’s functions.php:

    function graphene_custom_tabs_script(){
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    $("ul.tabs").tabs("div.panes > div");
    });
    </script>
    <?php
    }
    add_action( 'wp_footer', 'graphene_custom_tabs_script', 100 );

    Notice that the javascript code is slightly different than the one in the jQuery Tools demo site. This is because WordPress uses jQuery in the no-conflict mode. Make sure also to change the CSS selectors in the javascript code to match the markup on your site.

    dave

    #17033

    Wow, that worked perfectly!

    Only thing I need to figure out now is why it works when I call the tabs.css stylesheet from an external source, but not when I copy it into my child theme. I believe it would be best practice and proper form to serve it myself.

    WORKS:

    function daves_tabs_style(){ ?>
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" />
    <?php }

    Doesn’t work:

    function daves_tabs_style(){ ?>
    <link rel="stylesheet" type="text/css" href="http://freetravelgenius.com/wp-content/themes/graphene-child-ftg/tabs.css" />
    <?php }

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

  • You must be logged in to reply to this topic.