[JAVASCRIPT] rendre disponible javascript !

**Joe Le Mort** · 10/11/2006, 12h46

bonjour à tous,

j'ai trouvé ce ptit code bien interessant :

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
<style>
.clicTitre
  {
  border-color: #000000;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 2px dashed;
  background-color: #eeeeee;
  }
 
.clicCacher
  {
  top: -20px;
  position: relative;
  text-align:right;
  }
 
.contenant
  {
  display : block;
  border: 1px solid #000000;
  }
</style>
 
<script>
function afficheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
    }
  }
 
function cacheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
    }
  }
 
cacheId('contenu');
// si JavaScript est disponible, cache le contenu dès le
// chargement de la page. Sans JavaScript, le contenu sera
// affiché.
</script>
 
<div class="clicTitre">
  <a href="javascript:afficheId('contenu')">Nous contacter</a>
</div>
<div class="contenant" id="contenu">
  <div class="clicCacher">
    <a href="javascript:cacheId('contenu');">Fermer</a>
  </div>
...
</div>

le développeur écrit :

cacheId('contenu');
// si JavaScript est disponible, cache le contenu dès le
// chargement de la page. Sans JavaScript, le contenu sera
// affiché.

le probleme sur mon site, c'est que javascript n'est pas disponible, donc il affiche directement le contenu... Donc je n'ai pas besoin de cliquer sur afficher, car il s'affiche par défaut.

Comment rendre le javascript "disponible" afin qu'il ne soit pas affiché par défaut ??

Merci

**Matthieu2000** · 10/11/2006, 14h39

tu ne peux pas.

**Joe Le Mort** · 10/11/2006, 14h58

peux tu m'expliquer un peu plus.
Pourquoi je peux tester sur le site du developpeur et pas sur mon site ???

**Auteur** · 10/11/2006, 19h23

bonjour,

peux tu m'expliquer un peu plus.
Pourquoi je peux tester sur le site du developpeur et pas sur mon site ???

Matthieu2000 voulait dire que seul l'utilisateur du site peut décider si oui ou non le Javascript de son navigateur doit être activé. Le contenu des balises noscript est affiché si le javascript n'est pas activé.

Pour l'activer, il faut modifier les options.

**Joe Le Mort** · 13/11/2006, 09h33

Envoyé par Auteur

bonjour,

Matthieu2000 voulait dire que seul l'utilisateur du site peut décider si oui ou non le Javascript de son navigateur doit être activé. Le contenu des balises noscript est affiché si le javascript n'est pas activé.

Pour l'activer, il faut modifier les options.

dans ce cas, peux tu me dire pourquoi le script matche sur le site de l'auteur, et sur mon site, alros que je met la meme chose que lui, cela ne fonctionne pas ?

**Auteur** · 13/11/2006, 11h40

en prenant le code tel quel, il est vrai que cela ne marche pas. En fait, il faut appeler la fonction cacheId lors du chargement de la page :

Code :

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

1
2
 
<body onload="cacheId('contenu');">

code complet :

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
 
<html>
<head>
<title></title>
<style>
.clicTitre
  {
  border-color: #000000;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 2px dashed;
  background-color: #eeeeee;
  }
 
.clicCacher
  {
  top: -20px;
  position: relative;
  text-align:right;
  }
 
.contenant
  {
  display : block;
  border: 1px solid #000000;
  }
</style>
 
<script>
function afficheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
    }
  }
 
function cacheId(baliseId)
  {
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
    }
  }
 
 
// si JavaScript est disponible, cache le contenu dès le
// chargement de la page. Sans JavaScript, le contenu sera
// affiché.
</script>
</head>
 
<body onload="cacheId('contenu');">
 
<div class="clicTitre">
  <a href="javascript:afficheId('contenu')">Nous contacter</a>
</div>
<div class="contenant" id="contenu">
  <div class="clicCacher">
    <a href="javascript:cacheId('contenu');">Fermer</a>
  </div>
...
</div>
 
</body>
 
</html>

**Joe Le Mort** · 15/11/2006, 17h08

J'ai rajouté des trucs :
http://www.alexandreval.info/musique/actus.php

par exemple, j'affiche les x derniers topic d'un forum...
je récupere les ID des sujet et je boucle pour avoir le body onload avec tous les contenus des sujets a fermer :

Code PHP :

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

1
2
3
for ($i=0; $i < count($topic['topic_id']); $i++){
			$onload .= "cacheId('contenu-".$topic['topic_id'][$i]."');";
		}

Code PHP :

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

<body<?php if ($onload != ''){?> onload="<?php echo $onload;?>"><?php }?>

j'ai donc 2 news actuellement, avec les id = 13 et 10.
j'obtiens :

Code HTML :

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

1
2
</head>
<body onLoad="cacheId('contenu-13');cacheId('contenu-10');">

