implementation d'un script d'effet - tipsy [Résolu]

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

galerien69 · 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

Citation:

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

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 :

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.

19/09/2011, 20h06	#1
tydoo34 Futur Membre du Club Thomas BOYER Étudiant Inscription : septembre 2011 Messages : 27 Détails du profil Informations personnelles : Nom : Thomas BOYER Localisation : France, Hérault (Languedoc Roussillon) Informations professionnelles : Activité : Étudiant Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2011 Messages : 27 Points : 18 Points : 18	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
	00

19/09/2011, 21h20	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	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 ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

19/09/2011, 21h17	#2
galerien69 Membre éclairé F5(){F5} Inscription : avril 2008 Messages : 256 Détails du profil Informations personnelles : Sexe : Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : F5(){F5} Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2008 Messages : 256 Points : 320 Points : 320	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.
	00

20/09/2011, 22h37	#8
tydoo34 Futur Membre du Club Thomas BOYER Étudiant Inscription : septembre 2011 Messages : 27 Détails du profil Informations personnelles : Nom : Thomas BOYER Localisation : France, Hérault (Languedoc Roussillon) Informations professionnelles : Activité : Étudiant Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2011 Messages : 27 Points : 18 Points : 18	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 ^^
	00

20/09/2011, 22h40	#9
tydoo34 Futur Membre du Club Thomas BOYER Étudiant Inscription : septembre 2011 Messages : 27 Détails du profil Informations personnelles : Nom : Thomas BOYER Localisation : France, Hérault (Languedoc Roussillon) Informations professionnelles : Activité : Étudiant Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2011 Messages : 27 Points : 18 Points : 18	C'est bon =) J'ai réussit a corrigé le bug !! Merci beaucoup Enfaite ca correspond a quoi Float ?
	00

20/09/2011, 22h47	#11
tydoo34 Futur Membre du Club Thomas BOYER Étudiant Inscription : septembre 2011 Messages : 27 Détails du profil Informations personnelles : Nom : Thomas BOYER Localisation : France, Hérault (Languedoc Roussillon) Informations professionnelles : Activité : Étudiant Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2011 Messages : 27 Points : 18 Points : 18	Enfaite c'étais simplement un petit problème de padding. Il n’étais pas encore asser large.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email