implementation d'un script d'effet - tipsy

Version imprimable

19/09/2011, 20h06
tydoo34

implementation d'un script d'effet - tipsy

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
19/09/2011, 21h17
Invité

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.
19/09/2011, 21h20
SpaceFrog

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

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:

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:

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

le Tipsy-right ne marche pas.

Bonsoir,
as tu essayé une structure du type
Code:

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

20/09/2011, 22h28
tydoo34
Citation:
Envoyé par NoSmoking

Bonsoir,
as tu essayé une structure du type

Code:

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 ?

c'est du CSS

Code:

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>

20/09/2011, 22h37
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 ^^
20/09/2011, 22h40
tydoo34

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

Merci beaucoup :)

Enfaite ca correspond a quoi Float ?
20/09/2011, 22h43
NoSmoking
Citation:

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:

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:

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>
20/09/2011, 22h47
tydoo34

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