PDA

View Full Version : Tabbed Panel NOT working in IE8 ??? But great in all others


Ewild
10-03-2010, 06:10 PM
Hi all,

I've got a 4-tab tabbed panel that works great in all browsers except IE8. I cannot figure out where the issue lies. I've run it through W3C validator (http://validator.w3.org/) but can't understand some of the problems listed.

The content of all 4 tabs shows up on the first tab, and none of the tabs work when clicked. Anyone have any ideas? Is this a known issue with IE8?

Any help greatly appreciated!

http://www.expeditionwild.com

Ewild
10-03-2010, 08:04 PM
Here is the error message I get in IE8:

"Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Sun, 3 Oct 2010 19:31:24 UTC


Message: 'Spry.Widget.TabbedPanels' is null or not an object
Line: 895
Char: 1
Code: 0"


Here is the code:

Line 895 <script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
</script>

ganymede100
10-11-2010, 07:37 AM
Not an answer but I too have this problem. The situation I have is more refined though in that I have a Tab group within a Tab group and have the issue.

Yet on the same site I get no problem with only one level of tab group it displays correctly.

edbr
10-11-2010, 07:47 AM
link , code or crystal ball and we might be able to help

ganymede100
10-12-2010, 01:26 AM
Hi,

I was thinking I would piggy back on the answer to the previous person problem so sorry about the lack of detail. Here is the error and URL details. This works fine in chrome/webkit and seems to be narrowed down to something in IE:


Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6.5; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; .NET4.0C; .NET CLR 3.0.30729)
Timestamp: Tue, 12 Oct 2010 01:17:31 UTC


Message: 'Spry.Widget.TabbedPanels' is null or not an object
Line: 134
Char: 5
Code: 0
URI: http://www.netballzone.com.au/AEASPhase1Handover/testCentresML.html


I also tried a version which doesn't have tabs within Tabs and still got a problem see below.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6.5; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; .NET4.0C; .NET CLR 3.0.30729)
Timestamp: Tue, 12 Oct 2010 01:33:34 UTC


Message: 'Spry.Widget.TabbedPanels' is null or not an object
Line: 129
Char: 1
Code: 0
URI: http://www.netballzone.com.au/AEASPhase1Handover/testCentresMLno2ndtabs.html

So it must be something to do with Spry. I used the following
<script src="SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject();
</script>
as I was keen to be able to be able to link to a specific tab from another page outside via a hyperlink eg. <a href="testCentresML.html?tab=1#TestCentresTabs">

Thanks in anticipation and regards,
Mike

edbr
10-12-2010, 01:32 AM
check these first returned warnings
Result: 0 errors / 12 warnings

line 4 column 5 - Warning: <meta> element not empty or not closed
line 131 column 1 - Warning: discarding unexpected </div>
line 11 column 5 - Warning: <script> inserting "type" attribute
line 12 column 5 - Warning: <script> inserting "type" attribute
line 13 column 5 - Warning: <script> inserting "type" attribute
might be throwing it out

ganymede100
10-12-2010, 01:39 AM
Thx Ed for the very very prompt reply.

Where can I see those warnings? The bottom left in IE8 the error is all I can see. In Chrome I can use inspect element and in the console there are no errors or warnings.

Thanks,
Mike

edbr
10-12-2010, 01:44 AM
i found them with firefox,

ganymede100
10-12-2010, 02:16 AM
Hi,

I have updated the page to remove a non-matched div.

I will have to get more familiar with Firebug as I can't see how to find warning when looking in the console and I don't want to waste your time.

So when I do I will get up to speed finding the warnings I will get back to you.
Thanks again,

Cheer,
Mike

ganymede100
10-12-2010, 02:53 AM
Note: I think i have addressed the 5 warnings you listed above now. It mentions 12 but only 5 were listed.

edbr
10-12-2010, 03:06 AM
now showing this (its html validator in ff)

Result: 0 errors / 9 warnings

line 4 column 5 - Warning: <meta> element not empty or not closed
line 126 column 1 - Warning: discarding unexpected </div>
line 11 column 5 - Warning: <script> inserting "type" attribute
line 12 column 5 - Warning: <script> inserting "type" attribute
line 13 column 5 - Warning: <script> inserting "type" attribute
line 54 column 18 - Warning: <li> proprietary attribute "tabindex"
line 55 column 18 - Warning: <li> proprietary attribute "tabindex"
line 56 column 21 - Warning: <li> proprietary attribute "tabindex"
line 57 column 15 - Warning: <li> proprietary attribute "tabindex"

