INFO BULLE COMPATIBLE SELECT ET DOCTYPE
nickadele
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013
-
22 juin 2006 à 09:43
cs_Emilien69 Messages postés 2 Date d'inscription mardi 8 avril 2008 Statut Membre Dernière intervention 9 février 2009 - 12 févr. 2009 à 08:21
cs_Emilien69 Messages postés 2 Date d'inscription mardi 8 avril 2008 Statut Membre Dernière intervention 9 février 2009 - 12 févr. 2009 à 08:21
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/38238-info-bulle-compatible-select-et-doctype
https://codes-sources.commentcamarche.net/source/38238-info-bulle-compatible-select-et-doctype
12 févr. 2009 à 08:21
Superbe sources
Mais j'ai une question, Est il possible de mettre une image dans la bulle
EXEMPLE:
<td>
</td>
Merci d'avance
28 nov. 2008 à 19:27
En tout cas merci et chapeau pour la réactivité
28 nov. 2008 à 16:51
La source a été mise à jour, cela aurait normalement déjà du être fait depuis belle burette mais bon...
;O)
27 nov. 2008 à 15:46
27 nov. 2008 à 10:34
J'ai quand meme decouvert un ptit bug.
Je me suis servi de ce script sur le site suivant :
http://murrisk2008.free.fr
Et le petit bug est que le calcul de la position de la bulle prend en compte la proximité de bas de page mais également le .
Lorsqu'on a une bulle en fin d'une page courte, pifff, on voit la bulle qui remonte alors qu'on est au milieu de la fenetre.
Si vous avez une idée de correction, je prends !
17 juil. 2008 à 12:23
11 juil. 2008 à 07:12
version 3.1.1 (525.17)
8 janv. 2008 à 14:07
15 oct. 2007 à 21:17
Merci encore à toi !
7 oct. 2007 à 21:59
7 oct. 2007 à 21:57
http://www.hiboox.com/lang-fr/image.php?img=32qhdil1.jpg
Est ce que quelqu'un a une solution pour régler ce pbm svp?
27 sept. 2007 à 18:06
26 sept. 2007 à 01:03
C'est le seul que j'ais essayer qui fonctionne indépendemment du navigateur utiliser.
J'ais cependant quelque soucis pour customiser la bulle.
Je n'arrive pas a enlever la bordure bleu même en définissant une
bordure directement dans le .js. elle apparaît entouré de la bordure bleu.
Il m'est également impossible d'y mettre une image transparente en fond ou d'utiliser la fonction opacity.
Quelqu'un a-t-il une idée?
2 août 2007 à 19:48
La partie finale du code, avec le document.write( Html), crée dans la page le DIV Bulle et l'IFRAME associée.
Je ne pense pas que ce soit cela qui affiche un vide.
Je concéde cela n'est pas très élégant, il faudrait qu'à l'occasion je le refasse plus propre avec des document.createElement.
Si tu as un lien pour tester le truc, pas dans l'immédiat vacances obligent.
;0)
2 août 2007 à 17:25
est ce que c'est possible de mettre cette partie du code dans un fichier css?
merci de votre aide.
28 juil. 2007 à 19:08
merci de ta réponse Nickadele. j'ai pensé à cette éventualité: que le div absolute force le positionnement et je crois bien que c'est ça le problème. j'ai mis un position absolute pour le style de la Bulle et le positionnement est revenu à la normale.
encore merci
28 juil. 2007 à 13:05
Sam98, j'ai eu ce problème, chez moi cela provenait d'un DIV qui forçait le positionnement genre "POSITION:absolute;" !
Le mieux c'est d'adapter ton code en testant à partir de FF et puis éventuellement adapter certaines partie pour être compatible IE.
Mais je te confirme que ce code fonctionne très bien.
Nickadele
26 juil. 2007 à 22:55
j'ai bien réécris le code javascript mais sans résultat. j'ai même fait mieux: téléchargé le fichier js de nouveau pour remplacer le code existant. Les bulles s'affichent toujours en haut de page. je ne vous envoie pas le code html, c'est le même que celui ci-dessus. et le js est le même fichier que dans le .zip
Bizzare que le décalage ne se manifeste que sous firefox.
Si vous avez une idée d'où ça peut venir, sinon ce n'est pas grave. votre aide m'a été précieuse jusque là.
merci
26 juil. 2007 à 17:22
Si tu supprimes la première balise TABLE il te faut supprimer la fermeture de celle ci
//-- Ecriture de la Bulle
/*Html = "";*/
Html = "<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=4 BGCOLOR='#FFFFFF' >";
Html += "----, \";
Html += txt_;
Html += "</TD>
</TD></TR></TABLE>";
et de ce fait écrire plutôt
//-- Ecriture de la Bulle
/*Html = "";*/
Html = "<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=4 BGCOLOR='#FFFFFF' >";
Html += "----, \";
Html += txt_;
Html += "</TD>
";/*</TD></TR></TABLE>";*/
;0)
26 juil. 2007 à 13:52
function BulleWrite( txt_, x_, y_){
var B_Obj = GetObjet( 'Bulle');
var F_Obj = GetObjet( 'FBulle');
var Html;
if( !bINIT) Init_Bulle();
if( B_Obj){
//-- Récup dimension d'affichage
Get_DimFenetre();
// Decalage hors de la Bulle
Decal_X =( x_ ? x_: 5);// Decal_X = 5 par défaut
Decal_Y =( y_ ? y_: 5);// Decal_Y = 5 par défaut
//-- Ecriture de la Bulle
/*Html = "";*/
Html = "<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=4 BGCOLOR='#FFFFFF' >";
Html += "----, \";
Html += txt_;
Html += "</TD>
</TD></TR></TABLE>";
B_Obj.innerHTML = Html;
//-- Ajout pour SELECT sous IE
if( bSELECT){
with(F_Obj.style){
height = B_Obj.offsetHeight;
width = B_Obj.offsetWidth;
left = B_Obj.offsetLeft;
top = B_Obj.offsetTop;
}
}
et voilà le code html que j'utilise:
<MAP NAME="EcoAct programmes en cours">
[programmes-par-pays.php?pays=Bresil ]
j'ai juste un problème sous firefox. les bulles s'affichent en haut de page
merci de votre aide
23 juil. 2007 à 21:39
Sans une bribe d'information sur ce qui à été modifier difficile de dire.
Si tu as une adresse pour aller voir le problème cela serait merveilleux.
23 juil. 2007 à 11:01
merci
17 juil. 2007 à 20:23
encore merci
17 juil. 2007 à 20:08
Cela ce passe dans la fonction BulleWrite()
- supprime le NOWRAP dans la ligne
Html += "<TR><TD class='Bulle' NOWRAP>";
- fixe la largeur souhaitée dans cette même ligne
Html += "<TR><TD class='Bulle' WIDTH='200'>";
Voili voilou !
;O)
17 juil. 2007 à 11:48
merci de votre aide
8 juin 2007 à 13:49
j'ai remplacé la bulle par un div que je personnalise par css, et maintenant ca marche :)
8 juin 2007 à 13:35
Le NOWRAP est historique mais pas indispensable voir
commentaire de : Souboc le 27/07/2006 et encore celui de nikola150 le 12/12/2006.
Sur IE7,si l'affichage ne ce fait pas il se peut qu'il y ai une gestion différente entre IE7 et FF, c'est même d'ailleurs sur, mais je ne pense pas que l'InfoBulle soit en cause...
Je n'utilise pas IE7 mais si tu as un lien pour que je jete un oeil je suis preneur, les BUGs sournois peuvent exister.
;0)
3 juin 2007 à 16:13
La bulle sur IE7 est de la bonne taille comme si il y avait le texte mais il ne s'affiche pas.
Meme chose si au lieu de mettre un tableau dans la bulle je met un div avec une longueur définie.
3 juin 2007 à 14:37
Par contre juste un petit détail : pourquoi laisser l'attribut NOWRAP ligne 260 du fichier .js ?
Cela empêche d'ajuster la taille du tableau de la bulle lorsqu'il y a des textes plus ou moins longs à l'intérieur...
12 déc. 2006 à 17:36
NIKOLA150 à tout à fait raison, personne n'en douté d'ailleurs. De nos jour il est préférable de définir la class dans une feuille de style qui présente l'avantage, outre de coller à l'air du temps, d'être différente pour chaque page d'un site.
Pour la petite histoire à l'époque ou j'ai crée l'ossature de ce script je bossais sous NS4 et IE5 d'ou l'utilisation de TABLE et non de DIV car le style était souvent mal interprété et très différent d'un exploreur à l'autre...
12 déc. 2006 à 10:26
Html = "
";
Html += txt_;
Html += "
";
à la place de :
Html = "";
Html += "<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=4 WIDTH='100%' BGCOLOR='#FFFFE8'>";
Html += "----, \";
Html += txt_;
Html += "</TD>
</TD></TR></TABLE>";
Et j'utilise les CSS pour personaliser la bulle.
++
12 déc. 2006 à 10:13
c'est à dire donner les modifs que tu as faites
merci d'avance
2 nov. 2006 à 11:10
2 nov. 2006 à 11:04
Je te suggère simplement de générer tes bulle en tableless en mettant un simple div avec une class se qui permet de gérer plus facilement la personnalisation des bulles (plus dans le js mais directement dans les css).
Je l'ai fait chez moi ça marche nikel.
Merci pour ce bon boulo
Niko
26 sept. 2006 à 16:06
Ayant développé un frontal WEB pour interagir dynamiquement avec des BD MySQL de labo. de recherche, et ayant testé uniquement l'appli sous FF... j'ai eu peur en voyant mes jolies infobulles masquées par les éléments SELECT dans M$ IE6 (paraît que la v7 prend en compte la propriété 'z-order' pour les SELECT... mieux vaut tard que jamais ?) !
La pauvre recherche institutionnelle t'est reconnaissante.
Robert
16 sept. 2006 à 06:34
Désolé pour la prise de tête ;-)
J'ai moi aussi passé une bonne heure avant de découvrir par élimination que le fauteur de trouble était le charset... En effet de virer les accents dans le js résoud le prbl ! IE et ses délires...
le return ( true); à la fin de WhereMouse(e) est aussi la solution pour IE et le probl de selection à la souris.
QUant au problème d'un trop grand nombre de caractères j'ai aussi réussi à la reproduire sur gfbulle.htm. En fait sur certains éditeurs html comme dreamweaver lorsque tu as de longues lignes il revient à la ligne automatiquement, du coup le texte de l'infobulle ne s'affiche plus si le ') à la fin de BulleWrite (' ... n'est pas sur la même ligne.
Merci pour les solutions !
15 sept. 2006 à 18:56
15 sept. 2006 à 18:44
disponible en espérant qu'elle satisfasse le plus grand nombre.
To : NICKADELE
une précision PetoleTeam et non PetroleTeam, je manque d'air<RIRES>...
Petole = abscence de Vent
Petrole = abscence de sentiments
Mais quoi qu'il arrive NoBlem d'ailleurs je viens juste de m'en rendre compte...
;0)
15 sept. 2006 à 16:38
15 sept. 2006 à 15:38
ICONE71 = Remue Meninges et je m'explique...
Perso je travaille, sous NOTEPAD et j'utilise une trame qui date mais qui reprend charset=iso-8859-1...
Je viens de la changer pour, outre le débat que cela sussite, adopter le CHARSET=UTF-8 plus recommandable par le W3c d'ailleurs.
Cela ne me pose pas de problème majeur car je saisie les caractères accentués comme é é. SAUF dans les commentaires...
Revenons à nos moutons...
POINT 1:
avec charset=UTF-8 sous IE même la ligne de commentaire...
<!-- DEB compatibilité -->
...est interprétée et supprime tous ce qui est entre <!!-- et --> dont le SELECT
sous FF No Blem
en effet il semblerait que cela soit le é avant --> qui pose problème
CORRECTION:
pour éviter l'erreur il me suffit donc de mettre
if( Obj && Obj.length){
...blabla...
}
OUI MAIS
La ligne Obj = document.getElementsByTagName('SELECT');
retourne Obj [Object] et Obj.length 1; avec charset=iso-8859-1
et retourne Obj = undefined avec charset=UTF-8
GROS BLEM.....
...2 HEURES ce sont passées depuis le début des notes que je prend...
EN FIN de COMPTE
Le commentaire dans le fichier .js fout une M####E pas possible donc j'ai viré les accents ET ça marche...
Le plus surprenant est que 1 coup ça marche pas l'autre ???
En mettant un alert( arguments.callee); en début de function on peut voir comment IE et les autres voient le code différement...
POINT 3: YO !!
Allez savoir pourquoi j'ai ajouté un return( false); en fin de fonction WhereMouse(e), c'est lui le fautif à couper<JEUX DEUX MOTS>...
Cela ne se produit effectivement que sous IE qui doit gérer la propagation différement...
ET le POINT 2 me diras tu...
la je ne peux rien dire il me faudrait un lien pour voir le phénomêne...
PS : La modification concernant les 2 points traitée ne saurait tarder, il me semble que je l'ai déjà dis...
Encore merci pour votre participation active.
15 sept. 2006 à 10:49
15 sept. 2006 à 10:46
Non je fais simplement un champ texte (textarea ou type) et je mets l'action de l'infobulle dessus pour quand on survole le input il y ait une infobulle qui apparaisse (gestion de messages d'erreurs). Mais je rappelle que le problème se pose sur gfbulle.htm ou sur n'importe quelle page à laquelle on associe le js des infobulles, sous IE.
15 sept. 2006 à 07:22
le Input, c'est dans l'infobull que tu l'ajoutes ?
Nickadele
14 sept. 2006 à 19:57
if( Obj.length) // Ligne à ajouter...
ne fonctionne pas, en tout cas dans mon cas...)
14 sept. 2006 à 19:01
Après avoir un peu "joué" (WIN XP IE 6.0 et FF 1.5) avec j'ai trouvé deux ou trois petits bugs, essentiellement liés à IE :
- effectivement j'ai eu la même erreur sous IE que DyoChris liée à "length a la valeur nul ou n'est pas un objet"; étrangement résolue en passant le charset de UTF-8 à iso-8859-1...
- problème de longueur max de caractères sous FF; pas de ' oublié (c'est du latin),ça passe sous IE mais pas sous FF; sous FF ce n'est pas tronqué mais l'infobulle est placée tout en haut de la fenêtre et bouge selon le curseur en suivant le haut de la fenêtre...
- la 3ème erreur est sans doute la plus indépendante de ma configuration puisqu'elle existe dans le fichier source lui-même (gfbulle.htm) : je rajoute un champ texte input dans ce fichier et fais l'action BulleWrite et BulleHide; ca marche nickel. MAIS, SOUS IE 6.0, si je tape un texte à l'intérieur et ensuite essaye de sélectionner ce texte avec la souris pour l'effacer, impossible, rien à faire, le texte n'est pas sélectionné. Il faut faire ctrl A suppr ou double clic ou backspace pour effacer. Le problème étant que cela s'applique à TOUS les champs textes de la page, même ceux qui n'ont pas le onmouseover="BulleWrite()" etc. Si j'enlève le code pour les infobulles, cela refonctionne, donc c'est bien lié à ce code.
Bonne soirée
4 sept. 2006 à 15:51
c'est fou ce que l'on peut faire avec !
et son concepteur un mec formidable !
ce la fait 4 jours que je l'embête avec des modifs pour adapter son script à mes besoins,
(vu que je suis nul en JS, entre autres lol )
il m'a toujours répondu aimablement ( ce qui est pas toujours le cas ici )
en plus il explique le pourquoi des modifs .
je dis " chapeau ! "
je tenais à le remercier publiquement
Pierrot
9 août 2006 à 17:37
J'ai lu et relu le texte pour trouver tous les symboles spéciaux je n'avais vu que le % ...
C'est chiant d'être con :)
Merci a vous,
Guiz
9 août 2006 à 17:24
A mon avis tout vient de la simple quote à vérifier donc !
9 août 2006 à 14:41
Tu peux aller voir le probleme ici, je suis en train de discuter avec Nickadele (non sa bel.... :) )
http://www.javascriptfr.com/infomsg_DEUX-CODES-IDENTIQUES-NE-FONCTIONNENT-PAS-PAREIL_791857.aspx
Je donne le texte que j'utilise pour afficher, essaye donc et tu verras que cela ne passe pas, et je ne pige pas pourquoi
Précision, j'utilise FireFox
Merci,
Guiz
9 août 2006 à 14:28
To DYOCHRIS :
#ERREUR -- Dans la function Init_Bulle() --
//-- Pour les SELECT on supprime l'événement hérité
Obj = document.getElementsByTagName('SELECT');
for( i=0; i < Obj.length; i++){
...
}
Normalement getElementsByTagName return un objet vide de longueur=0 si aucun TAG n'est trouvé...
pour palier ce problème, avant modif de la source, il suffit d'inclure if( Obj.length) comme indiqué ci dessous...
Obj = document.getElementsByTagName('SELECT');
if( Obj.length) // Ligne à ajouter...
for( i=0; i < Obj.length; i++){
...
}
To ZEGUIMO :
1100 carac, cela fait déjà une belle bulle mais à ma connaissance il n'y à pas limitation de taille !!!
n'y a t -il pas un probléme avec les '...
pour le vérifier dans la fonction BulleWrite( txt_) mettre un alert( txt_) pour vérifier l'exactitude et la taille du paramètre...
Si tu as un lien pour observer le phénomène je suis preneur...
Je reste attentif...
7 août 2006 à 17:36
Lorsque j'utilise un texte trop long (1100 carac), il ne s'affiche pas, meme si je réduis la police de telle sorte qu'il puisse tenir parfaitement dans une bulle.
Comment la faire sauter?
Merci
4 août 2006 à 17:53
ça pointe vers cette ligne: for( i=0; i < Obj.length; i++){
Aucun problème sous FF. Un détail j'ai mis ton script dans une page comportant beaucoup de javascript.
27 juil. 2006 à 19:07
27 juil. 2006 à 16:18
Sur les conseils de Mr PetoleTeam j'ai enlevé l'attribut NOWRAP et ça fonctionne farpaitement :) :)
27 juil. 2006 à 11:55
En plus Mister PetoleTeam est très sympa et serviable je lui ai posé une question par mail hier il m'a répondu dès hier soir et très clairement !
Merci :)
3 juil. 2006 à 18:25
Désolé pour le dérangement et merci ;-)
3 juil. 2006 à 11:54
dans la fonction function BulleWrite( txt_)
à la ligne 8 et 9 tu trouves deux variables
Decal_X = 5; // Decalage hors de la Bulle
Decal_Y = 5;
il te suffit de mettre les valeurs que tu souhaites donc visiblement
Decal_X = 55; // Decalage hors de la Bulle
Decal_Y = 5;
1 juil. 2006 à 17:08
bon j'ai reussi a fixé le probleme d'ascenceurs en 1280*1024, en coincant les frames, par contre ça deconne tjs autant avec une plus petite resolution.En ce qui concerne les IFRAME, ça marche mais le cadre du milieu ne se met pas en entier alors il n'y a au final pas trop d'interet...(l'ideal serait un seul ascenceur pour toute la page en conservant la taille originale des contenus de frame).
Cependant j'aurais une question concernant tes info bulles : comment faire pour modifier la position de la bulle par rapport au curseur de la souris? J'aurais voulu tout simplement la mettre 50px plus a droite.
ps : je vais poster mon probleme de frame sur le forum , on verra bien...
1 juil. 2006 à 08:41
Probleme de FRAME:
C'est une question pour le forum, qui peut interésser certains...
en attendant sans plus allez de l'avant si tu fixes toutes les dimensions des frames il arrive un moment ou ça coince...
essaies avec
1/ <frameset rows="250,*,94" ...etc le (*) faisant que la frame centrale s'ajuste à la place restante
2/ ou encore tu mets tout dans le même document mais en utilisant des .
26 juin 2006 à 07:11
C'est cependant superbe !
Je fais donc appel au "service ++" de >Petole Team pour qu'il se penche sur le problème. lol
25 juin 2006 à 23:07
Sous IE jai des problemes avec la frame du milieu (ascenceurs etc :S) et en 1024*800 le site bug completement (tjs la frame du milieu qui s'affiche qu'a moitié...).
Je debute en Javascript et jai fait ce site comme projet de fin d'année en finissant ma prepa info.
Sinon, pour en revenir aux info-bulles de PetroleTeam , le code est génial , on peut y inserer ce que l'on veut (flash,gif,txt,avi...),bref : terrible !
25 juin 2006 à 22:50
Je n'ai pu m'empêcher quand même d'aller voir les sources de Evamann, et résultat, je constate qu'il utilise des frames !?
Explique-nous! C'est une belle continuité du "retour" de Petole Team ! Ca fonctionne sur tous navigateurs aussi ?
25 juin 2006 à 22:43
Je n'ai pas encore eu le temps de voir tes sources, mais ce serait chouette de partager ce code ! Dis Petole Team, ton avis ?
Bonne continuation !
25 juin 2006 à 14:35
J'ai d'ailleur adapté quelques une de tes sources pour mon petit site : http://loubmk2.free.fr (qui comporte d'ailleur plein de bugs de resolution que je n'arrive pas a resoudre).
Menu deroulant avec pause sur l'intro, les info bulles dans la section "videos", ...
Cependant j'aurais une question concernant les info bulles : comment faire pour modifier la position de la bulle ? car si on a comme moi un site constitué de frame horizontales, et qu'un lien se trouve juste au dessus d'une de ces frames, la bulle "disparait".
Ceci etant je trouve tes sources très soignées et bien expliquées.
Bonne continuation, merci.
24 juin 2006 à 11:06
Pour ce qui est des modifications à faire, je m'y appliquerai dès que possible ! Il est vrai, que j'ai repris tes codes dans l'urgence, et sans me poser dès lors trop de questions ! Et merci aussi pour le service ++ lol . Super sympa !
24 juin 2006 à 10:44
Je suis de retour de ton site en construction mais bien avancé...pas mal du tout
Les bulles acceptent les IMG, c'est du HTML inside...
Si je puis me permettre
- Tu devrais mettre dans ta feuille de style SPAN{cursor:default;} pour que le curseur texte soit remplacé par un plus élégant somme toute...
- Supprime dans ta page la function WriteLigne(num_) qui n'est la que pour la démo..
- Peut être devrait tu mettre l'événement sur les <TH>
C'est cela le service ++
merci pour l'info compatibilé SAFARI et encore merci pour l'utilisation du source...
24 juin 2006 à 10:23
24 juin 2006 à 10:19
Pour ma part, je l'utilise déjà ici:
http://business-internet.voicemessenger.biz/ (en construction)
A quand Petole Team infobulle, tous navigateurs, avec images ?
Mais je vais vite me précipiter pour découvrir cette nouveauté !
Félicitation d'avance ! Je cote déjà sans avoir vu !
22 juin 2006 à 09:43
félicitation pour le travail, présentation soignée, beaucoup de possibilités !
Apparement j'ai un fan lol.
Nickadele