Vérification code Javascript

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Vérification code Javascript

pauline46

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!

Publicité

Paulp

~, sweet ~

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

pauline46

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

Paulp

~, sweet ~

'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

FORUM HardWare.fr

Programmation

HTML/CSS

Vérification code Javascript

Sujets relatifs
[Javascript] sans doute une petite erreur dans mon javascript	que fait ce code de ORDImage
Validation formulaire impossible	Code Css erroné ?
Erreur code java String[][]	[Javascript//Xml] Port RS232 pour widget
PHP / JavaScript	[??] Création dynamique de page sur Mediawiki (à partir de code PHP)
[HTML/CSS/Javascript] Problème d'affichage avec ie	aidez moi svp dans la compréhension de ce code
Plus de sujets relatifs à : Vérification code Javascript

Page générée en 0.039 secondes