jScript incompatible with IE

  • skalus
  • Newbie
  • Newbie
  • skalus
  • Posts: 7

Post 3+ Months Ago

Hi everyone, i have a srpit for tabbed table, which works fine , but not on Internet Explorer. Can anyone please tell what is wrong with it? Thanks a lot

JAVA Code: [ Select ]
function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);
 
  // ----- Tabs -----
 
  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
 
  var Tab = Tabs.firstChild;
  var i   = 0;
 
  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);
 
  // ----- Pages -----
 
  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;
 
  var Page = Pages.firstChild;
  var i    = 0;
 
  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' :   'none';
    }
  }
  while (Page = Page.nextSibling);
}
 
// ----- Functions -------------------------------------------------------------
 
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
 
function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
 
 
 
 
  1. function tabview_aux(TabViewId, id)
  2. {
  3.   var TabView = document.getElementById(TabViewId);
  4.  
  5.   // ----- Tabs -----
  6.  
  7.   var Tabs = TabView.firstChild;
  8.   while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
  9.  
  10.   var Tab = Tabs.firstChild;
  11.   var i   = 0;
  12.  
  13.   do
  14.   {
  15.     if (Tab.tagName == "A")
  16.     {
  17.       i++;
  18.       Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
  19.       Tab.className = (i == id) ? "Active" : "";
  20.       Tab.blur();
  21.     }
  22.   }
  23.   while (Tab = Tab.nextSibling);
  24.  
  25.   // ----- Pages -----
  26.  
  27.   var Pages = TabView.firstChild;
  28.   while (Pages.className != 'Pages') Pages = Pages.nextSibling;
  29.  
  30.   var Page = Pages.firstChild;
  31.   var i    = 0;
  32.  
  33.   do
  34.   {
  35.     if (Page.className == 'Page')
  36.     {
  37.       i++;
  38.       if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
  39.       Page.style.overflow = "auto";
  40.       Page.style.display  = (i == id) ? 'block' :   'none';
  41.     }
  42.   }
  43.   while (Page = Page.nextSibling);
  44. }
  45.  
  46. // ----- Functions -------------------------------------------------------------
  47.  
  48. function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
  49.  
  50. function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
  51.  
  52.  
  53.  
  54.  
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1244
  • Loc: Sydney

Post 3+ Months Ago

Not going to introduce yourself for your first post?
  • skalus
  • Newbie
  • Newbie
  • skalus
  • Posts: 7

Post 3+ Months Ago

didn't know that you have such custom- didn't want to create an unnecessary posts- thats all. I;m just regular guy who is new to www designed. Finish his website and bloody IE is not compatible with my script.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6252
  • Loc: Seattle, WA

Post 3+ Months Ago

What is the intended behavior of the script, and what is it actually doing in IE? Posting code and asking why it doesn't work doesn't provide enough context for people to help.
  • skalus
  • Newbie
  • Newbie
  • skalus
  • Posts: 7

Post 3+ Months Ago

sorry spork.
This script is to create a tab view table. I have table with tabs, and when i click them content of the table change

When i try to do it in IE lub Safari when i click on tab 2 content of the table doesn't change.
  • MarPlo
  • Novice
  • Novice
  • MarPlo
  • Posts: 34

Post 3+ Months Ago

Hi
Not sure if it solve the problem, but try, replace:
Code: [ Select ]
Tab.href   = "javascript:tabview_switch('"+TabViewId+"', "+i+");";

With:
Code: [ Select ]
Tab.href   = "javascript: tabview_switch('"+TabViewId+"', "+i+");";
  • skalus
  • Newbie
  • Newbie
  • skalus
  • Posts: 7

Post 3+ Months Ago

thanks a lot for answer, but unfortunatelly it doesn't change anything. Still doesn't work on IE
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

skalus could you provide an example of the tabbed table you're using? just looking at the code you've posted I can't see anything that would cause IE to fail.

also how is the tabbed table being made? Is it static or being created by another source through AJAX or Javascript?
  • skalus
  • Newbie
  • Newbie
  • skalus
  • Posts: 7

Post 3+ Months Ago

http://www,php-development,ru/javascripts/tab-view.php i took the script from this website. If you open it in IE it will work. However, when you download the script and open an examle in IE. you wont be able to switch between tabs.
Also, unfortunately i dont know the difference between script being static or created using javascript. Someone told me,that I need to enable manually javascript,for it to work. Which is a solution, but what about users, who have old version of IE or don't know hwo to do it?
thanks
  • MarPlo
  • Novice
  • Novice
  • MarPlo
  • Posts: 34

Post 3+ Months Ago

Hi,
There are JS scripts for Tab View better that that script, just look on the net for "javascript tabs".
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

