Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    Trovare tramite javascript e jquery punto di start testo in overflow.

    Buongiorno, io ho una pagina web con un testo (domanda) e 3 bottoni, all' interno dei bottoni c'è il testo della risposta,
    ho bisogno per il responsive che quando il testo va in overflow io faccio spuntare un bottone con i "..." che apre il div lo ingrandisce, gli toglie l' ellipsis he ho messo e fa leggere l' intera risposta.
    Ho fatto tutto ma non riesco a trovare il modi di sapre per i vari dispositivi mobili il punto preciso in cui inizia l'ellipsis e il testo va in overflow così da far spuntare il bottone coi "..." altrimenti invisibile.


    Sono riuscito a trovare in questo modo la lunghezza della domanda e delle 3 risposte:
    var testoDomanda = domanda.length;
    var testo1 = r1.length;
    var testo2 = r2.length;
    var testo3 = r3.length;

    Idee?

  2. #2
    Utente di HTML.it L'avatar di linoma
    Registrato dal
    Mar 2010
    Messaggi
    1,300
    Tipo un css :after e overflow:hidden?

    .class:after{
    content:'...';
    }

    .class{
    overflow:hidden;
    }

    ma dinamico? Hai provato cn text-oerflow?
    Ultima modifica di linoma; 25-11-2020 a 13:15
    Per gli Spartani e Sparta usa spartan

  3. #3
    sì ma mi serve da sapere tramite javascript o jquery perchè appunto devo far spuntare il bottone che ingrandisce il div !
    Ho giò provato:

    codice:
        function isEllipsisActive(e) {
                return (e.offsetWidth + 5 < e.scrollWidth);
            }
    
    
            function checkOverflow(elem) {
                const elemWidth = elem.getBoundingClientRect().width + 5
                const parentWidth = elem.parentElement.getBoundingClientRect().width
    
    
                return elemWidth > parentWidth
            }
    
    
            function checkOverflow2(el) {
                var curOverflow = el.style.overflow;
    
    
                if (!curOverflow || curOverflow === "visible")
                    el.style.overflow = "hidden";
    
    
                var isOverflowing = el.clientWidth + 5 < el.scrollWidth ||
                    el.clientHeight < el.scrollHeight;
    
    
                el.style.overflow = curOverflow;
    
    
                return isOverflowing;
            }

    ma non mi funzionano!

  4. #4
    Utente di HTML.it L'avatar di linoma
    Registrato dal
    Mar 2010
    Messaggi
    1,300
    ..la butto li. Potresti provare un div annidati ovviamente il primo ha width e overflow settati. Il secondo che contiene il testo ha il width auto. E controlli eventuali differenze tra le 2 width. E' n'idea...
    Per gli Spartani e Sparta usa spartan

  5. #5
    questa è la mia struttura html +css

    codice:
    <button id="btn_r1" class="btn_resp vero1 panelCB" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; border: 1px solid;">
        <div id="myQuiz" class=" question  r1 flipCB" style="position: relative; height: 100%;margin: 0px 0px 10px 0px;font-size:                      100%;overflow: hidden;">
                <span id="mainTxt" class="hyphenate risp1" lang="it" style=""> Ha l'obbligo di fermarsi e di prestare l'assistenza occorrente alle                     persone investite</span>                           
              </div>                    
     </button>
    
    
    media="(orientation: landscape)"
    .vero1, .vero2, .vero3 {
        z-index: 9999;
        max-height: 110px;
        /* height: 110px; */
        min-height: 75px;
        background: white;
    }
    
    
    media="(orientation: landscape)"
    .btn_resp {
        font-size: 110%;
        -ms-text-size-adjust: 110%;
        -webkit-text-size-adjust: 110%;
    }
    media="(orientation: landscape)"
    .btn_resp {
        width: 97%;
        left: 1px;
        padding: 5px 5px;
        text-align: left;
        margin-top: 15px;
    }
    .vero1, .vero2, .vero3 {
        position: relative;
        float: right;
        top: 25%;
        left: -17px;
        height: 62px;
        width: 62px;
    }

    la struttura è questa e il contenuto del testo viene caricato dinamicamente; solo che queste misurazioni che ho provato non funzionano.

  6. #6
    Utente di HTML.it L'avatar di linoma
    Registrato dal
    Mar 2010
    Messaggi
    1,300
    ..intendevo qualcosa del genere

    codice HTML:
    <html>
        <head>
            <script>
            window.addEventListener('load',function(){
                var _child=document.querySelector('.child');
                var _owner=document.querySelector('.owner');
                if(_child.clientWidth > _owner.clientWidth){
                    var _button = _owner.nextElementSibling;
                    _button.className += " visible";
                }
            });
            </script>
            <style>
                button.read{
                    display:none;
                }
                button.visible{
                    display:block;
                }
            </style>
        </head>
        <body>
            <div style='width:10em;overflow:hidden;' class='owner'>
                <div class='child' style='width:5em;'>testo</div>
            </div>
            <button class='read'>Read More</button>
        </body>
    </html>
    Ultima modifica di ciro78; 30-11-2020 a 18:05
    Per gli Spartani e Sparta usa spartan

  7. #7
    No nada, a parte che mi da 0 come valore di child, ho provato così:

    codice:
    
            var _child = $('.risp1')[0];
            var _owner = document.querySelector('.r1');
            var scroller = document.querySelector('.scroll1');
    
    
            console.log("TESTO", _child.offsetWidth);
            console.log("PAFRE", _owner.clientWidth);
    
    
            if (_child.offsetWidth > _owner.clientWidth) {
                alert("puntini");
                scroller.className += " visible";
            }

    ma me lo prende quando in eraltà il testo è più corto e invece qunado supera non me lo prende!

  8. #8
    ASpetta, funziona, il problema è ceh facevo molte cose oltre al caricamento di questo bottoncino, in pratica mettendo un SetTimeout al codice di prima sembra funzionare!
    Probabilmente il dom caricava prima gli elementi e non conosceva la corretta linghezza della domanda che arrivava in un secondo momento!!
    grazie 1000!!

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.