ganymede100
10-12-2010, 06:41 AM
As another update.

I now have a non-working and 'working' version. The working version is at http://www.netballzone.com.au/aeasphase1handover/testCentresML2.html

and the non working version which has the following code included http://www.netballzone.com.au/aeasphase1handover/testCentresML.html

Code

<script src="SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject();
</script>

and the code in the body javascript has been changed from this:
<script type="text/javascript">
var TestCentresTabs = new Spry.Widget.TabbedPanels("TestCentresTabs", {defaultTab:(params.tab ? params.tab : 0)});
var CountryTabs = new Spry.Widget.TabbedPanels("CountryTabs", {defaultTab:(params.tab ? params.tab : 0)});
</script>

to

<script type="text/javascript">
var TestCentresTabs = new Spry.Widget.TabbedPanels("TestCentresTabs");
var CountryTabs = new Spry.Widget.TabbedPanels("CountryTabs");
</script>

As I am keen to be able to be able to link to a specific tab from another page outside via a hyperlink eg.<a href="testCentresML.html?tab=1#TestCentresTabs"> then it is not the overall answer to my problems so any ideas appreciated.

Thanks,
Mike

ganymede100
10-12-2010, 10:39 PM
HI,

I used the W3C validator and have cleaned up the errors and warnings except for the one warning below:

Line 44, Column 55: there is no attribute "tabindex"

<li class="TabbedPanelsTab" tabindex="0">First Tab<br />1</li>

So when using strict does this always occur?

Anyways that being cl;eared I still have the same basic issue: when I include the JS and code for defaults as below I get an error in IE8. But it works without the code except for navigating to the non-default tab which I want to do.


<script src="SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject();
</script>

and the code in the body:
<script type="text/javascript">
var TestCentresTabs = new Spry.Widget.TabbedPanels("TestCentresTabs", {defaultTabparams.tab ? params.tab : 0)});
var CountryTabs = new Spry.Widget.TabbedPanels("CountryTabs", {defaultTabparams.tab ? params.tab : 0)});
</script>

ganymede100
10-13-2010, 01:44 AM
So I am now only left with the following warnings in URI: http://www.netballzone.com.au/AEASPh...CentresML.html


line 60 column 29 - Warning: <li> proprietary attribute "tabindex"
line 59 column 29 - Warning: <li> proprietary attribute "tabindex"
line 58 column 29 - Warning: <li> proprietary attribute "tabindex"
line 48 column 15 - Warning: <li> proprietary attribute "tabindex"
line 47 column 21 - Warning: <li> proprietary attribute "tabindex"
line 46 column 18 - Warning: <li> proprietary attribute "tabindex"
line 45 column 18 - Warning: <li> proprietary attribute "tabindex"

impurestudios
10-28-2010, 01:00 AM
I'm having a very simily issue as ewild and ganymede. From viewing ewild's site currently, I can see that somehow the issue is resolved. I have been testing my site consistently since I started with IE8 and 9, as well as Firefox and Chrome.

The spry content appears all on the first tabs, and my other tabs do nothing in IE8. It is fine in all other browsers. I think it might have to do with the addition of SpryURLUtils.js. After I included that, the content only appeared on the first tab.

Can someone please take a look and tell me what I'm doing wrong?

http://www.yukihanand.com/menu.html

I appreciate any feedback, as I would like to continue to be able to direct to specific tabs using a URL. I'm the furthest thing away from a Java expert.

~Josh

impurestudios
10-28-2010, 01:29 AM
This is my error output from IE9 with compatibility mode on.

Webpage error details
User Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Win64; x64; Trident/5.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
Timestamp: Thu, 28 Oct 2010 01:23:19 UTC

Message: 'undefined' is null or not an object
Line: 1398
Char: 1
Code: 0
URI: http://www.yukihanand.com/menu.html

ganymede100
10-31-2010, 08:53 PM
Hi,

I did get an answer on adobe forum. Really just tidied up the code in thew thread here in retrospect.

Check this thread out and see if you have the same issue.
http://forums.adobe.com/message/3209043#3209043


Cheers,
Mike