I agree with MarPlo. also i downloaded the tab view script and ran it and it worked for me. I'm running IE9 not sure what version your running. Most browsers have Javascript turned on already.

IE is incompatible with it self, and there are many quirks I've ran into with javascript with IE.

One of the issues i had was having AJAX make html content and adding it to the page with innerHTML IE wasn't able to find the elements i made or run the javascript attached to them.

Another one which drives me nuts is if you have a varible named the same as an element id or name will cause (at least older versions) IE to not to run javascript or cause an error, even though there is no errors.

Make sure you don't have a varible named the same as an element

for example
JAVASCRIPT Code: [ Select ]
var TabView = document.getElementById(TabViewId);
 
  1. var TabView = document.getElementById(TabViewId);
  2.  

and
Code: [ Select ]
<div class="TabView" id="TabView">


if your still using the original script try changing the container opening div to
Code: [ Select ]
<div class="TabView" id="TabViewEle">

You will also have to change the initialize function call to
JAVASCRIPT Code: [ Select ]
tabview_initialize('TabViewEle');
 
  1. tabview_initialize('TabViewEle');
  2.  

Try that and see what happends
  • skalus
  • Newbie
  • Newbie
  • skalus
  • Posts: 7

Post 3+ Months Ago

thanks ScottG, I will try do as you sugested. But just to clarify. I need to change
JAVASCRIPT Code: [ Select ]
var TabView = document.getElementById(TabViewId);
[/javasript]
 
for
 
[javascript]
var TabView = document.getElementById(TabView1);
var TabView = document.getElementById(TabView2);
var TabView = document.getElementById(TabView3);
 
  1. var TabView = document.getElementById(TabViewId);
  2. [/javasript]
  3.  
  4. for
  5.  
  6. [javascript]
  7. var TabView = document.getElementById(TabView1);
  8. var TabView = document.getElementById(TabView2);
  9. var TabView = document.getElementById(TabView3);
  10.  

and then

HTML Code: [ Select ]
<div class="TabView" id="TabView1">
<div class="TabView" id="TabView2">
<div class="TabView" id="TabView3">
 
  1. <div class="TabView" id="TabView1">
  2. <div class="TabView" id="TabView2">
  3. <div class="TabView" id="TabView3">
  4.  


and add to java everything separately like:
JAVASCRIPT Code: [ Select ]
tabview_initialize('TabView1');{ tabview_aux(TabView1,  1); }
tabview_initialize('TabView2');{ tabview_aux(TabView2,  1); }
tabview_initialize('TabView3');{ tabview_aux(TabView3,  1); }
 
  1. tabview_initialize('TabView1');{ tabview_aux(TabView1,  1); }
  2. tabview_initialize('TabView2');{ tabview_aux(TabView2,  1); }
  3. tabview_initialize('TabView3');{ tabview_aux(TabView3,  1); }
  4.  

thanks again
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

The only thing you should need to change would be in the HTML page and not the javascript file

So it looks like you have three tabbed windows? If that is the case this is the sample page's sample html file you would want.

That sample.html should be the only thing you need to change

HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
<title>Tab-View Sample</title>
 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords"    content="" />
 
<link rel="stylesheet" type="text/css" href="tab-view.css" />
 
</head>
<body>
 
 
 
<div class="TabView" id="TabView1">
 
 
    <!-- ***** Tabs ************************************************************ -->
   
    <div class="Tabs" style="width: 452px;">
      <a class="Current">Tab 1</a>
      <a>Tab 2</a>
      <a>Tab 3</a>
    </div>
   
   
    <!-- ***** Pages *********************************************************** -->
   
    <div class="Pages" style="width: 450px; height: 300px;">
      <div class="Page" style="display: block;"><div class="Pad">Page 1</div></div>
      <div class="Page" style="display:  none;"><div class="Pad">Page 2</div></div>
      <div class="Page" style="display:  none;"><div class="Pad">Page 3</div></div>
    </div>
 
</div>
 
<div class="TabView" id="TabView2">
 
 
    <!-- ***** Tabs ************************************************************ -->
   
    <div class="Tabs" style="width: 452px;">
      <a class="Current">Tab 1</a>
      <a>Tab 2</a>
      <a>Tab 3</a>
    </div>
   
   
    <!-- ***** Pages *********************************************************** -->
   
    <div class="Pages" style="width: 450px; height: 300px;">
      <div class="Page" style="display: block;"><div class="Pad">Page 1</div></div>
      <div class="Page" style="display:  none;"><div class="Pad">Page 2</div></div>
      <div class="Page" style="display:  none;"><div class="Pad">Page 3</div></div>
    </div>
 
</div>
 