Le probleme est qu'ils se ne ferment plus...
Bien sur ce procédé ne fonctionne pas sous FF

, dommage.
une idée, ais je fais une erreur ?

**Auteur** · 15/11/2006, 22h46

je ne connais pas suffisament PHP pour te dire si ton code est juste ou non. Mais voici le code que tu devrais avoir. J'ai rajouté la classe largeurDiv qui définit la largeur des éléments.

Code x :

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
<html>
<head>
<title></title>
<style type="text/css">
<!--
.largeurDiv{
 width: 500px;
}
.clicTitre
  {
  border-color: #000000;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  border-bottom: 2px dashed;
  background-color: #eeeeee;
  }
 
.clicCacher
  {
  top: -20px;
  position: relative;
  text-align:right;
  }
 
.contenant
  {
  display : block;
  border: 1px solid #000000;
  }
//-->
</style>


<script type="text/javascript">
<!--
function afficheId(baliseId)
{
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='visible';
    document.getElementById(baliseId).style.display='block';
    }
}
 
function cacheId(baliseId)
{
  if (document.getElementById && document.getElementById(baliseId) != null)
    {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
    }
}

//-->
</script>
</head>
 
<body onload="cacheId('contenu-1');cacheId('contenu-2');">
 
<!--- Paragraphe 1-->
<div class="clicTitre largeurDiv">
     <a href="javascript:afficheId('contenu-1')">Afficher message 1</a>
</div>
<div class="contenant largeurDiv" id="contenu-1">
     <div class="clicCacher">
          <a href="javascript:cacheId('contenu-1');">Fermer</a>
     </div>
    Contenu 1 :<br>
    Tout mon bla bla
</div>
<!--- Fin Paragraphe 1-->

<!--- Paragraphe 2-->
<div class="clicTitre largeurDiv">
     <a href="javascript:afficheId('contenu-2')">Afficher message 2</a>
</div>
<div class="contenant largeurDiv" id="contenu-2">
     <div class="clicCacher">
          <a href="javascript:cacheId('contenu-2');">Fermer</a>
     </div>
     Contenu 2 :<br>
     Tout le contenu 2
</div>
<!--- Fin Paragraphe 2-->

</body>
 
</html>

**Joe Le Mort** · 16/11/2006, 09h50

Merci de ton aide Auteur.
Bizarrement, je n'ai pas d'erreur en regardant ton code. C'est exactement ce que j'obtiens. Mes id ne commencent pas a 0,1..etc mais sont tres aléatoires, en fonction des posts du forum.

Avis au Modo : Est-ce interessant de splitter le sujet en PHP ??

**Auteur** · 16/11/2006, 09h54

Envoyé par Joe Le Mort

Mes id ne commencent pas a 0,1..etc mais sont tres aléatoires, en fonction des posts du forum.

aléatoires ? Je ne te le recommande pas. Si par malheur deux div ont le même id, le code ne fonctionnera pas. Ou alors prends des (très) grands nombres pour éviter les doublons. Mais avoir par exemple id=5312640098423 n'est pas ce qu'il y a de plus pratique

**Joe Le Mort** · 16/11/2006, 10h02

Envoyé par Auteur

aléatoires ? Je ne te le recommande pas. Si par malheur deux div ont le même id, le code ne fonctionnera pas. Ou alors prends des (très) grands nombres pour éviter les doublons. Mais avoir par exemple id=5312640098423 n'est pas ce qu'il y a de plus pratique

Vu que ce sont des ID de sujets, ils sont forcément unique. Et pour l'instant, ils seront au maximum <100 ou <200 !

**Joe Le Mort** · 16/11/2006, 12h34

personne n'a une idée sur ce probleme (qui syntaxiquement, n'ets pas un probleme !)??

**Auteur** · 16/11/2006, 13h03

personne n'a une idée sur ce probleme (qui syntaxiquement, n'est pas un probleme !)??

Je crois que si

J'ai regardé ta page. Firefox me renvoie un erreur :

Erreur : cacheId is not defined

Et lorsque j'ouvre ta page html, je ne comprends pas :

Code :

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

1
2
3
<script type="text/javascript" src="actus.php_fichiers/script.htm"></script>
<script type="text/javascript" src="actus.php_fichiers/compteur_mesg.htm"></script>

Les scripts ne sont pas dans des fichiers htm mais dans des fichiers JS d'une part et d'autre part :

script.htm :

Code html :

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
 
<!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="en" lang="en">
   <head>
      <title>Error 400!</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="cache-control" content="no-cache" />
   </head>
   <body style="font-family:arial;">
  	<h1 style="color:#0a328c;font-size:1.0em;">FICHIER NON TROUVE</h1>
	<p style="font-size:0.8em;">Le fichier requis n'a pas été trouvé.
