You have a number of typos in your code, maybe there are typos in my original code, I don't know. I haven't even seen that code in a good few years. At least five years.
Proofread it thoroughly and fix the errors and it will work, some things I saw, some CSS was misspelled.
I don't know what you're going to get out of it typing and retyping it, I guess if that helps you understand it more, then more power to you. I think typing it once is sufficient, personally, then after you've typed it once, experiment with it until you understand how it works.
Here is a corrected version.
I didn't test it in IE, I don't know if the JavaScript works. It probably works, it doesn't look like it wouldn't.
Take care.
Oh and it's JavaScript not Java, these are two entirely different languages.
Code:
<!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'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:target Slideshow</title>
<style type='text/css'>
div.slide {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 15px;
border: 50px solid #369;
margin: 50px;
padding: 50px;
}
div.slide:target {
display: block;
}
div#slide-navigation {
position: absolute;
bottom: 0;
right: 0;
width: 200px;
background: white;
border: 1px solid black;
padding: 10px;
margin: 10px;
}
div#slide-navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
div#slide-navigation li {
margin-top: 5px;
}
div#slide-navigation a {
text-decoration: none;
color: black;
}
div#slide-navigation a:hover {
opacity: 1;
}
</style>
<script type='text/javascript'>
var $currentSlide = '';
function slideEvents()
{
var $li = document.getElementById('slide-navigation-inner').childNodes;
for (var $i in $li)
{
if ($li[$i].childNodes &&
$li[$i].childNodes[0] &&
$li[$i].childNodes[0].nodeName == 'A'
) {
$li[$i].childNodes[0].onclick = getSlide;
}
}
getSlide();
var $navigation = document.getElementById('slide-navigation');
if (navigator.appName == 'Microsoft Internet Explorer')
{
$navigation.onmouseover = function()
{
this.style.filter =
'progid:DXImageTransform.Microsoft.Alpha(opacity=100);';
};
$navigation.onmouseout = function()
{
this.style.filter =
'progid:DXImageTransform.Microsoft.Alpha(opacity=0);';
};
}
}
function getSlide()
{
if (this.href)
{
var $anchor = this.href.substring(
this.href.indexOf('#') + 1, this.href.length
);
if (document.getElementById($currentSlide))
{
document.getElementById($currentSlide).style.display = 'none';
}
$currentSlide = $anchor;
if ($anchor.length && document.getElementById($anchor))
{
document.getElementById($anchor).style.display = 'block';
}
}
}
window.onload = slideEvents;
</script>
</head
<body>
<div id='slide-new-features' class='slide'>
<h1>New Features in Microsoft Internet Explorer 7</h1>
<p>
The latest version of Microsoft's flagship Internet Explorer
7 browser contains many key enhancements that promise
to make a web developer's job easer.
</p>
</div>
<div id='slide-bug-fixes' class='slide'>
<h1>IE7 Bug Fixes</h1>
<p>
Internet Explorer 7 has fixes for several, infamous bugs that
plagued Internet Explorer 6, and made the IE platform a thorn in
the sides of developers everywhere.
</p>
<p>
Some of the most well-known rendering bugs have been fixed.
</p>
<ul>
<li>
Layering of the
<span class='code'><select></span> element
</li>
<li>Peek-a-boo</li>
<li>Guillotine</li>
<li>Duplicate character</li>
<li>Border chaos</li>
<li>No Scroll</li>
<li>Three-pixel text jog</li>
<li>Magic creeping text</li>
<li>Bottom margin bug on hover</li>
<li>Losing the ability to highlight text under the top border</li>
</ul>
</div>
<div id='slide-bug-fixes-2' class='slide'>
<h1>More IE7 Bug Fixes</h1>
<p>Also fixed in IE7</p>
<ul>
<li>IE/Win line height bug</li>
<li>Double-margin float bug</li>
<li>Quirky percentages</li>
<li>Duplicate indent</li>
<li>Moving viewport scrollbar outside HTML borders</li>
<li>1px border style</li>
<li>Disappearing list background</li>
<li>Auto width</li>
</ul>
</div>
<div id='slide-css-support' class='slide'>
<h1>New CSS Support in IE7</h1>
<p>
In addition to CSS bug fixes, Microsoft has added some support
for other CSS features.
</p>
<ul>
<li>Fixed positioning</li>
<li>
Fixed backgrounds on all elements, not just the
<span class='code'><body></span> element
</li>
<li>CSS 2 selectors
<ul>
<li>Direct Child</li>
<li>Adjacent Sibling</li>
<li>Attribute</li>
</ul>
</li>
<li>CSS 2 pseudo-classes
<ul>
<li class='code'>:first-child</li>
<li>
<span class='code'>:hover</span> on all elements,
not just the <span class='code'><a></span>
element
</li>
</ul>
</li>
</ul>
</div>
<div id='slide-markup' class='slide'>
<h1>Markup Improvements</h1>
<p>
Some markup improvements have also been made in IE7.
</p>
<ul>
<li>
Including an <span class='code'><?xml</span> prolog
in IE7 no longer triggers quirks mode in XHTML
documents.
</li>
<li>
IE7 includes native support for the
<span class='code'><abbr></span> element.
</li>
<li>
IE7 boasts improved support for
<span class='code'><object></span> element fallback.
</li>
</ul>
</div>
<div id='slide-ie7-release' class='slide'>
<h1>IE7 Release Date</h1>
<p>
Microsoft has not committed to a definitive release date
for IE7 at the time of this writing. As of now, only a public
beta of IE7 has been announced, and is expected for the first
quarter of 2006.
</p>
</div>
<div id='slide-navigation'>
<ul>
<li><a href='#slide-new-features'>New Features in IE7</a></li>
<li><a href='#slide-bug-fixes'>IE7 Bug Fixes</a></li>
<li><a href='#slide-bug-fixes-2'>More IE7 Bug Fixes</a></li>
<li><a href='#slide-css-support'>New CSS Support in IE7</a></li>
<li><a href='#slide-markup'>IE7 Markup Improvements</a></li>
<li><a href='#slide-ie7-release'>IE7 Release Date</a></li>
</ul>
</div>
</body>
</html>
CSS Instant Results Chapter five