<div class="TabView" id="TabView3">
 
 
    <!-- ***** Tabs ************************************************************ -->
   
    <div class="Tabs" style="width: 452px;">
      <a class="Current">Tab 1</a>
      <a>Tab 2</a>
      <a>Tab 3</a>
    </div>
   
   
    <!-- ***** Pages *********************************************************** -->
   
    <div class="Pages" style="width: 450px; height: 300px;">
      <div class="Page" style="display: block;"><div class="Pad">Page 1</div></div>
      <div class="Page" style="display:  none;"><div class="Pad">Page 2</div></div>
      <div class="Page" style="display:  none;"><div class="Pad">Page 3</div></div>
    </div>
 
</div>
 
<script type="text/javascript" src="tab-view.js"></script>
<script type="text/javascript">
tabview_initialize('TabView1');
tabview_initialize('TabView2');
tabview_initialize('TabView3');
</script>
 
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <title>Tab-View Sample</title>
  6.  
  7. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  8. <meta name="description" content="" />
  9. <meta name="keywords"    content="" />
  10.  
  11. <link rel="stylesheet" type="text/css" href="tab-view.css" />
  12.  
  13. </head>
  14. <body>
  15.  
  16.  
  17.  
  18. <div class="TabView" id="TabView1">
  19.  
  20.  
  21.     <!-- ***** Tabs ************************************************************ -->
  22.    
  23.     <div class="Tabs" style="width: 452px;">
  24.       <a class="Current">Tab 1</a>
  25.       <a>Tab 2</a>
  26.       <a>Tab 3</a>
  27.     </div>
  28.    
  29.    
  30.     <!-- ***** Pages *********************************************************** -->
  31.    
  32.     <div class="Pages" style="width: 450px; height: 300px;">
  33.       <div class="Page" style="display: block;"><div class="Pad">Page 1</div></div>
  34.       <div class="Page" style="display:  none;"><div class="Pad">Page 2</div></div>
  35.       <div class="Page" style="display:  none;"><div class="Pad">Page 3</div></div>
  36.     </div>
  37.  
  38. </div>
  39.  
  40. <div class="TabView" id="TabView2">
  41.  
  42.  
  43.     <!-- ***** Tabs ************************************************************ -->
  44.    
  45.     <div class="Tabs" style="width: 452px;">
  46.       <a class="Current">Tab 1</a>
  47.       <a>Tab 2</a>
  48.       <a>Tab 3</a>
  49.     </div>
  50.    
  51.    
  52.     <!-- ***** Pages *********************************************************** -->
  53.    
  54.     <div class="Pages" style="width: 450px; height: 300px;">
  55.       <div class="Page" style="display: block;"><div class="Pad">Page 1</div></div>
  56.       <div class="Page" style="display:  none;"><div class="Pad">Page 2</div></div>
  57.       <div class="Page" style="display:  none;"><div class="Pad">Page 3</div></div>
  58.     </div>
  59.  
  60. </div>
  61.  
  62. <div class="TabView" id="TabView3">
  63.  
  64.  
  65.     <!-- ***** Tabs ************************************************************ -->
  66.    
  67.     <div class="Tabs" style="width: 452px;">
  68.       <a class="Current">Tab 1</a>
  69.       <a>Tab 2</a>
  70.       <a>Tab 3</a>
  71.     </div>
  72.    
  73.    
  74.     <!-- ***** Pages *********************************************************** -->
  75.    
  76.     <div class="Pages" style="width: 450px; height: 300px;">
  77.       <div class="Page" style="display: block;"><div class="Pad">Page 1</div></div>
  78.       <div class="Page" style="display:  none;"><div class="Pad">Page 2</div></div>
  79.       <div class="Page" style="display:  none;"><div class="Pad">Page 3</div></div>
  80.     </div>
  81.  
  82. </div>
  83.  
  84. <script type="text/javascript" src="tab-view.js"></script>
  85. <script type="text/javascript">
  86. tabview_initialize('TabView1');
  87. tabview_initialize('TabView2');
  88. tabview_initialize('TabView3');
  89. </script>
  90.  
  91. </body>
  92. </html>
  93.  


Now if you just wanted tree tabs it would be
HTML Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
<title>Tab-View Sample</title>
 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords"    content="" />
 
<link rel="stylesheet" type="text/css" href="tab-view.css" />
 
</head>
<body>
 
 
 
<div class="TabView" id="TabView1">
 
 
    <!-- ***** Tabs ************************************************************ -->
   
    <div class="Tabs" style="width: 452px;">
      <a class="Current">Tab 1</a>
      <a>Tab 2</a>
      <a>Tab 3</a>
    </div>
   
   
    <!-- ***** Pages *********************************************************** -->
   
    <div class="Pages" style="width: 450px; height: 300px;">
      <div class="Page" style="display: block;"><div class="Pad">Page 1</div></div>
      <div class="Page" style="display:  none;"><div class="Pad">Page 2</div></div>
      <div class="Page" style="display:  none;"><div class="Pad">Page 3</div></div>
    </div>
 
