implementation d'un script d'effet - tipsy

**tydoo34** · 19/09/2011, 20h06

Bonjour à tous !

Voila je suis entrain de coder un réseau social. J'utilise un script JS qui s'appelle Tipsy.

Le script marche très bien , mais j'ai un petit problème avec le CSS.

En effet, je met en background une image pour la gauche, le centre et la droite du tipsy.

La gauche et le centre marche très bien. Mais la droite refuse de marcher. J'ai déjà tout tester, et impossible que ça marche !!

Voila le site. Passez la sourie sur le gros logo.
http://www.mdl-champollion.fr/

Je vous demande votre aide, car ça fait déjà 3 mois que je cherche et j'ai pas encore trouvé ^^

Merci a vous

ps : voila les codes :

CODE JS : http://www.mdl-champollion.fr/script/tipsy.js
CODE CSS : http://www.mdl-champollion.fr/script/tipsy.css

tydoo

Invité · 19/09/2011, 21h17

salut,

j'ai pas pigé ce qu'on doit observer et ce qui n'est pas observé.
Moi tout cque je vois, c'est quand je hover l'image mdl, ya maison des lycéens en tooltip, et c'est tout.

**SpaceFrog** · 19/09/2011, 21h20

En effet je pense que le plus simple serait que tu nous dise quel est l'effet souhaité, on pourra alors t'orienter vers un code ou un script voir une librairie d'effets ...

**tydoo34** · 19/09/2011, 21h35

Le script s'appelle tipsy.

Quand tu passe la sourie sur le logo, il te met une mini box avec marquer ce que tu veux dedant.

DAns le code JS; on peut parametré ce quon veux faire apparaitre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var tip = $.data(this, 'active.tipsy');
            if (!tip) {
                tip = $($(this).attr('tipsy') + '
<div class="tipsy">
 <div class="tipsy-left">
  <div class="tipsy-inner">' + $(this).attr('tipsy') + '
</div>
 <div class="tipsy-right">
</div>
</div>
</div>');
                tip.css({position: 'absolute', zIndex: 100000});
                $.data(this, 'active.tipsy', tip);
            }

tipsy left c'est l'image de gauche.
tipsy inner, c'est l'image du centre
tipsy right c'est l'image de droite

Mon problème, c'est que après

Code :

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

' + $(this).attr('tipsy') + '

le Tipsy-right ne marche pas.

**NoSmoking** · 20/09/2011, 22h25

Bonsoir,
as tu essayé une structure du type

Code :

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

1
2
3
4
5
<div class="tipsy">
 <div class="tipsy-left"></div>
 <div class="tipsy-inner"></div>
 <div class="tipsy-right"></div>
</div>

en mettant les DIV contenu en float:left

**tydoo34** · 20/09/2011, 22h28

Envoyé par NoSmoking

Bonsoir,
as tu essayé une structure du type

Code :

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

1
2
3
4
5
<div class="tipsy">
 <div class="tipsy-left"></div>
 <div class="tipsy-inner"></div>
 <div class="tipsy-right"></div>
</div>

en mettant les DIV contenu en float:left

float:left c'est quoi ?

**NoSmoking** · 20/09/2011, 22h33

c'est du CSS

Code html :

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
.tipsy-left, .tipsy-inner, .tipsy-right{
  float : left;
  height : 20px;
  border : 1px solid red;
}
</style>
</head>
<body>
<div class="tipsy">
 <div class="tipsy-left">Gauche</div>
 <div class="tipsy-inner">Texte au centre</div>
 <div class="tipsy-right">Droite</div>
</div>
</body>
</html>

**tydoo34** · 20/09/2011, 22h37

a oui ^^

J'essaie de voir avec float. Ca marche mais il y a un petit beugue. Un petit caré dans le coin inférieur droit refuse de s'afficher ^^

**tydoo34** · 20/09/2011, 22h40

C'est bon =) J'ai réussit a corrigé le bug !!

Merci beaucoup

Enfaite ca correspond a quoi Float ?

**NoSmoking** · 20/09/2011, 22h43

Envoyé par tydoo34

a oui ^^

J'essaie de voir avec float. Ca marche mais il y a un petit beugue. Un petit caré dans le coin inférieur droit refuse de s'afficher ^^

la structure n'est pas exactement la même, regarde l'enchainement des DIV,
ce que je t'ai mis

Code :

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

1
2
3
4
5
<div class="tipsy">
  <div class="tipsy-left">Gauche</div>
  <div class="tipsy-inner">Texte au centre</div>
  <div class="tipsy-right">Droite</div>
</div>

ce que tu as

Code :

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

1
2
3
4
5
6
<div class="tipsy">
  <div class="tipsy-left">Gauche
    <div class="tipsy-inner">Texte au centre</div>
  </div>
  <div class="tipsy-right">Droite</div>
</div>

**tydoo34** · 20/09/2011, 22h47

Enfaite c'étais simplement un petit problème de padding. Il n’étais pas encore asser large.

implementation d'un script d'effet - tipsy

JavaScript

Discussions similaires

Partager

Partager