Text Bild Passage in der Seite nach xxx Sekunden ausblenden

  • Hallo zusammen,

    gibt es eine Möglichkeit einen Text bzw. ein Bild nach ein paar Sekunden auszublenden?

    Hintergrund ist: Ich möchte den Besucher der Seite gern darauf hinweisen, das er, wenn er ein Smartphone oder Tablet nutzt er dieses bitte doch quer halten möchte, damit er den Inhalt besser sehen kann, noch besser wäre natürlich eine Lösung, die dem Besucher den Hinweis nur einmal zeigt auch wenn er die Tabs in der Seite wechselt.

    Ich danke für Eure Hilfe Blume

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Eine Alternative zu dem, was dir da vorschwebt:
    Erzeuge in deinem Quellcode das Element, dass du als Hinweis eingeblendet bekommen möchtest - zB <div id="mein_hinweis">....dein Hinweis...</div>.
    Dann nimmst du folgendes in dein CSS auf:

    #mein_hinweis {
    display: none;
    }

    Media only screen and (max-width: 800px) and (orientation: portrait) {
    #mein_hinweis {
    display: block;
    }
    }

    Das sollte dafür sorgen, dass jemand der alles richtig macht... also ein großes Display (Breite größer 800px) hat oder mit einem kleinen Display (Breite kleiner 800px) und sein Gerät im Querformat (landscape) anschaut... nichts zu sehen bekommt von deinem Hinweis. Es wird nur eingeblendet, wenn dein Besucher mit kleinem Display im Hochformat (portrait) die Seite betrachtet.
    Das blendet sich dann automatisch aus, wenn der Besucher dann sein Smartphone in die richtige Position bringt.

    Einmal editiert, zuletzt von Sailor56 (12. Februar 2018 um 08:38)

  • Hallo Sailor,

    ich habe die Lösung selber gefunden, kann man diese Funktion irgendwie global einbinden, so dass diese automatisch auf jeder Seite die neu erstellt wird schon mit drin ist?

    Vielen Dank Blume

  • Gut dass es funktioniert und noch besser, dass für das 'Eine' selbst eine Lösung gefunden hast - so soll das sein! Du kannst in dieses 'div' prinzipiell alles rein packen, was du möchtest!
    Problem Zwei? Bin mir nicht so sicher, was du meinst. Der CSS Code, wenn du ihn in das 'zusätzliche CSS' im Customizer geschrieben hast, ist überall auf der Seite wirksam.
    Wie und ob du dein 'Mitteilungs-Div' automatisch überall einbinden kannst - wahrscheinlich ja! Könnte über einen Zusatz zB in der header.php (in einem Child-Theme) gehen. Da bin ich mir aber nicht sicher! Solltest du in einem neuen Thread hier im Forum mal erfragen und auch bitte gleich dabei angeben, welche WP Version und welches Theme du benutzt!
    Dann wird sich bestimmt jemand, der dein Theme kennt, melden und dir die richtigen Tipps geben.

  • Hallo zusammen,

    leider funktioniert diese Funktion nach dem Umzug auf die Live Seite nicht mehr, ich nehme an, es liegt wieder an irgendwelchen Klammern, habe aber nach 5 Stunden Suche keine Idee mehr was es sein kann. Ich habe die Seite mit dem Plugin Duplicator auf die eigentliche Seite umgezogen, vllt. seht Ihr ja woran der Fehler liegt. In der Testseite ging die Meldung weg, wenn ich das Handy auf quer gedreht habe, jetzt bleibt die Meldung stehen, keinen Plan warum.

    https://www.unimoto-race.de

    Danke und beste Grüße Blume

  • Du hast deinen Hinweis 2 mal eingefügt!
    Einmal im Quellcode selbst in dem <div id="mein_hinweis"....., erkennbar in der Bildschirmanzeige an der roten Rahmenlinie links vom Text. Dieser Hinweis ist CSS gesteuert und funktioniert, wie ich es beobachten kann genau so, wie er soll.
    Und dann hast du zum Zweiten einen JavaScript eingebaut

    HTML
    <script id="x-customizer-js">
          jQuery(document).ready(function($){
        $('<div><h3>Wenn Ihr diese Seite am Mobiltelefon oder Tablet betrachtet, dreht dieses bitte auf quer und „wischt“ seitlich über die Tabellen um die gesamte Tabelle zu sehen!</h3><img class="aligncenter" src="http://www.roadeagle-arnsdorf.de/meute/wp-content/uploads/Smartphone-drehen.jpg" alt="bitte das Gerät auf quer drehen" width="304" height="268"></div>').insertBefore('.home h2');
    });    </script>


    mit dem der Warnhinweis ebenfalls eingeblendet wird. Ich kann hier jedoch nicht erkennen, wie und ob der wieder ausgeblendet wird, wenn das Disaply auf 'Landscape' steht.

  • Hallo Sailor,

    das habe ich auch schon gesehen, nur weiß ich leider nicht wie dazu kommt, der Fehler scheint auch nur auf der Startseite zu bestehen, auf den Unterseiten scheint es zu funktionieren.
    das komische an der Sache ist, wenn ich die function.php im Adminbereich der Seite öffne, dann ist diese leer, öffne ich diese im FTP Prograamm, dann hat diese Inhalt. Irgendetwas ist hier faul, ich weiß nur leider nicht was.

    Edit: ich habe es jetzt aus dem Custom Global Javascript gelöscht, da scheint es zu funktionieren, allerdings bleibt die Frage offen, warum ist die function.php im Adminbereich leer.
    Danke für Deine Hilfe Blume

    Einmal editiert, zuletzt von BlumeREMC (12. März 2018 um 09:59)

  • Hmmm... da bin ich leider auch etwas ratlos :(! Kann alles mögliche sein und ist von außen schwer zu diagnostizieren!
    Aber vielleicht ist hier im Forum ja jemand etwas vertrauter mit deinem Theme und kann dir weiter helfen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!