[JAVASCRIPT] rendre disponible javascript !

Version imprimable

bonjour à tous,

j'ai trouvé ce ptit code bien interessant :

Citation:

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

Citation:

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

10/11/2006, 14h39
Matthieu2000

tu ne peux pas.

Citation:

<noscript>veuillez activer le javascrpt</noscript>
10/11/2006, 14h58
Joe Le Mort

peux tu m'expliquer un peu plus.
Pourquoi je peux tester sur le site du developpeur et pas sur mon site ???
10/11/2006, 19h23
Auteur

bonjour,

Citation:

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.
13/11/2006, 09h33
Joe Le Mort

Citation:

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 ?

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:

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

code complet :

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

15/11/2006, 17h08
Joe Le Mort
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:

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

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

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

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 ?

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:

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>

16/11/2006, 09h50
Joe Le Mort

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 ??
16/11/2006, 09h54
Auteur

Citation:

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 :aie:
16/11/2006, 10h02
Joe Le Mort

Citation:

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

Vu que ce sont des ID de sujets, ils sont forcément unique. Et pour l'instant, ils seront au maximum <100 ou <200 !
16/11/2006, 12h34
Joe Le Mort

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

Citation:

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

Je crois que si :aie:

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

Citation:

Erreur : cacheId is not defined

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

Code:

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>

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

script.htm :

Code:

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>

quand j'ouvre avec FF le code source :

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
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...

16/11/2006, 15h52
Joe Le Mort

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

Merci

J'ai
Code:

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

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:

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

16/11/2006, 16h10
Joe Le Mort

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:

<body onLoad="cacheId('contenu-13');cacheId('contenu-10');">
16/11/2006, 17h26
Auteur

Citation:

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.

Citation:

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).
17/11/2006, 10h41
Joe Le Mort

Citation:

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

Citation:

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/
17/11/2006, 10h52
Joe Le Mort

Pour le site, utilisez maintenant : www.tuxboard.com/actus.php

merci
17/11/2006, 12h50
Auteur

le script fonctionne ;)
17/11/2006, 16h19
Joe Le Mort

Citation:

Envoyé par Auteur

le script fonctionne ;)

8O j'ai rien touché !!!! 8O

Oua... bizarre quand meme.
En tout cas, merci pour ton aide tres importante Auteur ;)

Sincèrement,
Joe
20/11/2006, 10h21
Joe Le Mort

étrange, ca ne remarche plus...:?
Quelqu'un aurait une idée, ca marche, le lendemain, ca ne marche plus... Je suis un peu perdu
20/11/2006, 13h38
Matthieu2000

cela dépend de la durée de connection de la taille de la page...
enlève

Citation:

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

et ajoute en fin de page

Citation:

<script>
cacheId('contenu-13');
cacheId('contenu-10');
</script>
</body>
</html>
20/11/2006, 15h09
Joe Le Mort

Merci bcp Matthieu2000 ;)
Exactement ce qui me manquait 8-)