jQuery Tabs [solved]

[douglas1438]

Hope this is the right place to pose this question?

I'm trying to incorporate some jQuery tabs on to my page like these:
http://jqueryui.com/tabs/

But my page does some really odd things, like putting the whole page inside the tabs.

I've used jQuery elements before without any problem but this just won't work for me. If anyone can offer any advice it would be much appreciated.

I've stripped everything back to just the basic code but without success, have placed literal tags around code.

http://v102.co.uk/mosaicdigital/index.php?page=test-2

Thank you

[Simon66]

Hi
I'm having the exact same problem this weekend too.

It's because the latest versions of jQuery and jQueryUI don't play well with the <base href="http://www.#####.com.au/" /> that is put in by the {metadata} tag.

If you remove the {metadata} temporarily from your template it should work, but this is just to test it as it is critical.

I'm still looking for a solution.

Simon66

[Simon66]

I've been trying various versions of jQuery, jQueryUI and jquery-ui.css.

I managed to get it to work with this combo:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.10/themes ... ery-ui.css" />

<__script__ src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></__script>
<__script__ src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></__script>

I'm going to stick with this for a while.

Simon66

[velden]

If you remove the {metadata} temporarily from your template it should work, but this is just to test it as it is critical.

{metadata} tag has a parameter to disable the base:

{metatag showbase='false'}

[douglas1438]

I've used Simon66's solution which is working for me.
Many thanks,
Chris

I've been trying various versions of jQuery, jQueryUI and jquery-ui.css.

I managed to get it to work with this combo:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.10/themes ... ery-ui.css" />

<__script__ src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></__script>
<__script__ src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></__script>

I'm going to stick with this for a while.

Simon66

[zafari]

Thank you for posting this solution! After spending hours upon hours of trying to get this to work BEFORE thinking to check these forums, I found this, implemented it and it works like a charm! Now I can take a nap!

[Dr.CSS]

You can do this w/o the jquery-ui script as seen here, an example under Simple jQuery Tabs, very simple really...

http://how-i-did-that.com/