11548 sujets

JavaScript, DOM et API Web HTML5

Script de texte défilant très intéressant mais ne fonctionne que ss IE

J'ai trouvé et adapté ce script qui peut je pense intéresser bcp de monde, car il permet un gain de place évident. Le principe : faire défiler un long texte dans un petit cadre, les parties du texte dépassant étant masquées. Le defilement est provoqué par le survol d'une zone haut et bas et s'arrête dès que les limites du texte sont atteintes selon le sens de défilement. Le site wanadoo en utilise un similaire pour faire défiler ses news.
Le pb est que ce script ne fonctionne que sous IE puisqu'il utilise l'instruction périmée document.all. J'ai essayé de la remplacer par getElementById mais je débute en javascript et ça ne fonctionne pas.
Voici le script :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transational//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transational.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">


<head>
  <title>bloc defilant</title>
<meta name="DC.Resource Identifier" content="" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-15" />
  <meta http-equiv='expires' content='Tue, 01 Jan 1980 01:00:00 GMT' />
  <meta http-equiv="pragma" content=" no-cache " />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  
  <link rel="stylesheet" type="text/css" media="screen" />

<STYLE type="text/css">
* {
 font-family : Arial, Helvetica, Verdana, sans-serif;
 font-size : 12px;
}

h1 {			
	font-weight: bold;
	font-size: 16px;
	color:#FFFFFF;
	background-color:#9FC3F5;
	text-align: center;
}
#divCadre {		
	position: absolute;
	width:195px;
	height:150px;
	left: 150px;
	top: 130px;
	border: 1px solid #2F63BA;
}
#divContainer {		
	position: absolute;
	width:200px;
	height:150px;
	left: 170px;
	top: 170px;
	clip:rect(0px 190px 100px 0px);
}
#divTexte{position:absolute; 
         top:10px; 
         left:10px;
	right:30px;
	}
.fleches {
	position:absolute;
	top:170px;
	left:300px;
}

</style>

<script language="JavaScript" type="text/javascript">

var vitesse=50;
var loop, timer;

function creerObj(obj,cont){
	this.css=document.all[obj].style;
	this.scrollHeight=document.all[obj].offsetHeight;
	this.clipHeight=document.all[obj].offsetHeight;
	this.haut=haut;
	this.bas=bas;
	this.deplace=deplace;
	this.x=0;
	this.y=0;
	eval(this.obj+'=this');
      return this;	 
}

function deplace(x,y){
	this.x=x;
	this.y=y;
	this.css.left=this.x
	this.css.top=this.y
}
function bas(v){
	if(this.y>Container.clipHeight-this.scrollHeight){
		this.deplace(0,this.y-v)
			if(loop) setTimeout(this.obj+".bas("+v+")",vitesse)
	}
}
function haut(v){
	if(this.y<0){
		this.deplace(0,this.y-v)
		if(loop) setTimeout(this.obj+".haut("+v+")",vitesse)
	}
}

function go(vitesse){
	loop=true;
	if(vitesse>0) Texte.bas(vitesse);
	else Texte.haut(vitesse);
}

function stop(){
	loop=false;
	if(timer) clearTimeout(timer);
}

function Init(){
	
	Container=new creerObj('divContainer','');
	Texte=new creerObj('divTexte','divContainer');
	Texte.deplace(0,0);
}
</script>
</head>

<body onload="Init()">

<div id="divCadre">
	<h1>INFOS</h1>
</div>
	<div id="divContainer">
		<div id="divTexte">
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br />
		Les nouvelles du jour<br /><br />
		</div>
	</div>
	<div class=fleches>
		<a href="javascript:void(0)" onmouseover="go(2)"
		 onmouseout="stop()">[haut]</a> <br /> <br />
		<a href="javascript:void(0)" onmouseover="go(-2)"
		 onmouseout="stop()">[bas]</a>
	</div>
</body>
</html>


Voilà, si quelqu'un peut le rendre compatible avec les autres navigateurs, ça serait génial. Merci d'avance.
Smiley biggrin

EDIT par Felipe
Modifié par Felipe (28 Aug 2005 - 10:01)
Peux tu mettre ton code entre des balises [ code] , histoire d'améliorer la lisibilité du forum, ça facilitera le travail de ceux qui tentent de t'aider Smiley cligne
Modifié par Cedric (27 Aug 2005 - 09:29)
Oupps ! c'est mon premier post, je n'avais pas realisé. Voilà, j'espère que ce sera plus clair :
EDIT par Felipe: 1er post *édité*, code déplacé dans celui-ci où il sera bien plus utile ...
Modifié par Felipe (28 Aug 2005 - 10:01)
Je viens de voir un autre bug : les crochets entourant obj ne s'affichent pas. Je ne comprends pas pourquoi.
 this.css=document.all[obj].style;
this.scrollHeight=document.all[obj].offsetHeight;
this.clipHeight=document.all[obj].offsetHeight;

Je ne sais pas comment remédier à ce pb.
cordialement
Bonjour, apparament c'est le moteur de smiley qui bugge.
J'ai mis il y a quelque temps un autre script et moi c'était les indices de tableaux i entre crochets qu'il m'a sabré.
Sujet clos
Aller à