[JAVASCRIPT] rendre disponible javascript !

Version imprimable

Voir 40 message(s) de cette discussion en une page

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="[email protected]" />
<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
16/11/2006, 16h02
Arnard
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

Voir 40 message(s) de cette discussion en une page