</div>
 
<script type="text/javascript" src="tab-view.js"></script>
<script type="text/javascript">
tabview_initialize('TabView1');
</script>
 
</body>
</html>
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <title>Tab-View Sample</title>
  6.  
  7. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  8. <meta name="description" content="" />
  9. <meta name="keywords"    content="" />
  10.  
  11. <link rel="stylesheet" type="text/css" href="tab-view.css" />
  12.  
  13. </head>
  14. <body>
  15.  
  16.  
  17.  
  18. <div class="TabView" id="TabView1">
  19.  
  20.  
  21.     <!-- ***** Tabs ************************************************************ -->
  22.    
  23.     <div class="Tabs" style="width: 452px;">
  24.       <a class="Current">Tab 1</a>
  25.       <a>Tab 2</a>
  26.       <a>Tab 3</a>
  27.     </div>
  28.    
  29.    
  30.     <!-- ***** Pages *********************************************************** -->
  31.    
  32.     <div class="Pages" style="width: 450px; height: 300px;">
  33.       <div class="Page" style="display: block;"><div class="Pad">Page 1</div></div>
  34.       <div class="Page" style="display:  none;"><div class="Pad">Page 2</div></div>
  35.       <div class="Page" style="display:  none;"><div class="Pad">Page 3</div></div>
  36.     </div>
  37.  
  38. </div>
  39.  
  40. <script type="text/javascript" src="tab-view.js"></script>
  41. <script type="text/javascript">
  42. tabview_initialize('TabView1');
  43. </script>
  44.  
  45. </body>
  46. </html>
  47.  
  • skalus
  • Newbie
  • Newbie
  • skalus
  • Posts: 7

Post 3+ Months Ago

thanks a lot for the help. I decided to go for new code, which works almostly nice. I'm using the table in ebay. When I paste it as custom made page it works, example
http://stores.ebay,co,uk/ride-time
However the same script when I paste in as desription doesn't work. To make it even more funnier, it works on preview but not when browse. Example:
http://cgi.ebay,co,uk/ws/eBayISAPI.dll? ... 0834949618
(i don't want to use forum for advertising!)
do you have any ideas what can cause such wierd problem?
thats the java code

JAVASCRIPT Code: [ Select ]
window.onload=function() {
 
  // get tab container
  var container = document.getElementById("tabContainer");
    // set current tab
    var navitem = container.querySelector(".tabs ul li");
    //store which tab we are on
    var ident = navitem,id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");
 
    //hide two tab contents we don't need
    var pages = container.querySelectorAll(".tabpage");
    for (var i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }
 
    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
}
 
// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tabpage_" + current).style.display="none";
 
  var ident = this,id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}
 
 
  1. window.onload=function() {
  2.  
  3.   // get tab container
  4.   var container = document.getElementById("tabContainer");
  5.     // set current tab
  6.     var navitem = container.querySelector(".tabs ul li");
  7.     //store which tab we are on
  8.     var ident = navitem,id.split("_")[1];
  9.     navitem.parentNode.setAttribute("data-current",ident);
  10.     //set current tab with class of activetabheader
  11.     navitem.setAttribute("class","tabActiveHeader");
  12.  
  13.     //hide two tab contents we don't need
  14.     var pages = container.querySelectorAll(".tabpage");
  15.     for (var i = 1; i < pages.length; i++) {
  16.       pages[i].style.display="none";
  17.     }
  18.  
  19.     //this adds click event to tabs
  20.     var tabs = container.querySelectorAll(".tabs ul li");
  21.     for (var i = 0; i < tabs.length; i++) {
  22.       tabs[i].onclick=displayPage;
  23.     }
  24. }
  25.  
  26. // on click of one of tabs
  27. function displayPage() {
  28.   var current = this.parentNode.getAttribute("data-current");
  29.   //remove class of activetabheader and hide old contents
  30.   document.getElementById("tabHeader_" + current).removeAttribute("class");
  31.   document.getElementById("tabpage_" + current).style.display="none";
  32.  
  33.   var ident = this,id.split("_")[1];
  34.   //add class of activetabheader to new active tab and show contents
  35.   this.setAttribute("class","tabActiveHeader");
  36.   document.getElementById("tabpage_" + ident).style.display="block";
  37.   this.parentNode.setAttribute("data-current",ident);
  38. }
  39.  
  40.  
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Both links you provided work for me in both IE9 and Firefox 10. I don't see anything that pops out at me. What browsers and versions are you using?

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: Liamw411 and 99 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.