[Manipulations CSS] Error in parsing value for property 'top'

**ARRG** · 01/09/2006, 20h39

Bonjour à tous !

Je suis en train de réaliser un nouveau design et pour cela j'ai besoin de javascript.
L'idée est que j'ai un div qui devra 'scroller' via deux flèches en onMouseOver. On modifie ses paramètres top et clip pour produire cet effet.

Le problème ici: http://arrg.anathas.com/leaf/

Comme vous pouvez le constater
1) Il ne se passe rien
2) La console javascript de firefox renvoie

Error: Error in parsing value for property 'top'. Declaration dropped.
Source File: http://arrg.anathas.com/leaf/ on Line: 0

Je n'arrive vraiment pas à comprendre ou est le problème, pourtant j'ai essayé pas mal de trucs et c'est la deuxième fois que je ré-ecris tout depuis le départ pour tenter de corriger, sans succès.

Javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function scrolldiv(vit) {
	vitesse = vit;
	contenu = document.getElementById('contenu'); /* Le div à scroller */
	contenu.style.top -= vitesse; /* On le remonte (ou descend) */
	contenu.style.clip.top += vitesse ; /* Et on corrige la position du clip */
	contenu.style.clip.bottom += vitesse; 
	timer = setTimeout('scrolldiv(vitesse)',50); /* Pour relancer, tant que l'on reste sur la flèche */
}

HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="conteneur">
<a href="#" onMouseOver="scrolldiv('-1')" onMouseOut="clearTimeout(timer)">
	<img src="flechehaut.jpg" id="flechehaut" alt="Remonter le texte" title="Remonter le texte" />
</a>
<h1>Reflexions d'une onomatopée</h1>
<h2>Titre de l'article</h2>
<div id="contenu">
<p>Maecenas sed massa. Maecenas id ipsum ac nisl viverra dignissim. Nunc porttitor dui et neque. Quisque fermentum consequat dolor.</p>
</div>
<a href="#" onMouseOver="scrolldiv('1')" onMouseOut="clearTimeout(timer)">
	<img src="flechebas.jpg" id="flechebas" alt="Descendre le texte" title="Descendre le texte" />
</a>
</div>

J'espère que vous pourrez m'aider car je commence vraiment à être ennuyé. Merci en tout cas d'essayer

**FidoDido®** · 01/09/2006, 22h02

J'ai eu le même genre de problème.
En fait, avec ton contenu.style.top tu ne peux pas récupérer le style que tu définis dans ta feuille CSS.
Essaie en définissant le style de ton div d'id=contenu directement dans le HTML...

Je sais c'est du bricolage.
D'ailleurs, j'aimerais bien savoir comment faire autrement si quelqu'un sait ?

ci@o!

**max44410** · 02/09/2006, 01h36

je pense que j'ai fait un truc qui ressemble a ce que tu veux .. sauf que moi ça décale le div de gauche à droite.

enfin si ça peut t'aider

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
var objecto=document.getElementById("id_menu");
 
	var x_dest_ida=10;
	var x_dest_vuelta=136;
	var dir="l";
 
	function moveObjX()
		{
		x_current = parseInt(document.all["id_menu"].style.left);
		if (dir=="l")
			{
			if (x_dest_ida < x_current)
				{
				document.all["id_menu"].style.left=(parseInt(document.getElementById("id_menu").style.left, 10)-5)+ "px";
 
				setTimeout('moveObjX()',1);
				}
			else
				{
				dir = "r";
				}
			}
		else
			{
			if (x_dest_vuelta > x_current)
				{
				document.all["id_menu"].style.left=(parseInt(document.getElementById("id_menu").style.left, 10)+5)+ "px";
 
				setTimeout('moveObjX()',1);
				}
			else
				{
				dir="l";
				}
			}
		}

le code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
	<div id="id_menu" style="position:absolute; left:138px; top:166px; width:184px; height:397px; background: url(images/menu.gif) no-repeat top left;">
		<table id="cadre" width="184" height="397" border="0" cellspacing="0" cellpadding="0" bgcolor="#4E80E6"> 
			<tr>
				<td width="12"><a href="javascript:moveObjX();"><img src="images/menu-barre.gif" border="0" /></a></td>
				<td height="10" align="left" valign="top"><?php include('menu_gauche.php'); ?></td>
			</tr>
		</table>
	</div>

voila je sais pas si c vraiment ça que tu veux ... mais je pense que ça y ressemble en tout cas.

**ARRG** · 02/09/2006, 02h58

Woot ! Réussi

Merci à FidoDido, en effet il n'a pas l'air de supporter les styles séparés... c'est bizarre. Quoi qu'il en soit j'ai pu passer outre ce problème et ca marche nickel (mieux que prévu même :p). Il reste un seul problème, on peut scroller à l'infini vers le bas, mais c'est pas trop grave, je verrais plus tard.

Pour ceux que ca intéresse voici une version à peu près propre du code final:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript">
function scrollElement(id,spd) {
speed = spd;
elementid = id
element = document.getElementById(elementid);
element.style.top = Math.min(60,parseInt(element.style.top,10)-speed)+'px';
/* Min is here to prevent user to scroll above the limit */			
cliptop = (60-parseInt(element.style.top,10));
			element.style.clip = "rect("+cliptop+"px auto "+(cliptop+321)+"px auto)";
/* Numbers here (60, 321) have to be defined by you. It depends on the rest of your design */
			timer = setTimeout('scrollElement(elementid, speed)',50);
		}
	</script>

Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<p id="tropcourt" style="top:0px; clip:rect(0px auto 30px auto);">Très long texte</p>
<a href="#" onMouseOver="scrollElement('tropcourt','-3')" onMouseOut="clearTimeout(timer)">Monter</a>
<a href="#" onMouseOver="scrollElement('tropcourt','3')" onMouseOut="clearTimeout(timer)">Descendre</a>

En action: http://arrg.anathas.com/leaf/

Et merci aussi à Max44410 d'avoir pris un peu de temps pour m'aider, même si au final je m'en suis sorti sans ton script.

Bonne nuit !