Javascript des années Funk et doctype

**karpe** · 01/02/2010, 02h35

Bonjour à tous, ceci est mon premier post sur le forum. Je vous explique mon casse-tête :

Je souhaite intégrer un menu défilant en javascript sur mon site, le soucis c'est que celui-ci date un peu et n'est pas tolérer par le doctype. Le script marche et défile sous IE mais pas sous firefox. J'ai cherché une solution un peu partout, il semblerait que le problème vienne de la syntaxe de mon javascript...pas compliqué alors me direz-vous...et bah nan,... çà fais 12h que je suis dessus, j'ai plus de solution et j'ai mal à l'encéphale...

...je recherche donc une âme charitable, je vous laisse le code est un lien test.

Merci à vous

Le doctype :

Code :

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

1
2
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Le css de la div ( bien qu'aucun rapport):

Code :

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

1
2
3
4
5
6
7
 
#menudefilant {
	width: 185px;
	margin-left:0px;
height: 180px; 
overflow: hidden;
}

Le javascript :

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
<script>
var sRepeat=null;
function doScrollerIE(dir, src, amount) {	
if (amount==null) {
amount=10
}
//http://www.presencenet.net/
if (dir=="up") {
document.all[src].scrollTop-=amount
}	else {
document.all[src].scrollTop+=amount
}	if (sRepeat==null) {
sRepeat = setInterval("doScrollerIE('" + dir + "','" + src + "'," + amount + ")",100)}	return false
}
window.document.onmouseout = new Function("clearInterval(sRepeat);sRepeat=null");
window.document.ondragstart = new Function("return false");
 
function toggle( targetId ){
{target = document.all( targetId );
if (target.style.display == "none")
{
target.style.display = "";
} else {
target.style.display = "none";
  }
 }
}
</script>

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
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<body>
<table width="180px" height="130px" border="0" align="right" cellpadding="0" cellspacing="0">
  <tr>
    <td onmouseover="document.img_32.src='../images/fleche_haut_blanc.png';" onmouseout="document.img_32.src='../images/fleche_haut_vert.png';"><right> <a onmouseover="return doScrollerIE('up','menudefilant',10)" onmouseout="clearInterval(sRepeat)" href="#" class="font_blanc"><img src="../images/fleche_haut_vert.png" alt=" " name="img_32" width="50" height="19" border="0" id="img_32" /></a></right>
    </td>
  </tr>
  <tr>
    <td><div align="left" id="menudefilant"><br />
            <span class="Title1_blanc">* </span><a href="http://www.maghreb-facile.com" class="liens_interne_menu">Agenda</a><br />
            <span class="Title1_blanc">* </span><a href="http://www.maghreb-facile.com" class="liens_interne_menu">Association</a><br />
            <span class="Title1_blanc">*</span><a href="http://www.maghreb-facile.com" class="liens_interne_menu"> Commerce</a><br />
            <span class="Title1_blanc">*</span><a href="http://www.maghreb-facile.com" class="liens_interne_menu"> Finance</a><br />
            <span class="Title1_blanc">* </span><a href="http://www.maghreb-facile.com" class="liens_interne_menu">Immobilier</a><br />
            <span class="Title1_blanc">* </span><a href="http://www.maghreb-facile.com" class="liens_interne_menu">Location</a><br />
            <span class="Title1_blanc">* </span><a href="http://www.maghreb-facile.com" class="liens_interne_menu">Loisirs</a><br />
            <span class="Title1_blanc">* </span><a href="http://www.maghreb-facile.com" class="liens_interne_menu">Musique</a><br />
            <span class="Title1_blanc">* </span><a href="http://www.maghreb-facile.com" class="liens_interne_menu">Restauration</a><br />
            <span class="Title1_blanc">* </span><a href="http://www.maghreb-facile.com" class="liens_interne_menu">Service</a><br />
            <span class="Title1_blanc">* </span><a href="http://www.maghreb-facile.com" class="liens_interne_menu">Tourisme</a><br />
            <span class="Title1_blanc">*</span><a href="http://www.maghreb-facile.com" class="liens_interne_menu"> Voyage</a><br />
            <br />
    </div></td>
  </tr>
  <tr>
    <td onmouseover="document.img_33.src='../images/fleche_bas_blanc.png';" onmouseout="document.img_33.src='../images/fleche_bas_vert.png';"><right> <a onmouseover="return doScrollerIE('down','menudefilant',10)" onmouseout="clearInterval(sRepeat)" href="#" class="font_blanc"><img src="../images/fleche_bas_vert.png" alt=" " name="img_33" width="50" height="19" border="0" id="img_33" /></a> </right></td>
  </tr>
