0

After trying for many many days without any improvement, I think I have no other choice but to ask for your help. I have to admit that I don't know much about coding, but I've tried various tutorials, but just can't get to work what I want.

The problem is that I want sidebar tabs using jquery tools as well as creating my own slider (no image slider, but a content slider). Although I did just as the tutorials say, the text just is displayed normally. No effect, no slide, no tabs, nothing.

I uploaded the .js files, put the "script" info into the header.php, used the specific style.css, also put that into the header.php and then I tried to put some "divs" to create some content. For the tabs I used this tutorial. It's in German, but you can clearly see the steps where it tells you what to paste where. Is there anything missing? I put the "divs" into my home.php. Was that the mistake?

Do I have to put anything in my function.php as well?

I'm missing something, I'm sure of it, but I don't know what it is. I really hope that somebody can help me out here and give me a short "step-by-step" instruction or something.

My website for reference.

Sorry for asking a stupid question, but I can't seem to sovle this by myself.

Thanks a lot :)

Improve this question
0

1 Answer 1

Reset to default
2

Well first off you have way to many duplicate js files, I see at a glance 3 calls to the same jQuery in 3 separate urls, there are also other duplications (easing) and probably more that I missed, clean this up.

Secondly your not using jQuery tools properly, the javascript calls for a tab and a panel.

So remove your CSS id's from your content where you have them as tabs-1, tabs-2 , tabs-3.

Just leave it empty and wrap that whole area in a "panel" div. It should look like this, ( you don't really have to but it's best to keep it simple and get it working first.

       <ul class="tabs">
            <li><a href="#">Nunc tincidunt</a></li>
            <li><a href="#">Proin dolor</a></li>
            <li><a href="#">Aenean lacinia</a></li>
        </ul>

<div class="panes">

<div><p>Proin elit arcu, rutrum ......etc...</p></div>

<div><p>Morbi tincidunt........etc...</p></div>

<div><p>Mauris eleifend est et ......etc...</p></div>

</div>

Change your jQuery function too:

$("ul.tabs").tabs("div.panes > div");

The first part .tabs are you actual li tabs which are are in <ul class="tabs"> and the second part .panes are the panels which are wrapped in <div class="panes">

PS. I forgot to add , none of this will work without the proper CSS, You can use this or incorporate it into your theme stylesheet for my example and it should work fine http://flowplayer.org/css/tabs.css

Improve this answer
7
  • Hello. Thank you very much for your effort to help me out. I did what you told me, but it still doesn't work. I have this code snippet in my home.php: pastebin.com/hitLhtve And my header.php looks like this: pastebin.com/Dx9gChQT I only found one duplicate and deleted it. Still anything that I should delete? Thanks so much!
    – japanworm
    Commented Sep 1, 2011 at 7:13
  • You did not add the CSS , and you have way to many js files and stylesheets.
    – Wyck
    Commented Sep 1, 2011 at 7:25
  • I added the CSS in my main style.css of my theme. The js files and stylesheets have already been in the theme to begin with. Whenever I try to remove them, something in my theme stops to function :(
    – japanworm
    Commented Sep 1, 2011 at 7:45
  • I cleaned up a bit more. If I delete more than that, my pop-up navigation won't work anymore. I also saw all the .css files and most of them I haven't added manually, so I suppose they're all plugin .css files.
    – japanworm
    Commented Sep 1, 2011 at 8:49
  • 1
    The # is a placeholder for the HTML link tag, you have to add your link manually or dynamically with a function. w3schools.com/html/html_links.asp
    – Wyck
    Commented Sep 9, 2011 at 0:01

Not the answer you're looking for? Browse other questions tagged or ask your own question.