Sujet Précédent Sujet Suivant

Retour a la ligne dans une info bulle

RaphaDragon Messages postés 15 Date d'inscription lundi 19 mai 2003 Statut Membre Dernière intervention 19 août 2019 - 18 août 2019 à 18:50
 pinballWizard - 14 nov. 2019 à 10:06
Bonjour,

Voici mon problème, j'ai hésité dans quelle section l'exposé. PHP ou peut-être JS

J'ai une variable qui récupère des infos dans ma base, je souhaite que celle ci apparaisse au survol de ma souris sur une image 


<div class="meteo">
           <?php
                   $commentaire ="";
                   $newcommentaire = "";
                   $reponse = $connexion->query('SELECT * FROM meteo');
                   $valmeteo = $reponse -> fetch();

                   $temps = "images/meteo/".($valmeteo['nomicone']).".png";
                   $commentaire = $valmeteo['txtmeteo'];
                   $newcommentaire = wordwrap($commentaire,60,"<br />",false);
                   $commentaire = "Effectifs : ".($valmeteo['nbdispo'])." sur ".($valmeteo['nbtotal'])."<br />".($newcommentaire);                    

                   $_SESSION['meteo'] =  "../images/meteo/".($valmeteo['nomicone']).".png";
             ?>       
                    <a href="#" onMouseOver="displayDivInfo(event,'<?php echo($commentaire); ?>');" onMouseOut="displayDivInfo()">  
                            Météo du jour :   <img src=<?php echo($temps); ?> alt="Météo" /></a>
</div>



jusque là pas de problème tout fonctionne bien, en remerciant encore @Karamel qui m'a permis de le faire fonctionner

le JS correspondant 


function displayDivInfo(evt,text){

if(!document.getElementById('divInfo')){

var divInfo = document.createElement('div');
divInfo.id = 'divInfo';
divInfo.style.position = 'absolute';
document.body.appendChild(divInfo);
}


var el=document.getElementById('divInfo')

if(text){
    el.textContent=text;
    el.style.display='block'

    evt.currentTarget.onmousemove=function(evt){

        var el=document.getElementById('divInfo')
        var dde=document.body.scrollTop ? document.body : document.documentElement;
        evt =(!evt) ? window.event : evt;
        var XX =evt.clientX + dde.scrollLeft;
        var YY =evt.clientY + dde.scrollTop;
        el.style.top=YY-15+'px'
        el.style.left=XX+15+'px'
    }

}

else{
el.onmousemove = '';
el.style.display='none'
}
}


Tout fonctionne, cela s'affiche lors du passage de la souris, mais le problème c est que dans mon texte il ne prends pas en compte les retours à la ligne. J'ai essayé avec des <br /> des "\r\n" enfin plein de trucs rien à faire. visuellement il m'affiche <br /> mais ne l’interprète pas.
Si qq a une idée

Merci

1 réponse

Réponse 1 / 1
pinballWizard
Modifié le 14 nov. 2019 à 10:06
Salut, changez comme ceci: 

el.innerHTML=text;//-- acceptera le HTML et tous les nœuds de texte possible ainsi que le HTML


Explication :
Pour les autres types de nœuds, textContent renvoie la concaténation des valeurs de propriété textContent de chaque nœud enfant, à l'exception des commentaires et nœuds d'instructions de traitement.(comme un \n)

source : https://developer.mozilla.org/fr/docs/Web/API/Node/textContent
0

Discussions similaires

saut de ligne TextBox
duron800 -
clinpus -

5 réponses
Gestion des retours chariot dans chaine Regex
lili6584 -
Whismeril -

3 réponses
[C#] Regex balise + saut à la ligne
FlolZ -
Whismeril -

7 réponses
Retour chariot dans un messageBox
cs_fcolo -
Lutinore -

6 réponses
Sauter une ligne dans une constante ????
madshell -
madshell -

9 réponses
Rejoignez-nous