</table>
</body>
</html>

**xess91** · 01/02/2010, 09h29

Salut Karpe,

J'ai fait un petit script de menu défilant il n'y a pas longtemps, voila je te le passe pour exemple, il fonctionne avec le doctype que tu utilise sur IE 7, 8, Mozilla, Oepra, Safari, parcontre je suis casiment certain qu'il y a un problème avec les versions inférieurs à IE6 mais pas au niveau du javascript mais au niveau du CSS avec overflow:hidden.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
	<head>
		<meta name="TITLE" content="" />
		<meta name="DESCRIPTION" content="" />
		<meta name="KEYWORDS" content="" />
		<meta name="SUBJECT" content="" />
		<meta name="CATEGORY" content="" />
		<meta name="AUTHOR" content="" />
		<meta name="REPLY-TO" content="" />
		<meta name="REVISIT-AFTER" content="7 DAYS" />
		<meta name="LANGUAGE" content="FR" />
		<meta name="ROBOTS" content="All" />
		<meta http-equiv="PRAGMA" content="NO-CHACHE" />
		<title>
		</title>
		<script type="text/javascript">	
		<!--
			var up;
			var pos;
			var comparaison1;
 
			function mont()
				{
				var hauteur = document.getElementById('menu').offsetHeight;
				var comparaison = 50 - (hauteur);
				comparaison1 = comparaison;
				pos = parseInt(document.getElementById('menu').style.top);
				if(pos > comparaison && up == null)
					{
					up = setInterval("go()", 2);
					}
				}
 
			function go()
				{
				var element = parseInt(document.getElementById('menu').style.top);
				var etat = element - 1;
				document.getElementById('menu').style.top =  etat + "px";
				if(etat <= comparaison1)
					{
					clearInterval(up);
					up = null;
					}
				}
 
			function stop() { clearInterval(up); up = null; }
 
			function des()
				{
				pos = parseInt(document.getElementById('menu').style.top);
				if(pos < 0 && up == null)
					{
					up = setInterval("reverse()", 2);
					}
				}
 
			function reverse()
				{
				var element = parseInt(document.getElementById('menu').style.top);
				var etat = element + 1;
				document.getElementById('menu').style.top =  etat + "px";
				if(etat >= 0)
					{
					clearInterval(up);
					up = null;
					}
				}
			-->
		</script>
	</head>
<body style="margin:0px;padding:0px;background:url('fd.jpg');font-family:'Trebuchet MS';" >
<span onmouseover="des();" onmouseout="stop();" style="cursor:pointer;margin-top:3px;">>>>Up<<<</span>
<div style="width:100px;margin:2px;padding:10px;height:80px;background-color:white;border:solid 1px #555252;overflow:hidden;">
	<div style="position:relative;top:0px;font-size:10px;color:#555252;" id="menu">
		menu1<br />
		menu2<br />
		menu3<br />
		menu4<br />
		menu5<br />
		menu6<br />
		menu7<br />
		menu8<br />
		menu9<br />
		menu10<br />
	</div>
</div>
<span onmouseover="mont();" onmouseout="stop();" style="cursor:pointer;margin-top:3px;">>>>Down<<<</span>
</body>
</html>

@+

**karpe** · 01/02/2010, 18h18

Salut xess,
je te remercies pour ton script, je l'ai adapté sans problème sur ma page. Le résultat est impeccable.
H@ve @ nice.

Javascript des années Funk et doctype

JavaScript

Discussions similaires

Partager

Partager