Ankündigung

Einklappen
Keine Ankündigung bisher.

Fade in/Fade out mit delay...in JavaScript

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Fade in/Fade out mit delay...in JavaScript

    Hallo Leute,
    folgendes: dieses Script funktioniert ! einwandfrei.
    Nur wer kann mir Helfen?
    Versuche dieses script so umzuschreiben, dass beim ersten Aufruf die Grafik angezeigt wird.
    Danach aber nicht mehr, solange der Besucher die Webseite nicht mehr neu startet.
    Das script steht in der Index.html Seite, Bild wird beim Start aufgerufen und verschwindet nach einer bestimmten Zeit.Der Besucher wechselt auf eine Unterseite und wieder zurück und schon erscheint das Bild wieder WAS ICH DANN VERHINDERN WILL.
    Kann einer mir helfen ?
    Danke.



    -----------Html----------
    <div id="outer">
    <div id="inner">
    <img src="images/fenster/news201701.jpg" alt="news" width="800" height="600" title="News" border="0">
    --------Html-----------
    -----------------------JavaScript------------------------------------
    <!-- Fade-In / Fade-Out fuer Reklame -->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(e) {
    $('#outer').click(function() {
    $('#outer').fadeOut({queue:false,duration:1000});
    });
    $('#outer').fadeIn(2000).delay(10000).fadeOut(2000 );
    });
    </script>
    <style type="text/css">
    #outer {
    display:none;
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: RGBA(0,0,0,0.6);
    }
    #outer #inner {
    opacity:1.0;
    position:relative;
    margin:auto 0;
    top:50vh;
    text-align:center;
    }
    #inner img {
    margin-top: -200px;
    box-shadow: 5px 5px 10px;
    }
    </style>

    <!-- Fade-In / Fade-Out fuer Reklame ENDE-->
    -----------------------JavaScript Ende---------------------------------------

  • #2
    Informiere dich über Local Storage. Darin kannst Du speichern, ob die Seite schon besucht wurde und davon abhängig die Anzeige der Grafik verhindern.

    Kommentar


    • #3
      Also eine Lösung wäre der Einsatz von Cookies. Diese können auch mithilfe von JavaScript eingehen. Da ich gerade schreibfaul bin. Stelle ich schnell mal ein Link als Beispiel ein.

      Gruß Localfu
      Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt.
      Albert Einstein

      Kommentar


      • #4
        Hi,

        Ich würde das über eine Session lösen. Ist am ende natürlich auch Cookie basiert, aber ist für meine Begriffe die sinnvollste Variante.

        Gruß Arne
        PHProcks! » Tutorials

        Kommentar


        • #5
          Zitat von Arne Drews Beitrag anzeigen
          Hi,

          Ich würde das über eine Session lösen. Ist am ende natürlich auch Cookie basiert, aber ist für meine Begriffe die sinnvollste Variante.

          Gruß Arne
          über eine Session, wie meinst Du das `?
          habe diesen code gekricht, aber kann nix damit anfangen. Wer kann helfen ? Danke.
          • <script type="text/javascript">
          • if($.cookie("info") == 'bestanden') {
          • $(document).ready(function(){
          • $("#test1").addClass("hide");
          • });
          • } else {
          • $.cookie("info", 'bestanden');
          • }
          • </script>

          Zuletzt geändert von Atlan; 09.02.2017, 16:47.

          Kommentar


          • #6
            Statt eines Cookie würde ich dir empfehlen, lieber Localstorage zu nehmen. Das ist einfacher zu handhaben, auch ohne jQuery, und der Eintrag läuft nicht ab.

            Kommentar


            • #7
              Sorry, aber eine Idee wie ich das schreiben soll ?

              Kommentar


              • #8
                So funktioniert es:
                Code:
                    <div id="outer" style="display:none;">
                        <div id="inner">
                            <img src="images/dia0.jpg" alt="news" width="800" height="600" title="News" border="0">
                        </div>
                    </div>
                    <script>
                        if (!localStorage.getItem("visited")) {
                            $('#outer').fadeIn(2000).delay(10000).fadeOut(2000);
                            localStorage.setItem("visited", "true");
                        }
                    </script>
                Bildpfad musst Du anpassen.

                Kommentar


                • #9
                  Zitat von Sempervivum Beitrag anzeigen
                  So funktioniert es:
                  Code:
                   <div id="outer" style="display:none;">
                  <div id="inner">
                  <img src="images/dia0.jpg" alt="news" width="800" height="600" title="News" border="0">
                  </div>
                  </div>
                  <script>
                  if (!localStorage.getItem("visited")) {
                  $('#outer').fadeIn(2000).delay(10000).fadeOut(2000);
                  localStorage.setItem("visited", "true");
                  }
                  </script>
                  Bildpfad musst Du anpassen.
                  HILFE.....lasse mich einfrieren.
                  bin zu blöd um dieses script sauber einzupacken
                  http://www.sandrawies.com/index.html

                  Zuletzt geändert von Atlan; 10.02.2017, 10:49.

                  Kommentar


                  • #10
                    Anscheinend hast Du es gar nicht probiert. Meinen Code musst Du hier einfügen:
                    Code:
                     
                    <script type="text/javascript">
                    $(document).ready(function(e) {
                    $('#outer').click(function() {
                    $('#outer').fadeOut({queue:false,duration:1000});
                    });
                    $('#outer').fadeIn(2000).delay(10000).fadeOut(2000);
                    });
                    </script>
                    so dass es so aussieht:
                    Code:
                        
                    <script type="text/javascript">
                    $(document).ready(function(e) {
                    $('#outer').click(function() {
                    $('#outer').fadeOut({queue:false,duration:1000});
                    });
                    if (!localStorage.getItem("visited")) { $('#outer').fadeIn(2000).delay(10000).fadeOut(2000); localStorage.setItem("visited", "true"); }
                    });
                    </script>
                    Keine Ahnung, warum dieses Forum den Text als Tabelle formatiert?

                    Kommentar


                    • #11
                      1) Danke, jetzt funtzt.( P.S. Wurde lokal getestet....wegen des nicht testens..)
                      2) Ist das normal dass das Bild sogar bei einem Neustart des PC nicht mehr erscheind. ?
                      Edge & Firefox 51.0.1 getestet.
                      Wollte im Prinzip , nach Neustart der Seite das Bild wieder sehen. Also jedesmal nur beim ersten aufruf der Seite.
                      Ich weiss, ich Nerve, aber Sorry tzotzdem.
                      Atlan

                      Kommentar


                      • #12
                        Ist das normal dass das Bild sogar bei einem Neustart des PC nicht mehr erscheind.
                        Ja, die Einträge des Localstorage werden auf der Festplatte gespeichert und bleiben deshalb bei einem Neustart erhalten.
                        Wollte im Prinzip , nach Neustart der Seite das Bild wieder sehen. Also jedesmal nur beim ersten aufruf der Seite.
                        Alternativ kannst Du sessionStorage verwenden, dann gilt der Eintrag nur für eine Browsersitzung:
                        https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage
                        sessionStorage ähnelt localStorage und hat auch dieselben Methoden, die Daten stehen aber nur während des Browsens zur Verfügung und werden mit dem Verlassen der Seite gelöscht.
                        Zuletzt geändert von Sempervivum; 11.02.2017, 01:25.

                        Kommentar


                        • #13
                          Zitat von Sempervivum Beitrag anzeigen
                          Ja, die Einträge des Localstorage werden auf der Festplatte gespeichert und bleiben deshalb bei einem Neustart erhalten.Alternativ kannst Du sessionStorage verwenden, dann gilt der Eintrag nur für eine Browsersitzung:
                          https://wiki.selfhtml.org/wiki/JavaScript/Web_Storage
                          habe das probiert und komme nicht klar, kriege kein Bild mehr angezeigt. auch mir dem .clear () Befehl. mach mich noch Moschuger() LOL Aber trotzdem Danke

                          Kommentar


                          • #14
                            Bei mir funktioniert es einwandfrei. Ich habe lediglich "localStorage" durch "sessionStorage" ersetzt. Lädt man die Seite neu, wird das Bild nicht angezeigt. Schließt man den Tab und öffnet die Seite neu, wird es wieder angezeigt.

                            Kommentar


                            • #15
                              DANKE mein Fehler
                              Es funkt. jetzt einwandfrei.

                              Kommentar

                              Lädt...
                              X