Featured Content Slider Using jQuery UI not functioning within DHTML Tab Menu Content

[oratnek]

1) Script Title: Ajax Tabs Content Script (v 2.2) and Featured Content Slider Using jQuery UI

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

3) Script URL of Featured Content Slider Using jQuery UI
http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/

4) Script URL of my implementation of both script.
http://www.livegigscentral.com/dhtml/demo02.htm

5) Problem: I've integrated the featured content slider in one of the default content section of the tab menu as you can see on the link on point 4. The slider is working perfectly when until i click on other tab menu and then back tab menu 1. The slider seize to work no more and worst the other featured content slides are appearing below the first one. Advise appreciated.

[Airshow]

At the risk of telling you what you already know, the problem is caused by an interaction between "jQuery UI Tabs" and "ajaxtabs".

The error "uncaught exception: jQuery UI Tabs: Mismatching fragment identifier." occurs when Tab 2 is clicked.

Would take a lot of investigation to diagnose and may need customising either "jQuery UI Tabs" or "ajaxtabs" to fix.

Something to try is to pause the jQuery UI Tabs rotation as the first action when Tab2/3/4 is clicked - and to restart the rotation when Tab1 is reselected.

Let's Google to see if anyone else has been here ...

... Yes. Try top answer here. At least that tells you how to stop the rotation. If that fixes the bug, then you will need to find out how to restart it.

Airshow

[oratnek]

thanks Airshow. Appreciate the link. I'll try and see if i could somehow stop the rotation and re-initialize rotation script. However, if you have any other suggestions will be awesome.

[Airshow]

I played around with the code for half an hour yesterday and couldn't fix it I'm afraid but I didn't go as far as suggested in the linked page so that aproach might still work.

My test strategy might be of interest to you. I installed two buttons so I could manually stop and start the rotation.

<button id="stopRotation">Stop Rotation</button>&nbsp;
<button id="startRotation">Start Rotation</button>
[/CODE=HTML]
[CODE=javascript]
$("#stopRotation").bind('click', function() {
    $("#featured > ul").tabs("rotate", 0, false);
});
$("#startRotation").bind('click', function() {
    $("#featured > ul").tabs("rotate", 5000, true);
});

Whereas this reliably stops/starts the rotation, it doesn't cure your bug that occurs when Tab2/3/4 are clicked. I didn't go as far as going to jqueryui 1.8.2 (or 1.7.3) as indicated in the link.

You will also need to change the selector (as indicated) from $("#featured > ul"),tabs... to $("#featured").tabs... . I tried this also but it failed under jqueryui/1.5.3.

Airshow

[oratnek]

Thanks Airshow. it's unfortunate we can't make this work but thanks for the effort.

[Airshow]

Oratnek, don't give up until you have tried jqueryui 1.8.2 and the associated suggestions. My own attempt was very rudimentary.

Airshow

[oratnek]

Thanks Airshow. I'm going to download jqueryui 1.8.2 on this. will let you know if i need help. Appreciate it.