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

[oratnek]

1) Script Title: DD Tab Menu and Featured Content Slider Using jQuery UI

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

3) Script URL of Featured Content Slider Using jQuery UI
http://webdeveloperplus.com/jquery/f...ing-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.

[jscheuer1]

This is due to browsers' (all of them) inability to initialize javascript coded spatial layout inside of a display: none; container.

There could also be other problems. But to get around the above limitation, in each of the DD Tab Menu's css files change (at the end):

.tabcontent{
display:none;
}

to:

.tabcontent {
position: absolute;
visibility: hidden;
}

And in the ddtabmenu.js file, find:

showsubmenu:function(tabid, targetitem){
	var menuitems=this[tabid+"-menuitems"]
	this.clearrevert2default(tabid)
 for (i=0; i<menuitems.length; i++){
		menuitems[i].className=""
		if (typeof menuitems[i].hasSubContent!="undefined")
			document.getElementById(menuitems[i].getAttribute("rel")).style.display="none"
	}
	targetitem.className="current"
	if (typeof targetitem.hasSubContent!="undefined")
		document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},

Replace it with:

showsubmenu:function(tabid, targetitem){
	var menuitems=this[tabid+"-menuitems"], i, ts, mis;
	this.clearrevert2default(tabid)
 for (i=0; i<menuitems.length; i++){
		menuitems[i].className=""
		if (typeof menuitems[i].hasSubContent!="undefined"){
			mis = document.getElementById(menuitems[i].getAttribute("rel")).style;
			mis.position = mis.visibility = "";
		}
	}
	targetitem.className="current"
	if (typeof targetitem.hasSubContent!="undefined"){
		ts = document.getElementById(targetitem.getAttribute("rel")).style;
		ts.position = "static";
		ts.visibility = "visible";
	}
},

As I say, the could be other problems. If after making the changes and clearing the browsers cache and refreshing the page before checking, you want more help, let me know.

[oratnek]

Thanks John. I'll try this out. Will let you know. Appreciate the help.

[oratnek]

John i got to apologize. I must've confused myself sending you the wrong link of sample. I'm using the ajax tab content script.

Site : http://www.dynamicdrive.com/dynamici...axtabscontent/

This is the script hosting the featured content slider. Please advise.

Thanks,
Ken

[oratnek]

Hi John or Dynamic Drive Team, Any thoughts on this. Very much appreciated.