slideshow don't work on IE inside a Tabpanel

**pedroalex** · 08-10-2010, 01:28 PM

1) Script Title: Ultimate Fade In Slideshow v2.0-

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:
I'm area using this script inside a tabpanel and it's work fine on firefox and google chrome but on IE just show the first tabpanel

see the link

many thanks in advance

**Beverleyh** · 08-10-2010, 01:55 PM

The page doesnt have the correct HTML document structure defined.

Where is the valid doctype?
Where is the opening <html> tag?
Where is the <head> section?
Where is the <body> section?
Where is the closing </html> tag?

(all of your javascript, CSS and HTML markup is currently just spewed willy-nilly into the page)

Create a valid web page and see if that makes a difference.

**pedroalex** · 08-10-2010, 02:04 PM

i paste a link directly to that page, but the the page infact is called by a index page

see the correct link

many thanks and sorry for my english

**Beverleyh** · 08-10-2010, 02:32 PM

The javascript for the slideshow and jQuery along with the CSS is in the body section of the webpage. Move it in the head and see if that helps.

**jscheuer1** · 08-10-2010, 04:02 PM

All that stuff can ordinarily be important, but I don't think it is here. In fact, I'm surprised this works in any browser because the SpryAssets/SpryTabbedPanels.js script sets the unseen panels to display none. The Ultimate Fade script cannot initialize properly when it's inside a display none container.

I'm attaching a modified version of SpryTabbedPanels.js that uses position to hide the unseen panels, rather than display. It may have problems in the full page (if so, those may be able to be worked out using style), but works fine here in a local mock up of the include page (right click and 'save as'):

Attachment 3468

Make sure to keep a backup of your original SpryTabbedPanels.js file, just in case.

**pedroalex** · 08-10-2010, 05:48 PM

many many thanks John
Work whitout a problem on IE.

Can you just telme the modification on the file?

thanks

**jscheuer1** · 08-10-2010, 07:30 PM

This function, near the end of the script (new version - additions/changes highlighted):

Code:

Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
{
	var tpIndex = -1;
	
	if (typeof elementOrIndex == "number")
		tpIndex = elementOrIndex;
	else // Must be the element for the tab or content panel.
		tpIndex = this.getTabIndex(elementOrIndex);
	
	if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
		return;

	var tabs = this.getTabs();
	var panels = this.getContentPanels();

	var numTabbedPanels = Math.max(tabs.length, panels.length);

	for (var i = 0; i < numTabbedPanels; i++)
	{
		if (i != tpIndex)
		{
			if (tabs[i])
				this.removeClassName(tabs[i], this.tabSelectedClass);
			if (panels[i])
			{
				this.removeClassName(panels[i], this.panelVisibleClass);
				panels[i].style.position = "absolute";
				panels[i].style.left = panels[i].style.top = "-3000px";
			}
		}
	}

	this.addClassName(tabs[tpIndex], this.tabSelectedClass);
	this.addClassName(panels[tpIndex], this.panelVisibleClass);
	panels[tpIndex].style.position = panels[tpIndex].style.left = panels[tpIndex].style.right = "";

	this.currentTabIndex = tpIndex;
};

It was (old version - replaced lines highlighted):

Code:

Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
{
	var tpIndex = -1;
	
	if (typeof elementOrIndex == "number")
		tpIndex = elementOrIndex;
	else // Must be the element for the tab or content panel.
		tpIndex = this.getTabIndex(elementOrIndex);
	
	if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
		return;

	var tabs = this.getTabs();
	var panels = this.getContentPanels();

	var numTabbedPanels = Math.max(tabs.length, panels.length);

	for (var i = 0; i < numTabbedPanels; i++)
	{
		if (i != tpIndex)
		{
			if (tabs[i])
				this.removeClassName(tabs[i], this.tabSelectedClass);
			if (panels[i])
			{
				this.removeClassName(panels[i], this.panelVisibleClass);
				panels[i].style.display = "none";
			}
		}
	}

	this.addClassName(tabs[tpIndex], this.tabSelectedClass);
	this.addClassName(panels[tpIndex], this.panelVisibleClass);
	panels[tpIndex].style.display = "block";

	this.currentTabIndex = tpIndex;
};

**pedroalex** · 08-11-2010, 08:38 AM

many thanks again

Thread: slideshow don't work on IE inside a Tabpanel

Thread Tools

Search Thread

slideshow don't work on IE inside a Tabpanel

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions