Ergebnis 1 bis 5 von 5

Thema: unterschiedliche Ladezeiten - Tooltip hover / tooltip click [Lösung bitte ohne Java]

  1. #1
    Teeny
    Registriert seit
    17.01.2019
    Beiträge
    29
    Danke
    4
    Bekam 0 mal "Danke" in 0 Postings

    Standard unterschiedliche Ladezeiten - Tooltip hover / tooltip click [Lösung bitte ohne Java]

    Mahlzeit,

    ich habe zwei Quellcodes. Bei Quellcode 1 habe ich einen Tooltip, welcher sein Inhalt bei Mouseover in einer Tabellenzelle öffnet. Das Laden der php-Seite dauert bei viel Inhalt (ca. 2000 Zahlen) ca. 3 Sekunden.

    HTML-Code:
    <style>
    
    .tooltip {
        cursor: help;
    }
    
    .tooltip em {
        display: none;
    }
    
    .tooltip:hover em {
        z-index: 9999;
        display: block;
        white-space: wrap;
        left: 0; top: 0;
        margin: 20px 0 0;
        color: black;
        font-style: italic;
        border: 1px dotted black;
        padding: 5px;
        background: #fff4d1;
    }
    
    </style>
    
    <span class="tooltip"> Inhalte anzeigen <em>ca. 2000 Zahlen </em></span>

    Quellcode 2 reagiert erst beim Klicken und lädt seinen Inhalt auch in eine Tabellenzelle. Dies dauert aber ca. 1 Minute:

    HTML-Code:
    <style>
            #showhide:after {
                content: 'Inhalt anzeigen';
                display: inline-block;
            }
            #showhide:checked:after {
                content: 'Inhalt verbergen';
            }
            #showhide:checked ~ #content {
                height: 100%  
            }
            #content {
                height: 0;
                margin: auto;
                overflow: hidden;
                transition: height 500ms;
            }
    </style>
    
    <input type="checkbox" id="showhide">
    <div id="content">ca. 2000 Zahlen</div>

    Warum laden beide Varianten so unterschiedliche lange?
    Wie bekomme ich es hin, dass Quellcode 1 auch erst beim Klicken reagiert und wenn außerhalb des Focus geklickt wird, soll es wieder zugehen!?

  2. #2
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    234
    Danke
    0
    Bekam 31 mal "Danke" in 31 Postings

    Standard AW: unterschiedliche Ladezeiten - Tooltip hover / tooltip click [Lösung bitte ohne Ja

    hast du die möglichgkeit mal beide version online zu stellen ?

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    17.01.2019
    Beiträge
    29
    Danke
    4
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: unterschiedliche Ladezeiten - Tooltip hover / tooltip click [Lösung bitte ohne Ja

    Habe schnell mal was generieren lassen:

    Das erste Script benötigt 2 Sekunden, das zweite 10 Sekunden!

    PHP-Code:
    <style>

    .tooltip {
        cursor: help;
    }

    .tooltip em {
        display: none;
    }

    .tooltip:hover em {
        z-index: 9999;
        display: block;
        white-space: wrap;
        left: 0; top: 0;
        margin: 20px 0 0;
        color: black;
        font-style: italic;
        border: 1px dotted black;
        padding: 5px;
        background: #fff4d1;
    }

    </style>


    <?php for ( $i=1$i 2001$i++ ) { ?>

    <table border="1px solid black">
        <tr>
            <td> <?php echo $i?> </td>
            <td> <span class="tooltip"> Inhalte anzeigen <em> <?php for ( $z=1$z 2001$z++ ) { echo "Zahl "; } ?> </em></span> </td>
        </tr>
    </table>

    <?php ?>
    PHP-Code:
    <style>
            #showhide:after {
                content: 'Inhalt anzeigen';
                display: inline-block;
            }
            #showhide:checked:after {
                content: 'Inhalt verbergen';
            }
            #showhide:checked ~ #content {
                height: 100%  
            }
            #content {
                height: 0;
                margin: auto;
                overflow: hidden;
                transition: height 500ms;
            }
    </style>


    <?php for ( $i=1$i 2001$i++ ) { ?>

    <table border="1px solid black">
        <tr>
            <td> <?php echo $i?> </td>
            <td> <input type="checkbox" id="showhide"> <div id="content"> <?php for ( $z=1$z 2001$z++ ) { echo "Zahl "; } ?> </div> </td>
        </tr>
    </table>

    <?php ?>

  4. #4
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    234
    Danke
    0
    Bekam 31 mal "Danke" in 31 Postings

    Standard AW: unterschiedliche Ladezeiten - Tooltip hover / tooltip click [Lösung bitte ohne Ja

    ich habe zwar noch nix getestet aber ich denke mal das es an der id's liegt .Du generierst ja in der Schleife 2000 mal die gleiche id's, das kann nur schief gehen
    id="showhide und id="content"

    das solltest du mit class machen oder eine id mit fortlaufender Zahl verwenden

    Code:
    <?php for ( $i=1; $i < 2001; $i++ ) { ?>
    
    <table border="1px solid black">
        <tr>
            <td> <?php echo $i; ?> </td>
            <td> <input type="checkbox" id="showhide<?php echo $i; ?>"> <div id="content<?php echo $i; ?>"> <?php for ( $z=1; $z < 2001; $z++ ) { echo "Zahl "; } ?> </div> </td>
        </tr>
    </table>
    
    <?php } ?>
    ungefähr so ungetestet.
    Was soll die 2te Schleife da eigentlich machen ?
    Geändert von basti1012 (04.02.2019 um 08:50 Uhr)

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    17.01.2019
    Beiträge
    29
    Danke
    4
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: unterschiedliche Ladezeiten - Tooltip hover / tooltip click [Lösung bitte ohne Ja

    Zitat Zitat von basti1012 Beitrag anzeigen
    das solltest du mit class machen oder eine id mit fortlaufender Zahl verwenden
    Das könnte ich so machen, aber es ändert an dem Grundproblem ja nichts, da er beim Generieren des Codes so viel Zeit benötigt.

    Die innere Schleife erzeugt die Zahlen 1-2000 und die äußere Schleife die Zeilen 1-2000.

Ähnliche Themen

  1. Tooltip langsam einblenden lassen
    Von hinkel11 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 28.02.2009, 20:36
  2. Tooltip-Box immer an gleicher Stelle
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 27.02.2009, 17:38
  3. Ausrichtung Tooltip-Box
    Von hinkel11 im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 27.02.2009, 15:58
  4. [gelöst] Tooltip Skript mit einem Bug
    Von Wasserleiche im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 20.12.2007, 12:12
  5. Tooltip Script Fehlerhaft
    Von Phase8421 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 7
    Letzter Beitrag: 24.03.2006, 13:10

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •