Soulignement d'un element texte en javascript

Fermé
cyberMan_89 Messages postés 8 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 11 juillet 2019 - 8 mars 2019 à 14:30
cyberMan_89 Messages postés 8 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 11 juillet 2019 - 11 mars 2019 à 05:49
Bonjour à tous,
Voici mon problème, J'ai crée une module pour le soulignement d'un texte en javascript! Si je sélectionne une seule ligne tous marche avec la perfectionnement, mais quand je sélectionne plusieurs lignes, le soulignement a tendance a suivre la sélection de l'élément qui est plus grand largeur! Pour information, J'utilise window.getSelection().
A voir également:

3 réponses

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
8 mars 2019 à 17:00
Bonjour,

Sans voir ton code IMPOSSIBLE de te répondre !

NB: Pour poster du code sur le forum, merci de le faire en utilisant LES BALISES DE CODE (et en y précisant le langage afin d'avoir la coloration syntaxique)
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
0
cyberMan_89 Messages postés 8 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 11 juillet 2019
9 mars 2019 à 06:09
Bonjour,

merci d'avoir répondu et voici mon code que j'utilise:


var s = window.getSelection();
            var oRange = s.getRangeAt(0);
            var oRect = oRange.getBoundingClientRect();

var $eleStart = $(document.getSelection().anchorNode.parentNode);//debut de la selection
            
var $eleEnd = $(document.getSelection().focusNode.parentNode);//fin de la selection

function appendHrWithSaveDataLigne($eleStart,$eleEnd, oRect, widthNew, posXNew, background)
       {
           var nextEle=$eleStart;
           var prevEle=$eleStart.prev();
           var id_max=0;
           var width=null;
           var posX=null;
           var posY=null;
           var posYPrev=null;
           var bg=null;
var tab_obj_ligne=[]; //tableau temporaire pour afficher les div ou soulignement
           
           if(typeof (background) != 'undefined')
           {
               bg=background;
           }
           else
           {
               bg='black';
           }
           if(typeof (widthNew) != 'undefined')
           {
               width=widthNew;
           }
           else
           {
               width=parseInt(oRect.width);
           }
           if(typeof (posXNew) != 'undefined')
           {
               posX=posXNew;
           }    
           else
           {
               posX=parseInt(oRect.left-15);
           }
           /**
            * 
            * recuperation de l'id le plus eleve
            */
           for(var i=0;i<tab_obj_element.length;i++)
           {
               if(parseInt(tab_obj_element[i].id) > id_max)
               {
                   id_max=tab_obj_element[i].id;
               }
           }
           id_max++;
           var id_page=null;
/**
* récuperation des blocs de selection
**/

               do
                {  
                        posY=(parseInt(nextEle.css("top"))+parseInt(nextEle.css("height"))+3);
                        
                            id_page=parseInt($eleStart.parents(".PDFPage").attr("id").substring(5, $eleStart.parents(".PDFPage").attr("id").length));
                            var obj_ligne={

                                    id:id_max,
                                    width:width,
                                    height:parseInt(nextEle.css("height")),
                                    posX:posX,
                                    posY:posY,
                                    page:id_page,
                                    background:bg,
                                    type:'ligne',
                                    size:'2',
                                    padding:'1'
                            };
                            
                            /**
                             * 
                             * retire les doublons dans le tab_obj_element
                             */
                            var isTrouver=false;
                            
                            for(var i=0; i<tab_obj_element.length; i++)
                            {
                                if(tab_obj_element[i].type  == 'ligne')
                                {
                                    if(tab_obj_element[i].posX == obj_ligne.posX && tab_obj_element[i].posY == obj_ligne.posY && tab_obj_element[i].width == obj_ligne.width)
                                    {
                                        isTrouver=true;
                                    }
                                }
                            }
                            
                            if(!isTrouver)
                            {
                                tab_obj_element.push(obj_ligne);
                                tab_obj_ligne.push(obj_ligne);
                            }
                            
                            
                            id_max++;
                            //console.log(posY);
                            nextEle=nextEle.next(); 

                }
                while(parseInt(nextEle.css("top")) <= parseInt($eleEnd.css("top")));

/**
                 * affichage du element div
                 */
                for(var i=0;i<tab_obj_ligne.length;i++)
                {
                    if(tab_obj_ligne[i].type == 'ligne')
                    {
                        //asina hr
                        if(tab_obj_ligne[i].page == id_page)
                        {
                            var $hr=$('<div></div>');
                                    $hr.css({
                                       position:'absolute',
                                       top:tab_obj_ligne[i].posY+'px',
                                       //left:roundXSel+'px',
                                       left:tab_obj_ligne[i].posX+'px',
                                       width:tab_obj_ligne[i].width+'px',
                                       padding:'1px',
                                       background:tab_obj_ligne[i].background,

                                    }).addClass("ligne").attr("id",tab_obj_ligne[i].id/**+id**/);
                                    $eleStart.parents(".PDFPage").append($hr);       
                        }
                    }
                }
                tab_obj_ligne=[];//initialisation du tableau après affichage

merci pour votre aide!
0
cyberMan_89 Messages postés 8 Date d'inscription vendredi 8 mars 2019 Statut Membre Dernière intervention 11 juillet 2019
11 mars 2019 à 05:49
bonjour,

Est-ce que quelqu'un peut m'aider! S'il vous plaît, je besoins de votre aide!
0