Vérification code Javascript

Marsh Posté le 08-06-2011 à 17:32:56

Hello

Est-ce que quelqu'un peut me donner son avis sur mon code? Je me suis basée de ce tuto:
http://www.tefdesign.fr/tutoriels/cree [...] e-coda-panic/

Je sais très bien que j'ai fait des erreurs dans le javascript, mais je n'arrive plus à voir lesquelles...

Le code:

<!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">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>essais bulle</title>
<link charset="utf-8" href="frise_style.css" rel="stylesheet" media="screen" type="text/css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="application/x-javascript">
$(function(){
var popupHide = 0;
$(.content).hover(function(){
if(popupHide==0){
$('em'.this).animate([opacity.'show'.top:'-80'].'slow');
popuHide= 1;
} else{
$('em'.this).animate([opacity.'hide'.top:'-100'].'fast');
popuHide= 0;
})
})
</script>
</head>

<body>
<div id="header">
<h3> Essai</h3>
</div>
<div id="container">

<div class="content"><em><strong>Type:</strong>Ressources<br /><strong>Titre:</strong>Thème Coda</em></div>

</div>
</body>
</html>

Et le css:

@charset "utf-8";
/* CSS Document */

body{background-color:#F00;}

#container {
width:700px;
height:1000px;
background-color:#F00;
margin:70px auto 0;
border:5px solid #cacaca;
padding-left:200px;}

#container .content{
background:url(../expo_virtuelle/1856.png) no-repeat;
width: auto;
height: auto;
display:inline-block;
margin-left:70px;
margin-right:150px;
cursor:pointer;
position:relative;
}

#container .content em {
background:url(../expo_virtuelle/bulle.gif) no-repeat;
width:800px;
height:600px;
margin-left:-115px;
margin-top:-70px;
padding-left:80px;
padding-top:30px;
line-height:40px;
position:absolute;
display:none;
top:-100px;

Merci d'avance!

Reply

Marsh Posté le 08-06-2011 à 17:32:56

Reply

Marsh Posté le 08-06-2011 à 17:57:26

- utilise les balises [ code=html] [ /code] (sans les espaces, et en remplacant html par le langage voulu)
- $(.content) => $('.content')
- la concaténation se fait avec le +, pas le .
- que veux tu faire avec la ligne $('em'.this).animate([opacity.'show'.top:'-80'].'slow'); Je ne comprends pas le $('em'.this) et le [opacity.'show'.top:'-80'].'slow'
- globalement, le code est assez propre.

Reply

Marsh Posté le 08-06-2011 à 18:16:22

C'est noté pour les balises.
L'idée de départ est de faire apparaître et disparaître une infobulle.
Pour $('em'.this).animate([opacity.'show'.top:'-80'].'slow');
"em" correspond à l'infobulle. Cela permet de créer une animation, on "récupère" l'infobulle qui s'affiche lentement et s'efface rapidement (on déclare une variable qui détecte le mouvement de la souris). Je ne sais pas si je suis très claire.. :sarcastic:

J'ai bien remplacé $(.content) par $('.content'), et j'ai aussi remplacé le . par le + pour la concaténation, seulement ça ne marche pas. Je trouve cela bien compliqué, mon idée de départ était de faire apparaître des infobulles (en forme de bulle de bd) sur des dates...

Reply

Marsh Posté le 09-06-2011 à 10:00:22

'em'.this ne veut rien dire. Je ne comprends toujours pas ce que tu comptes faire. Littéralement, tu appelle la propriété this de l'objet 'em' qui est une chaine de caractères.

De la même manière, [opacity.'show'.top:'-80'].'slow' ne signifie rien.
Le . sert à deux choses :
- séparer la partie entière des décimales d'un nombre : pi = 3.14
- accéder à un attribut ou une méthode d'un objet :

Code :

'toto'.toUpperCase(); // donne 'TOTO'

les [ ] servent à définir un tableau :

Code :

var tab = [10,20,30];
alert(tab[0]); // affiche 10
alert(tab[1]); // affiche 20
tab[1]='toto';
alert(tab[1]); // affiche toto

Si je me réfère à la doc : http://api.jquery.com/animate/
Il faut faire

Code :

// ce code va s'appliquer sur tout les em,
//mais je ne comprends pas ton sélecteur 'em'.this
$('em').animate({
  opacity:'show',
  top:'-80'
});

Message édité par Paulp le 09-06-2011 à 10:00:35

Reply

Vérification code Javascript

Sujets relatifs:

Leave a Replay