Results 1 to 8 of 8

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

  1. #1
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default slideshow don't work on IE inside a Tabpanel

    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

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    many many thanks John
    Work whitout a problem on IE.

    Can you just telme the modification on the file?

    thanks

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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;
    };
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    pedroalex (08-11-2010)

  9. #8
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    many thanks again

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •