JQuery tab tool

[Shicky]

This rather neat looking tabbed box thing:

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

Was shown to me in another thread and I wanted to implement it for my website. I've referenced the CSS both inside and out of the flowplayer links but it never works and always looks a bit screwed up. I dont quite understand why as it seems it should work fine after getting the required files. No modding is needed on this right?

 

[gord]

Lets see what you've got.

You do need to integrate these tools into your site, but it is very easy. In layman's terms you need to cover the following.

1) Include tool library
2) Markup
3) CSS
4) Execute script

 

[Pho]

Just use jQuery UI - Tabs and save yourself a lot of bother. jQuery UI is excellent and has lots of other useful things. If you switch the theme at the top right of that page you can get one which looks similar to the link you posted, or just make your own theme with their equally good ThemeRoller.

 

[Shicky]

Think its basically wordpress causing issues from where im trying to link the files. Hopefully sort myself out this decade

*Thanks for the queryui, looks like you can do some interesting things with it.

 

[gord]

When you say link the files.. are you including their CDN link?

Are you using wp_enqueue?

 

[Shicky]

I did try with the CDN link at first because my first attempts hadnt worked correctly, but I knew this was the wrong way to go about things - was just seeing what would happen.

I found something mentioning including it in wp_enqueue. Currently trying to get my head around how I am meant to be doing this and where to place my additional new files

 

[Shicky]

Im still stuck on this, guides I found seemed to suggest all different means to including the javascript and css. Anyone know of a decent guide written in the correct way?

I've just loaded the css and js in the header.php and used the html stolen off the page source but this isnt working

 

[gord]

If all you have done is load the tools, css and put the html on your page then you are missing my step 4.

You need to execute the script too in order to make it actually work. This is usually done in the footer, before </body>. As long as you havnt changed any of the ids then you should be able to use their execution method, which would look something like.

<script>
$("#demo img[title]").tooltip();
</script>

 

[Shicky]

If all you have done is load the tools, css and put the html on your page then you are missing my step 4.

You need to execute the script too in order to make it actually work. This is usually done in the footer, before </body>. As long as you havnt changed any of the ids then you should be able to use their execution method, which would look something like.

<script>
$("#demo img[title]").tooltip();
</script>

I think i've done that just from using the info in the view source:

<!-- This JavaScript snippet activates those tabs -->
<script>

// perform JavaScript after the document is scriptable.
$(function() {
	// setup ul.tabs to work as tabs for each div directly under div.panes
	$("ul.tabs").tabs("div.panes > div");
});
</script>

 

[gord]

Indeed, that's right. Hmm, can we not see the page you are working on? I am stuck for ideas now.

 

[Shicky]

Not hosted anywhere unfortunately, just using xamp light. At least I know for fact this should be driving me mental! Thanks for your efforts to help me out, im sure i shall get there and something ridiculous will be to blame

 

[gord]

That's fine, post up your full page if you can?

Grab the source from your browser. That way I can see the exact output.

 

[Shicky]

I was trying other stuff there so the code is monged more than previously. Tried to get it similar to how I had it before but have to do a runner for a few hours now.

Here is the view source from the page currently:

http://pastebin.com/eqmBQzXv

From a brief fly through the issue is that the tabs.css isnt loading in correctly...im not sure why. Also that random <p> and </p>'s are included in nasty places which i think is causing certain things not to function correctly

 

[gord]

Right, that page is a mess! You've got some major no nos in there.

167: Starting a new head tag? Don't do that.. put that stuff in your page header!
183: Starting a new body tag?

Why are there paragraph tags all over the place? You're not including this stuff under the HTML tab of a post/page are you? It's dangerous doing that as you can see, Wordpress has parsed that and put < p > tags in for you. You need to edit the template files.

Move the execute script to the footer, before the body tag.

And the big one.. where is your jquery tools? You've not included it in your header.

 

[Shicky]

