Discussion :

[Jane Home]

Bonjour,

J'ai écris un bout de code pour afficher/masquer une div à l'aide de javascript et css.
Le css est trouvé dans le code cgi perl mais je ne pense que le javascript s'exécute(pas d'effet affichage/masquage). Ma question : Pouquoi?? Qu'est ce qui cloche.

Si quelqu'un a une idée...
Merci et bonne journée.

test.pl

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
#!/usr/bin/perl -w
use CGI::Pretty ":standard";
use CGI;
use strict;
use DBI;
use CGI::Carp qw(fatalsToBrowser warningsToBrowser);
warningsToBrowser(1);
 
my $cgi = new CGI;
print $cgi->header;
print $cgi->start_html(
	-title=>'Welcome',
 	-style => { -src => '/fastdb2/tableau.css',-type => 'text/css', -media => 'all' },
 	-script=>{-type => 'javascript',-src=>'/fastdb2/effet.js'});
print "<div class='clicTitre'>";
print "  <a href='javascript:afficheId('contenu')'>Nous contacter</a>";
print "</div>";
print "<div class='contenant' id='contenu'>";
print "  <div class='clicCacher'>";
print "    <a href='javascript:cacheId('contenu');'>Fermer</a>";
print "  </div>";
print "NOTRE TEXTE";
print "</div>";
print $cgi->end_html;

tableau.css

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

Effet.js

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

[djibril]

Ce n'est pas un souci Perl mais HTML. Ton code HTML est mal conçu avec des simples quote se mélangeant au double quote. Pour détecter ce genre d'erreur :

Code :

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

print "  <a href='javascript:afficheId('contenu')'>Nous contacter</a>";

Il faut lire le code source de ta page HTML générée et tu verras :

Code html :

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

<a href='javascript:afficheId('contenu')'>Nous contacter</a>

doit être

Code html :

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

<a href="javascript:afficheId('contenu')">Nous contacter</a>

etc

Voici ton code Perl corrigé et je viens de tester et ça fonctionne :

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
#!/usr/bin/perl
use warnings;
use CGI::Pretty ":standard";
use CGI;
use strict;
use DBI;
use CGI::Carp qw(fatalsToBrowser warningsToBrowser);
warningsToBrowser(1);
 
my $cgi = new CGI;
print $cgi->header;
print $cgi->start_html(
	-title=>'Welcome',
 	-style => { -src => '/fastdb2/tableau.css',-type => 'text/css', -media => 'all' },
 	-script=>{-type => 'javascript',-src=>'/fastdb2/effet.js'}
);
print <<"CODECGI";
<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>
    NOTRE TEXTE
</div>
CODECGI
print $cgi->end_html;

[Jane Home]

Ok super merci, et une dernière question au passage.
C'est plus sur le javascript...
Le script s'éxecute mais il affiche directement le contenu de ma div.
J'aimerai qu'elle soit masquée dans un premier pour que l'utilisateur puisse ensuite l'afficher (et non l'inverse).

Et encore merci pour la rapidité de ta réponse :-)

[djibril]

Il suffit de ne pas afficher le contenu de ta balise div dans ta feuille de style par défaut. Le changement est à effectuer dans le feuille de style :

Code css :

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

1
2
3
4
.contenant {
  display : none;
  border: 1px solid #000000;
}

Par défaut, le div ne sera pas affiché.

[Jane Home]

Génial
Jte remercie :-)