Problème avec df Javascript Smooth Scroll
skpflz
Messages postés
18
Date d'inscription
Statut
Membre
Dernière intervention
-
skpflz Messages postés 18 Date d'inscription Statut Membre Dernière intervention -
skpflz Messages postés 18 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
et au secours... j'essaye d'installer smooth scroll (http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll/), mais je n'y arrive pas, les balises fonctionnent, mais pas l'animation, alors que les démos sont OK sur les mêmes navigateurs. Après avoir tenté toutes sortes de variantes, j'en suis revenue aux indications de départ, voilà:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head>
<STYLE type="text/css">A {text-decoration: none;}</STYLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta HTTP-EQUIV="imagetoolbar" CONTENT="no">
<meta name="language" content="fr">
<meta name="robots" content="index, follow">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<SCRIPT LANGUAGE="javascript"><!--
<script src="smoothscroll.js" type="text/javascript">
Scroller = {
// control the speed of the scroller.
// dont change it here directly, please use Scroller.speed=50;
speed:10,
// returns the Y position of the div
gy: function (d) {
gy = d.offsetTop
if (d.offsetParent) while (d = d.offsetParent) gy += d.offsetTop
return gy
},
// returns the current scroll position
scrollTop: function (){
body=document.body
d=document.documentElement
if (body && body.scrollTop) return body.scrollTop
if (d && d.scrollTop) return d.scrollTop
if (window.pageYOffset) return window.pageYOffset
return 0
},
// attach an event for an element
// (element, type, function)
add: function(event, body, d) {
if (event.addEventListener) return event.addEventListener(body, d,false)
if (event.attachEvent) return event.attachEvent('on'+body, d)
},
// kill an event of an element
end: function(e){
if (window.event) {
window.event.cancelBubble = true
window.event.returnValue = false
return;
}
if (e.preventDefault && e.stopPropagation) {
e.preventDefault()
e.stopPropagation()
}
},
// move the scroll bar to the particular div.
scroll: function(d){
i = window.innerHeight || document.documentElement.clientHeight;
h=document.body.scrollHeight;
a = Scroller.scrollTop()
if(d>a)
if(h-d>i)
a+=Math.ceil((d-a)/Scroller.speed)
else
a+=Math.ceil((d-a-(h-d))/Scroller.speed)
else
a = a+(d-a)/Scroller.speed;
window.scrollTo(0,a)
if(a==d || Scroller.offsetTop==a)clearInterval(Scroller.interval)
Scroller.offsetTop=a
},
// initializer that adds the renderer to the onload function of the window
init: function(){
Scroller.add(window,'load', Scroller.render)
},
// this method extracts all the anchors and validates then as # and attaches the events.
render: function(){
a = document.getElementsByTagName('a');
Scroller.end(this);
window.onscroll
for (i=0;i<a.length;i++) {
l = a[i];
if(l.href && l.href.indexOf('#') != -1 && ((l.pathname==location.pathname) || ('/'+l.pathname==location.pathname)) ){
Scroller.add(l,'click',Scroller.end)
l.onclick = function(){
Scroller.end(this);
l=this.hash.substr(1);
a = document.getElementsByTagName('a');
for (i=0;i<a.length;i++) {
if(a[i].name == l){
clearInterval(Scroller.interval);
Scroller.interval=setInterval('Scroller.scroll('+Scroller.gy(a[i])+')',10);
}
}
}
}
}
}
}
// invoke the initializer of the scroller
Scroller.init();
/*------------------------------------------------------------
* END OF CODE
/*-----------------------------------------------------------*/
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body bgcolor="#333333" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<a name="top">Smooth scrolling demo</a>
<div id="conteneur" style="position:absolute; z-index:1; width: 801px; height: 1793px; left: 0px" class="conteneur">
<div id="menu" style="position:absolute; width:149px; height:244px; z-index:2; left: 0px; top: 222px" class="menu"><img src="images/menugauche.jpg" width="149" height="244" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="6,-1,144,35" href="index.html">
<area shape="rect" coords="6,34,144,63" href="02.html">
<area shape="rect" coords="7,91,144,121" href="04.html">
<area shape="rect" coords="5,120,142,150" href="05.html">
<area shape="rect" coords="6,148,141,180" href="06.html">
<area shape="rect" coords="5,179,143,209" href="07.html">
<area shape="rect" coords="6,208,141,241" href="#" onclick="MM_openBrWindow('','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes')">
</map>
</div>
<div id="fond" style="position:absolute; width:576px; height:1772px; z-index:3; left: 225px; top: 7px" class="fond">
</div>
<div id="titre" style="position:absolute; width:576px; height:466px; z-index:4; left: 225px; top: 7px" class="titre"><img src="images/03jpg" width="576" height="466"></div>
<div id="texte" style="position:absolute; width:544px; z-index:6; left: 239px" class="texte">
<a href="#top">HAUT DE PAGE</a> - <a href="index.html">RETOUR A LA PAGE
D'ACCUEIL</a> <br>
<br>
<br>
</div>
<div id="bas" style="position:absolute; width:576px; height:14px; z-index:5; left: 225px; top: 1779px" class="bas"></div>
<div id="legend" style="position:absolute; z-index:7; left: 494px; top: 97px" class="legend"><font color="#FFFFFF">Né
</div>
</body>
</html>
merci d'avance!
et au secours... j'essaye d'installer smooth scroll (http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll/), mais je n'y arrive pas, les balises fonctionnent, mais pas l'animation, alors que les démos sont OK sur les mêmes navigateurs. Après avoir tenté toutes sortes de variantes, j'en suis revenue aux indications de départ, voilà:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><head>
<STYLE type="text/css">A {text-decoration: none;}</STYLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta HTTP-EQUIV="imagetoolbar" CONTENT="no">
<meta name="language" content="fr">
<meta name="robots" content="index, follow">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<SCRIPT LANGUAGE="javascript"><!--
<script src="smoothscroll.js" type="text/javascript">
Scroller = {
// control the speed of the scroller.
// dont change it here directly, please use Scroller.speed=50;
speed:10,
// returns the Y position of the div
gy: function (d) {
gy = d.offsetTop
if (d.offsetParent) while (d = d.offsetParent) gy += d.offsetTop
return gy
},
// returns the current scroll position
scrollTop: function (){
body=document.body
d=document.documentElement
if (body && body.scrollTop) return body.scrollTop
if (d && d.scrollTop) return d.scrollTop
if (window.pageYOffset) return window.pageYOffset
return 0
},
// attach an event for an element
// (element, type, function)
add: function(event, body, d) {
if (event.addEventListener) return event.addEventListener(body, d,false)
if (event.attachEvent) return event.attachEvent('on'+body, d)
},
// kill an event of an element
end: function(e){
if (window.event) {
window.event.cancelBubble = true
window.event.returnValue = false
return;
}
if (e.preventDefault && e.stopPropagation) {
e.preventDefault()
e.stopPropagation()
}
},
// move the scroll bar to the particular div.
scroll: function(d){
i = window.innerHeight || document.documentElement.clientHeight;
h=document.body.scrollHeight;
a = Scroller.scrollTop()
if(d>a)
if(h-d>i)
a+=Math.ceil((d-a)/Scroller.speed)
else
a+=Math.ceil((d-a-(h-d))/Scroller.speed)
else
a = a+(d-a)/Scroller.speed;
window.scrollTo(0,a)
if(a==d || Scroller.offsetTop==a)clearInterval(Scroller.interval)
Scroller.offsetTop=a
},
// initializer that adds the renderer to the onload function of the window
init: function(){
Scroller.add(window,'load', Scroller.render)
},
// this method extracts all the anchors and validates then as # and attaches the events.
render: function(){
a = document.getElementsByTagName('a');
Scroller.end(this);
window.onscroll
for (i=0;i<a.length;i++) {
l = a[i];
if(l.href && l.href.indexOf('#') != -1 && ((l.pathname==location.pathname) || ('/'+l.pathname==location.pathname)) ){
Scroller.add(l,'click',Scroller.end)
l.onclick = function(){
Scroller.end(this);
l=this.hash.substr(1);
a = document.getElementsByTagName('a');
for (i=0;i<a.length;i++) {
if(a[i].name == l){
clearInterval(Scroller.interval);
Scroller.interval=setInterval('Scroller.scroll('+Scroller.gy(a[i])+')',10);
}
}
}
}
}
}
}
// invoke the initializer of the scroller
Scroller.init();
/*------------------------------------------------------------
* END OF CODE
/*-----------------------------------------------------------*/
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body bgcolor="#333333" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<a name="top">Smooth scrolling demo</a>
<div id="conteneur" style="position:absolute; z-index:1; width: 801px; height: 1793px; left: 0px" class="conteneur">
<div id="menu" style="position:absolute; width:149px; height:244px; z-index:2; left: 0px; top: 222px" class="menu"><img src="images/menugauche.jpg" width="149" height="244" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="6,-1,144,35" href="index.html">
<area shape="rect" coords="6,34,144,63" href="02.html">
<area shape="rect" coords="7,91,144,121" href="04.html">
<area shape="rect" coords="5,120,142,150" href="05.html">
<area shape="rect" coords="6,148,141,180" href="06.html">
<area shape="rect" coords="5,179,143,209" href="07.html">
<area shape="rect" coords="6,208,141,241" href="#" onclick="MM_openBrWindow('','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes')">
</map>
</div>
<div id="fond" style="position:absolute; width:576px; height:1772px; z-index:3; left: 225px; top: 7px" class="fond">
</div>
<div id="titre" style="position:absolute; width:576px; height:466px; z-index:4; left: 225px; top: 7px" class="titre"><img src="images/03jpg" width="576" height="466"></div>
<div id="texte" style="position:absolute; width:544px; z-index:6; left: 239px" class="texte">
<a href="#top">HAUT DE PAGE</a> - <a href="index.html">RETOUR A LA PAGE
D'ACCUEIL</a> <br>
<br>
<br>
</div>
<div id="bas" style="position:absolute; width:576px; height:14px; z-index:5; left: 225px; top: 1779px" class="bas"></div>
<div id="legend" style="position:absolute; z-index:7; left: 494px; top: 97px" class="legend"><font color="#FFFFFF">Né
</div>
</body>
</html>
merci d'avance!
A voir également:
- Problème avec df Javascript Smooth Scroll
- Scroll lock - Forum Windows
- A javascript error occurred in the main process - Forum Matériel & Système
- Telecharger javascript - Télécharger - Langages
- Touche scroll lock ✓ - Forum Excel
- Touche "scroll lock" - Forum Windows
2 réponses
Essaye cet autre script de scroll doux.
Celui-là c'est sûr il marche :
https://reactdom.com/restful-api/
Celui-là c'est sûr il marche :
https://reactdom.com/restful-api/