Internet Explorer fix needed for Javascript for "Featured Stories" menu

tyler92

New Member
I tweaked a Javascript I found online and made it into a menu in which users can rotate through "Featured Stories." An example of what I'm trying to accomplish is on the Martha Stewart Website. The code I'm using is standards-compliant, and it works in Firefox, Chrome and Opera -- but not in Internet Explorer.

Does anyone know how to make this work with Internet Explorer? The HTML and CSS codes I am using are below.

Thank you!

Code from "index.html"

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Featured Stories Test</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript">
   function featured_stories(selected_story) {
    var featured_story = document.getElementsByTagName("div");
    for(var x=0; x<featured_story.length; x++) {
     class = featured_story[x].getAttribute("class");
     if (class == 'featured_story') {
      if (featured_story[x].id == selected_story) {
       featured_story[x].style.display = 'block';
      }
      else {
       featured_story[x].style.display = 'none';
      }
     }
    }
   }
  </script>
 </head>
 <body>
  <div class="featured_story" id="featured_story_1">Story #1</div>
  <div class="featured_story" id="featured_story_2">Story #2</div>
  <div class="featured_story" id="featured_story_3">Story #3</div>
  <div class="featured_story" id="featured_story_4">Story #4</div>
  <div class="featured_story_link"><a href="javascript:featured_stories ('featured_story_1');" >Story 1</a></div>
  <div class="featured_story_link"><a href="javascript:featured_stories ('featured_story_2');" >Story 2</a></div>
  <div class="featured_story_link"><a href="javascript:featured_stories ('featured_story_3');" >Story 3</a></div>
  <div class="featured_story_link"><a href="javascript:featured_stories ('featured_story_4');">Story 4</a></div>
 </body>
</html>

Code from "style.css"

Code:
body {
 min-width: 728px;
}

div.featured_story {
 width: 412px;
 background-color: yellow;
}

div#featured_story_1 {
 display: block;
}

div#featured_story_2 {
 display: none;
}

div#featured_story_3 {
 display: none;
}

div#featured_story_4 {
 display: none;
}

div.featured_story_link {
 width: 103px;
 float: left;
 background-color: orange;
}
 

DHDdirect

New Member
IE doesn't like the variable called 'class'.. it must be reservered for something special.

Code:
     classArray = featured_story[x].getAttribute("class");
     if (classArray == 'featured_story') {
 

tyler92

New Member
Alright, I replaced "class" with "name," and it works in every browser now, but the code does not validate. Does anyone have a solution? Thanks!
 

DHDdirect

New Member
Alright, I replaced "class" with "name," and it works in every browser now, but the code does not validate. Does anyone have a solution? Thanks!

Yes.. like in my example I changed your javascript variable called 'class' to 'classArray'. Not referring to the HTML element class.

What do you mean not validating? With the W3C Validator?
 
Last edited:

tyler92

New Member
IE doesn't like the variable called 'class'.. it must be reservered for something special.

Code:
     classArray = featured_story[x].getAttribute("class");
     if (classArray == 'featured_story') {

Sorry, I didn't look at your post closely enough. That fixed it! It works in every browser and...it validates! Thanks!
 
Top