Il peut s'agir d'une erreur technique. Veuillez réessayer ultérieurement. Si vous ne pouvez pas accéder au fichier après plusieurs tentatives, cela signifie qu'il a été supprimé.
</p>
   </body>
  </html>

**Joe Le Mort** · 16/11/2006, 13h19

quand j'ouvre avec FF le code source :

Code HTML :

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
 
<!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">
<head>
<meta http-equiv="content-language" content="fr" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Un classment des internautes concernant leur gouts musicaux : Meilleur Album, Meilleur groupe artiste, meilleur chanson. Un Forum est joint pour créer une communauté." />
<meta name="keywords" content="musique,hit,top,classement,meilleur,chanson,groupe,vote,album,sortie,actualité,rss,CSS,php" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="15days" />
<meta name="identifier-url" content="http://www.tuxboard.com" />
<meta name="author" content="Joe Le Mort" />
<meta name="reply-to" content="webmaster@tuxboard.com" />
<title>Tuxboard : Classement des meilleurs musiques, chansons, albums, groupes</title>
<link href="musique.css" rel="stylesheet" type="text/css" />
<link href="creation_groupe_artiste.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/compteur_mesg.js"></script>
</head><body onLoad="cacheId('contenu-13');cacheId('contenu-10');"><div><a href="index.php" class="imglink"><img src="images/logo_home2.gif"  width="333px" height="100px" border="0" alt="Tuxboard, Classement des meilleurs musique, chansons, albums, groupes" /></a></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  	<tr>
		<td><div id="list-menu">
	<ul>
			<li><a href="index.php">Accueil</a></li>
		<li><a href="actus.php">Actus</a></li>
 
		<li><a href="groups.php">Artistes</a></li>
		<li><a href="albums.php">Albums</a></li>
		<li><a href="chanson.php">Chansons</a></li>
		<li><a href="topvotes.php">Top Votes</a></li>
		<li><a href="forum/">Forum</a></li>
		<li><a href="contact.php">Contact</a></li>
 
 
	</ul> 
</div></td>
	</tr>
  <tr>
    <td>
....
 
....etc...

j'ai pas ce probleme que tu as...

**Joe Le Mort** · 16/11/2006, 15h52

une aide extérieur qui pourrait juste lire les 3 derniers posts !

Merci

**Arnard** · 16/11/2006, 16h02

J'ai

Code :

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

1
2
3
 
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/compteur_mesg.js"></script>

Sinon FF me signale que cacheId n'est pas défini

Pour le script.htm je vois pas

Sinon en testant : tes fichiers js sont dans le meme repertoire que tes fichiers php, donc src="js/script.js" devient src="script.js"

Code :

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

1
2
script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="compteur_mesg.js"></script>

**Joe Le Mort** · 16/11/2006, 16h10

Merci arnard du coup de main.

Pour le repertoire des Javascript, c'est bien dans js/fichier...!

j'avais laissé les anciens fichiers a la racine, je viens de les supprimer.
Euh il n'y a pas de script.htm.

le script fonction quand on clique sur FERMER pour les news, donc le javascript marche correctement.
MAIS il ne s'exécute pas automatiquement dans le body, malgré que je lui indique le bon nom en parametre :

Code HTML :

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

<body onLoad="cacheId('contenu-13');cacheId('contenu-10');">

**Auteur** · 16/11/2006, 17h26

Envoyé par Joe Le Mort

j'avais laissé les anciens fichiers a la racine, je viens de les supprimer.
Euh il n'y a pas de script.htm.

j'ai enregistré ta page sur le disque, et un script.htm est apparu. J'ai testé à plusieurs reprises : je n'arrive pas à récupérer le script.
Sous FF : script.htm est présent.
Sous IE : le fichier passe à la trappe. Le lien vers le fichier n'existe même plus.

le script fonction quand on clique sur FERMER pour les news, donc le javascript marche correctement.
MAIS il ne s'exécute pas automatiquement dans le body, malgré que je lui indique le bon nom en parametre :

regarde voir en mettant onload en minuscule (je n'y crois pas trop mais bon).

**Joe Le Mort** · 17/11/2006, 10h41

Envoyé par Auteur

regarde voir en mettant onload en minuscule (je n'y crois pas trop mais bon).

J'avais deja essayé, mais rien n'y fait

Envoyé par Auteur

j'ai enregistré ta page sur le disque, et un script.htm est apparu. J'ai testé à plusieurs reprises : je n'arrive pas à récupérer le script.
Sous FF : script.htm est présent.
Sous IE : le fichier passe à la trappe. Le lien vers le fichier n'existe même plus.
regarde voir en mettant onload en minuscule (je n'y crois pas trop mais bon).

Bizarre ce script.htm, mes scripts sont dans un rep nommé : js/