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

Version imprimable

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

Citation:

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:

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:

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 :D

01/09/2006, 22h02
FidoDido®

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!

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:

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:

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.

Woot ! Réussi :D

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:

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:

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 !

02/09/2006, 03h47
max44410

Citation:

Envoyé par ARRG

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

comme ça ... ça fonctionne mieux ! ;)
02/09/2006, 13h15
ARRG

Arf boulette :p (j'ai dit que c'était pas IE-compatible par contre ?)
02/09/2006, 14h56
max44410

mon expemple de script est ie compatible ...:roll:
si tu peux faire des modifs avec