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"
Code from "style.css"
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;
}