JQuery UI Tabs + Wordpress issues

Question

Hello dear Stackoverflow gurus,

I am trying to integrate JQuery tabs with my WordPress blog, to replace old HTML Navigation menu. I am half way there but not quiet...

Take a look for yourself: http://www.isahat.com

1. The template breaks right away since the first button of the Tab menu is linked to index.php like so:

• Home
• Info

1. The second tab menu shows my Info page just fine, but on top of everything else. My home page and everything else gets shifted down to make room for Info page.
2. And why after clicking on any article or even the tab link, my tab menu disappears and all my navigation links turn into a bullet list?

Thank you, Sahat.

Answer 1

Your tabs don't work at all in Safari, and when the tabs do work, your code errors have something to do with the content shifting: [Invalid]Markup Validation of isahat.com - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.

You also have a script from GoDaddy that is getting dumped in after your </html> tag. Are you on free GoDaddy hosting? That hosting conflicts with Wordpress and disrupts page display.

Answer 2

I'm having the same problem... but I'd like to try and get around it.

header.php has:

<link type="text/css" href="<?php bloginfo('template_url'); ?>/css/ui-lightness/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> 

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-ui-1.8.4.custom.min.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.2.min.js"></script>

according to the theme I'm using, the tabs are in sidebar-1.php, so I have this code:

<script type="text/javascript">
    $(function(){
        $('#tabs').tabs();
    });
</script>

<div class="tab">
    <ul>
        <li class="active"><a href="#tabs-1">Welfare Services</a></li>
        <li><a href="#tabs-2">Education Services</a></li>
        <li><a href="#tabs-3">Social Enterprise</a></li>
    </ul>
    <div id="tabs-1">Tab 1 content</div>
    <div id="tabs-2">Tab 2 content</div>
    <div id="tabs-3">Tab 3 content</div>
</div>

the site at www.wickedflava.com/ps the tabs are just below the Flash header (Information Technology etc) but they don't work for some reason. any help would be appreciated!