11548 sujets

JavaScript, DOM et API Web HTML5

Je veux simplement faire un défilement de texte de haut en bas à l'aide d'un événement 'onmouseover' sur 2 boutons ( up et down ) afin d'éviter les effets disracieux d'une barre de scroll.

J'ai trouvé rapidement un script tout fait qui fort heureusement marche sur la plupart des navigateurs (Firefox, Safari, IE, Opera).

N'étant pas un développeur trés affirmé et n'étant pas familier du langage JavaScript (plutôt ActionScript 1 plus simple) je ne sais pas pourquoi Opera dans sa dernière version (9) interprète mal le code JavaScript utilisé alors que les versions précédentes (8.x) n'ont aucun problème avec (tout comme Firefox 1.x et IE 5-6, les vieux Netscape (6-7) ont eux de sérieux problèmes mais ils appartiennent maintenant aux antiquaires).

Code JavaScript (dans l'élément HTML 'head') :


<script language="javascript">
    
    var Timer;
    var Pas = 3;
    
    function moveLayer(Sens)
    {
        if(document.getElementById)
            Objet = document.getElementById("Contenu");
        else
            Objet = document.all["Contenu"];
        if(parseInt(Objet.style.top) + (3*Sens) > 0)
            Objet.style.top = "0px";
        else
            Objet.style.top = (parseInt(Objet.style.top) + (3*Sens)) + "px";
        Timer = setTimeout("moveLayer(" + Sens + ");", 50);
    }
</script>


et dans l'élément HTML body :


<div id="Support" style="position:relative;width:250;height:150px;overflow:hidden;border:1px solid #000000">
    <div id="Contenu" style="position:absolute;width:250;height:150px;left:0;top:0">
    
    bla<br>
    bla<br>
    bla<br>
    bla<br>
    bla<br>
    bla<br>
    bla<br>
    bla<br>
    bla<br>
    bla<br>
    bla<br>
    bla<br>
    
    </div>
</div>
<a href="" onmouseover="javascript:moveLayer(1);" onmouseout="javascript:clearTimeout(Timer);">Haut</a>
<a href="" onmouseover="javascript:moveLayer(-1);" onmouseout="javascript:clearTimeout(Timer);">Bas</a>


Sur Opera 9 cela ne donne rien de bon.

Je ne sais pas si ce sont les nouveautés de cette dernière version (version de JavaScript - ECMAScript ?) qui sont en cause.

Si quelqu'un a un indice ou un autre script pour faire plaisir à la plupart des utilisateurs.

Je suis toute ouïe Smiley lol
Modifié par Phil (21 Jul 2006 - 13:03)
Bonjour,

Je n'ai pas de difficulté à le faire fonctionner dans Opera 9.

En revanche, en l'état, c'est une catastrophe pour l'accessibilité, ce script Smiley cligne

(pensez à ceux qui n'ont pas de dispositif de pointage, ou à ceux chez qui javascript est désactivé, par exemple)

<edit>Catastrophique aussi (toujours en l'état actuel) pour qui veux sélectionner le contenu pour un copié collé... Bref, il y a du pain sur la planche Smiley cligne
Modifié par Laurent Denis (21 Jul 2006 - 13:15)
Écris correctement ton script... Tu n'as aucune ouverture fermeture de balises {}
       if(document.getElementById)
	{ 
	Objet = document.getElementById("Contenu");
	}
        else {	 Objet = document.all["Contenu"];
	}
       if (parseInt(Objet.style.top) + (3*Sens) > 0)
	{ 
	Objet.style.top = "0px"; 
	}
        else {
	Objet.style.top = (parseInt(Objet.style.top) + (3*Sens)) + "px";
	Timer = setTimeout("moveLayer(" + Sens + ");", 50);
	}
J'ai omis de préciser que le texte et son système de scroll était dans une boîte centrée horizontalement et verticalement comme dans cet exemple :
http://edu.ca.edu/exemples/centrer/centrer-horiz-vert-1.html

Si l'erreur ne vient pas de JavaScript alors ce sont les subtilités du centrage CSS qui seraient responsable ?

Enfin c'est étonnant que sur Opera 8.x aucun problème et sur la 9 c'est innopérant.

PS : ce n'est pas mon script source originale
PPS : s'agissant d'un site vitrine pour une agence de communication, l'aspect accessibilité vient en dernier après les exigences esthétiques qui vont bien. Le monde est cruel.

Enfin merci de vos réponses constructives.
Phil a écrit :
s'agissant d'un site vitrine pour une agence de communication, l'aspect accessibilité vient en dernier après les exigences esthétiques qui vont bien. Le monde est cruel.


Ba le monde peut aussi ressembler un peu à ce que l'on en fait.

Sinon le choc des mots est vraiment épatant et l'association des termes "communication" et "accessibilité qui vient en dernier" indique une conceptualisation du terme communication telle que l'on peut parler de pur naufrage intellectuel et éthique de ce monde que l'on sait, par ailleurs, si cruel Smiley cligne
Phil a écrit :
J'ai omis de préciser que le texte et son système de scroll était dans une boîte centrée horizontalement et verticalement comme dans cet exemple :
http://edu.ca.edu/exemples/centrer/centrer-horiz-vert-1.html

Si l'erreur ne vient pas de JavaScript alors ce sont les subtilités du centrage CSS qui seraient responsable ?


Je n'ai toujours aucun problème dans Opera 9 en utilisant exactement ce centrage, ton script et ton HTML ci-dessus

Mets ta page test en ligne, ce sera le plus simple.


Phil a écrit :

PPS : s'agissant d'un site vitrine pour une agence de communication, l'aspect accessibilité vient en dernier après les exigences esthétiques qui vont bien. Le monde est cruel.


Non, rien de cruel là-dedans. Ils font leurs choix quant à ce qu'ils pensent être la stratégie de com la plus intéressante à l'heure actuelle, ils se trompent, et ils l'assument. Tout va bien Smiley cligne
clb56 a écrit :
une conceptualisation du terme communication telle que l'on peut parler de pur naufrage intellectuel et éthique de ce monde que l'on sait, par ailleurs, si cruel Smiley cligne


Oh, qu'elle est belle, celle-là ! Je la note Smiley ravi