Hello, I want to create a new web page. I found some old Javascript code that I used probably 8 years ago, Which does exactly what I want to achieve on the new page.
From what I read, Javascript is not preferred code these days, so I would like to find a modern solution to do the same thing. (or maybe the old code is fine to use today?)
Updating the styling is not a problem, I can do that fine, I just need help to update/replace the Javascript with a valid modern equivalent.
An example page can be seen on my website, and I would like the new code to work exactly the same if possible: www.normsweb.com/test/Pager.htm
Any advice appreciated, thanks!
Norm.
Here is the code from the example page:
From what I read, Javascript is not preferred code these days, so I would like to find a modern solution to do the same thing. (or maybe the old code is fine to use today?)
Updating the styling is not a problem, I can do that fine, I just need help to update/replace the Javascript with a valid modern equivalent.
An example page can be seen on my website, and I would like the new code to work exactly the same if possible: www.normsweb.com/test/Pager.htm
Any advice appreciated, thanks!
Norm.
Here is the code from the example page:
Code:
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style>
body{font:Arial, Helvetica, sans-serif; margin:5px; overflow:hidden}
td{font:Arial, Helvetica, sans-serif;}
a.pager, a.pager:visited {color:#00f;}
a.pager:hover {color:#f00; cursor:hand;}
</style>
<title>Title</title>
</head>
<body>
<table border="2" width="100%" cellspacing="3">
<tr>
<td id=pageText width="100%">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td width="80%" align="center"><strong>Main Title</strong></td>
<td id="previous" width="10%" align="center">
<a href="javascript:goPrev()" class="pager">Previous</a></td>
<td id="next" width="10%" align="center">
<a href="javascript:goNext()" class="pager">Next</a></td>
</tr>
</table>
</td>
<tr>
<td id="pageArea" width="100%" height="200px" align="center">
<div id="page0" Style="display:1;">
Page 0 content
</div>
<div id="page1" Style="display:none;">
Page 1 content
</div>
<div id="page2" Style="display:none;">
Page 2 content
</div>
<div id="page3" Style="display:none;">
Page 3 content
</div>
<div id="page4" Style="display:none;">
Page 4 content
</div>
<div id="page5" Style="display:none;">
Page 5 content
</div>
<div id="page6" Style="display:none;">
Page 6 content
</div>
<div id="page7" Style="display:none;">
Page 7 content
</div>
<div id="page8" Style="display:none;">
Page 8 content
</div>
<div id="page9" Style="display:none;">
Page 9 content
</div>
<div id="page10" Style="display:none;">
Page 10 content
</div>
</td></tr>
</table>
<script>
var i=0;
var npages=11;
function goNext()
{
eval("document.all.page"+i+".style.display='none'");
i=(((i%npages)+1)%npages);
eval("document.all.page"+i+".style.display=''");
}
function goPrev()
{
eval("document.all.page"+i+".style.display='none'");
i=(((i%npages)-1)%npages);
if (i==-1){i=10};
eval("document.all.page"+i+".style.display=''");
}
</script>
</body>
</html>