1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
|
<html>
<head>
<title> Multipages </title>
<style type='text/css' media="screen">
#menuPages{
position: fixed !important;
position: absolute;
z-index: 1000;
}
#menuPages ul{
display: inline;
}
#menuPages li{
list-style-type: none;
display: inline;
margin: 10px;
}
#menuPages a{
text-decoration: none;
}
/* Span contenant les "Page x/y" */
.numPages{
}
</style>
<script type='text/javascript'>
window.onload = function(){
var vis,wid
d = document.getElementById('toto');
if(self.innerHeight){
wid =self.innerWidth;
vis =self.innerHeight;
}
else{
wid = document.documentElement.scrollWidth;
vis = document.documentElement.scrollHeight;
}
haut = document.body.scrollHeight;
nbPages = Math.round(haut/vis);
menu = document.createElement("ul");
thediv = document.createElement("div");
thediv.id = "menuPages";
thediv.style.top = "0px";
thediv.style.left = "0px";
for(i=0;i<nbPages;i++){
pos = 0+i*vis;
page = i+1;
sp = document.createElement("span");
sp.appendChild(document.createTextNode("Page "+page+"/"+nbPages));
sp.style.position = "absolute";
sp.style.top = String(pos+vis-25)+"px";
sp.style.left= String(wid-100)+"px";
sp.className = "numPages";
document.body.appendChild(sp);
mitem = document.createElement("li");
lien = document.createElement("a");
lien.href="#";
lien.name= String(pos);
lien.onclick = function(){
document.body.scrollTop = parseInt(this.name);
return false;
}
lien.appendChild(document.createTextNode(String(page)));
mitem.appendChild(lien);
menu.appendChild(mitem);
}
thediv.appendChild(document.createTextNode("Pages : "));
thediv.appendChild(menu);
document.body.appendChild(thediv);
window.onscroll = function(){
document.getElementById('menuPages').style.top = document.body.scrollTop + "px";
}
}
</script>
</head>
<body>
<div id='toto' style='height: 2500px'></div>
</body>
</html> |
Partager