I didnt realise wordpress did that until looking at that briefly before putting it up here. At least now I know the issues. With the Jquery, I have it loaded in the header.php file then I thought the script being called later on was enough? Unsure what you mean with regards to the execute script, move it to the footer before the body tag?

Bit worried about this now with regards to needing to change the template, won't I need to create a bunch of different templates now for each product? Essentially this is a tab box I want after a product image and description to contain some specifications

Sorry for all that trouble over something so stupid

 

[gord]

With the Jquery, I have it loaded in the header.php file then I thought the script being called later on was enough? Unsure what you mean with regards to the execute script, move it to the footer before the body tag?

Well, actually I'm a bit wrong so don't worry you don't have to modify the template as such. You can use the html input on a post/page and it shouldn't put paragraph tags in, so if it is, something more serious is wrong. It may be because you have additional head and body tags.. basically you have taken too much of the Jquery Tools standalone page, so you need to go to your post/page and in the html view make sure you don't have too much crap, all you really need for the tabs markup is the following:

<!-- the tabs -->
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
</ul>

<!-- tab "panes" -->
<div class="panes">
	<div>First tab content. Tab contents are called "panes"</div>
	<div>Second tab content</div>
	<div>Third tab content</div>
</div>

Your other major issue at the moment is you havn't loaded the jquery tools library. You have loaded the jquery library, but you need to load the tools too. Specifically for your usage, the tabs, but I usually just load in their full tools library. http://cdn.jquerytools.org/1.2.3/all/jquery.tools.min.js

It's on a CDN suitable for production too, so you don't have to change it if you don't want. You should include the tools via the wp_enqueue function, which I call inside my functions.php file, in my theme directory.

The execute script is this:

#
<script></p>
#
<p>$(function() {</p>
#
<p>     $("ul.tabs").tabs("div.panes &gt; div");
#
});
#
</script>

Which won't be working where it is. You need to put the script code, without all the paragraph tag junk into the footer.php file in your theme directory. That way it is positioned here on your page:

#
</div><!-- /#container -->
# <----- HERE
</body>

So it should look like this:

#
</div><!-- /#container -->
<script>
jQuery(function()
	// setup ul.tabs to work as tabs for each div directly under div.panes
	$("ul.tabs").tabs("div.panes > div");
});
</script>
</body>

 

[Shicky]

I think I've done everything you mentioned and im still unable to see why it isnt working.

The jquery tools and css are just linked on the page rather than from another file as I wasnt sure on placement just yet and figured it would be easier going with this until I fix it. Any ideas whats up?

I remember reading about using using a non conflict style to avoid it screwing up with other plugins/widgets, but im guessing this isn't to blame?

http://pastebin.com/rNfXri2Z

 

[gord]

No, I don't think you can include a script like that for use in WP. Do you have a functions.php in your theme directory?

If not, create one, it should be picked up automatically. Put this in there:

<?php wp_enqueue_script('jquery_tools', 'http://cdn.jquerytools.org/1.2.3/all/jquery.tools.min.js'); ?>

And add your css into your header.php with the other stylesheet includes, something like:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/tabs.css" type="text/css" media="tabs"/>

Your mark-up and execute script are looking spot on now.

 

[Shicky]

Managed to change that all but unfortunately it still didnt look right, infact now it seems just like list items that are hyperlinks and the various text is all underneath these three items.

Tried putting the enqueue in header.php but it made no difference. To make this better someone has now crashed the server, dammit!

*Didnt get a full play around before someone decided to destroy the server. Could be something simple messing it up so will get a chance to feel around more tomorrow. Thank you very much gord for taking the time to fix that all for me, much appreciated. Hope it all ends up sorted in the end

 

[Shicky]

http://pastebin.com/BkjGBz4K

This is the current version, tidied it up a little so the problem still exists but looks a little more on track. Clicking a tab just moves it to the top of the page, tabs are also basically invisible.

Because the javascript call is done specifically with jQuery it doesnt cause a conflict right, or I need to change the bit inside the script also so it doesnt start with a $?