INFO BULLE COMPATIBLE SELECT ET DOCTYPE

Commentaire de johann1 le 24/06/2006 10:19:11

J'aime le titre "Info Bulle le RETOUR..."

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 !

Commentaire de PetoleTeam le 24/06/2006 10:44:09

Bonjour et merci

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

Commentaire de Evamann le 25/06/2006 14:35:51

Bon ben cette source m'interesse encore (surtout pour le "CadreWrite")! Decidement je suis aussi un fan...
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.

Commentaire de johann1 le 25/06/2006 22:50:33

Re...

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 ?

Commentaire de johann1 le 26/06/2006 07:11:12

... oui j'ai vu le problème !
C'est cependant superbe !

Je fais donc appel au "service ++" de >Petole Team pour qu'il se penche sur le problème. lol

Commentaire de Evamann le 01/07/2006 17:08:10

Merci PetroleTeam,
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...

Commentaire de Evamann le 03/07/2006 18:25:52

Effectivement dans ce nouveau .js c'est plus clair !
Désolé pour le dérangement et merci ;-)

Commentaire de Souboc le 27/07/2006 16:18:32

J'avais un problème : Dans une bulle j'avais des phrases trop longues et si la fenêtre était trop petite on ne voyait pas tout...

Sur les conseils de Mr PetoleTeam j'ai enlevé l'attribut NOWRAP et ça fonctionne farpaitement :) :)

Commentaire de DyoChris le 04/08/2006 17:53:26

J'ai le message d'erreur suivant sous IE: length à la valeur nul ou n'est pas un objet.
ç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.

Commentaire de PetoleTeam le 09/08/2006 14:28:32

Bonjour à tous...petite pause dans mes vacances pour vous répondre...

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

Commentaire de nickadele le 09/08/2006 17:24:15 administrateur CS

PetroleTeam, sans avoir vu ton message je vien d'en arriver à la même conclusion que toi en voyant le texte de zeguizmo !
A mon avis tout vient de la simple quote à vérifier donc !

Commentaire de pierrot_D le 04/09/2006 15:51:07

ce code est sublime
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

Commentaire de icone71 le 14/09/2006 19:57:15

(a oui je tenais à préciser que l'ajout de
if( Obj.length) // Ligne à ajouter...
ne fonctionne pas, en tout cas dans mon cas...)

Commentaire de icone71 le 15/09/2006 10:46:44

hello,

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.

Commentaire de PetoleTeam le 15/09/2006 15:38:50

Tout d'abord Bonjour à tous...
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 é &eacute;. 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.

Commentaire de PetoleTeam le 15/09/2006 18:44:40

Version 2.1
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)

Commentaire de icone71 le 16/09/2006 06:34:55

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

Commentaire de nikola150 le 02/11/2006 11:04:28

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

Commentaire de pierrot_D le 12/12/2006 10:13:00

nikola150 , tu peux développer ?

c'est à dire donner les modifs que tu as faites

merci d'avance

Commentaire de PetoleTeam le 12/12/2006 17:36:55

Bonjour à Tous,

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

Commentaire de fighteur8 le 03/06/2007 16:13:05

ah oui j'ai juste un petit problème, si je met un tableau de longueur 350 par exemple, IE7 m'affiche une bulle vide (le tableau s'affiche car il ya les contours des mises en formes css mais pas la td) alors que sur FF ca marche...
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.

Commentaire de fighteur8 le 08/06/2007 13:49:00

bonjour,

j'ai remplacé la bulle par un div que je personnalise par css, et maintenant ca marche :)

Commentaire de PetoleTeam le 17/07/2007 20:08:06

Bonjour,
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)

Commentaire de sam98 le 23/07/2007 11:01:42

Bonjour, toujours à propos de l'infobulle j'ai du faire une mauvaise manip quia fait décaler les bulles sous firefox. j'ai réussi à rétablir le truc sous tous les autres navigateurs sauf firefox où les bulles s'affichent tout en haut de la page au passage de la souris. quelqu'un peut sait d'où ça peut venir?
merci

Commentaire de sam98 le 26/07/2007 13:52:57

Bonjour, voici le code de la fonction BulleWrite. je n'utilise pas du tout le fichier gfbulle.css

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  = "<TABLE BORDER=0 CELLSPACING=0><TR><TD BGCOLOR='#FFFFFF'>";*/
    Html = "<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=4  BGCOLOR='#FFFFFF' >";
    Html += "<TR ><TD class='Bulle'>";
    Html += txt_;
    Html += "</TD></TR></TABLE></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">
<AREA  SHAPE=CIRCLE COORDS="173,181,12" HREF="programmes-par-pays.php?pays=Bresil"
onMouseOver="BulleWrite('Br&eacute;sil',5,5);" onMouseOut="BulleHide();"></a>

j'ai juste un problème sous firefox. les bulles s'affichent en haut de page

merci de votre aide

Commentaire de sam98 le 26/07/2007 22:55:04

Bonsoir,

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

Commentaire de sam98 le 28/07/2007 19:08:53

Bonjour,

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

Commentaire de PetoleTeam le 02/08/2007 19:48:59

Bonjour,
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)

Commentaire de vieillehiboux le 27/09/2007 18:06:52

Merci encore à nikola150 et a son commentaire qui m'a permis de personaliser a souhait la bulle.

Commentaire de sylv202 le 07/10/2007 21:59:53

Hum... http://hiboox.com/lang-fr/image.php?img=32qhdil1.jpg

Commentaire de domxml le 08/01/2008 14:07:17

Thx PetoleTeam ce que j'en ai besoin

Commentaire de drakss le 17/07/2008 12:23:15

Excellent script :)

Commentaire de l0renz0 le 27/11/2008 15:46:45

Precision : le bug est avéré sous Mozilla firefox, pas sous IE.

Commentaire de l0renz0 le 28/11/2008 19:27:00

vieux motard, jeune camé :-)
En tout cas merci et chapeau pour la réactivité