PDA

View Full Version : 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/dynamicindex14/fadeinslideshow.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 (http://www.jorlop.pt/produtos.php?tipo=papel&lingua=pt)



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 (http://www.jorlop.pt/index.php?pagina=produtos&tipo=papel&lingua=pt)

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'):

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):


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):


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