IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Infobulle IE et affichage


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Nouveau membre du Club
    Inscrit en
    Mars 2009
    Messages
    7
    Détails du profil
    Informations forums :
    Inscription : Mars 2009
    Messages : 7
    Par défaut Infobulle IE et affichage
    Bonjour,

    J'ai un problème d'affichage de mon infobulle avec Internet Explorer, cette dernière s'affiche cependant correctement avec Mozilla.

    Voici mon code, tout d'abord le code JQuery qui me permet d'afficher :

    Code : 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
    22
    //Infobulle
    $('td.cost_channel').mouseover(function() {
     
     
    	$('body').append("<span class='infobulle'></span>");
    	var bulle = $(".infobulle:last");
    	bulle.append("<table><th class ='sort_cost'>Sort of cost</th> <th class ='cost' colspan='2'> value</th>");
     
    	bulle.append("<tr><td class='row'>Commission : </td><td class='row2'>"+$('#commission_'+id+'').val()+' </td><td>CHF</td></tr>');
     
    	bulle.append('</table>');
     
    	var posTop = $(this).offset().top;
    	var posLeft = $(this).offset().left+$(this).width()/5;
    	bulle.css({left:posLeft, top:posTop,opacity:0});
    	bulle.animate({top:posTop, opacity:0.99});
    });
     
    $('td.cost_channel').mouseout(function() {
    	var bulle = $(".infobulle:last");
    	bulle.remove();
    });
    Et voici mon code css.

    Code css : 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
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    .infobulle	{
    	position:absolute;
    	background : #0F79B1;
    	padding: 5px;
    	-moz-border-radius: 3px;
    	-webkit-border-radius:3px;
    	color:#E6E2DF;
    	text-align:left;
     
    	border: 1px solid #FFFFFF;
     
    }
    .infobulle .sort_cost	{
    	width : 150px;
    	text-align:left;
    	color:#E6E2DF;
    	font-weight:bold;
    	border-bottom: 1px solid #FFFFFF;
    }
    .infobulle .row	{
    	width : 150px;
    }
    .infobulle .row2	{
    	width : 30px;
    }
    .infobulle .cost	{
    	width : 50px;
    	text-align:left;
    	color:#E6E2DF;
    	font-weight:bold;
    	border-bottom: 1px solid #FFFFFF;
    }

    L'affichage sous IE se fait à la bonne position (par rapport à la gauche et au sommet), mais la largueur de l'infobulle va jusqu'à droite de la fenêtre et le contenu ne s'affiche pas.

    Quelqu'un saurait-il ce qui ne fonctionne pas ?

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Il faudrait que tu revoies l'utilisation de append().
    Cette méthode permet d'insérer des éléments complets, toi tu l'utilises pour ajouter des portions d'éléments...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Nouveau membre du Club
    Inscrit en
    Mars 2009
    Messages
    7
    Détails du profil
    Informations forums :
    Inscription : Mars 2009
    Messages : 7
    Par défaut
    Merci, c'était en effet le problème. J'ai remplacé mon utilisation répétitive de append() par une variable text, que je remplie avec des "text += ..." et je l'insert dans le append() à la fin.

    Pour le soucis de css, j'ai trouvé également suite à cela.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Infobulle: pas d'affichage sous IE6 & Konqueror 3.5
    Par Rolf-IV dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 13/10/2009, 16h11
  2. affichage avec une infobulle
    Par snetechen dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 09/02/2007, 14h38
  3. [ToolTip] temps d'affichage d'une infobulle
    Par RR instinct dans le forum AWT/Swing
    Réponses: 4
    Dernier message: 10/10/2006, 10h48
  4. [CSS] Problème lors de l'affichage d'une infobulle
    Par nais_ dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 14/09/2006, 09h59
  5. [VB.Net 2.0/NotifyIcon] Pb de durée d'affichage d'une infobulle
    Par exclusif dans le forum Windows Forms
    Réponses: 10
    Dernier message: 19/08/2006, 22h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo