- Labornetzteil AliExpress         
Ergebnis 1 bis 10 von 32

Thema: Script etc. zum zyklischen Anzeigen für Websites in Firefox?

Hybrid-Darstellung

Vorheriger Beitrag Vorheriger Beitrag   Nächster Beitrag Nächster Beitrag
  1. 07.03.2018, 19:18 #1
    HaWe
    Gast
    Klicke auf die Grafik für eine größere Ansicht Name: thumbs-up-sign_1f44d.png Hits: 15 Größe: 2,0 KB ID: 33328 Klicke auf die Grafik für eine größere Ansicht Name: thumbs-up-sign_1f44d.png Hits: 15 Größe: 2,0 KB ID: 33328 Klicke auf die Grafik für eine größere Ansicht Name: thumbs-up-sign_1f44d.png Hits: 15 Größe: 2,0 KB ID: 33328
    ZitierenZitieren
  2. 07.03.2018, 19:56 #2
    Ceos
    Ceos ist offline
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    11.12.2007
    Ort
    weit weg von nahe Bonn
    Alter
    40
    Beiträge
    3.416
    die feinheiten des HTML ... immer wieder ein Rätsel ... hier nochmal ne Fassung die teilweise geht ... aber aus irgend einem grund zeigt der nur die erste seite an wenn ich objekte in die divs packe, wenn ich aber einfach nur text rein machen geht es seltsamerweise

    Code:
    <!--
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
//
// **********************************************************************
// This program is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
// **********************************************************************
-->
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <style type="text/css">
         html, body {
            height: 100%;
            width: 100%;
            margin: 0;
         }


      </style>
      <!--[if lte IE 6]>
      <style type="text/css">
         #container {
            height: 100%;
         }
      </style>
      <![endif]-->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script>
      <script type="text/javascript">
         $(document).ready(function () 
         {  //start after HTML, images have loaded
            var InfiniteRotator = 
            { 
               init: function() 
               {
                  //initial fade-in time (in milliseconds)
                  var initialFadeIn = 1000;

                  //interval between items (in milliseconds)
                  var itemInterval = 5000;

                  //cross-fade time (in milliseconds)
                  var fadeTime = 1000;

                  //count number of items
                  var numberOfItems = $('.rotating-item').length;

                  //set current item
                  var currentItem = 0;

                  //show first item
                  $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

                  //loop through the items    
                  var infiniteLoop = setInterval(function()
                  {
                     $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
                     if(currentItem == numberOfItems -1)
                     {
                        currentItem = 0;
                     }
                     else
                     {
                        currentItem++;
                     }
                     $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
                  }, itemInterval); 
               } 
            };
      
            InfiniteRotator.init();
        
         });
      </script>    
      <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title>
   </head>
   <body>

   <div id="rotating-item-wrapper">
      <div class="rotating-item" style="z-index: 1; position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid green 2px;">test1<!--<object type="text/html" data="https://www.onvista.de/index/DAX-Index-20735" style="min-width: 100%; min-height: 100%;"/>--></div>
      <div class="rotating-item" style="z-index: 2; position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid red 2px;">test2<!--<object type="text/html" data="https://www.onvista.de/index/MDAX-Index-323547" min-width="100%" min-height="100%"/>--></div>
      <div class="rotating-item" style="z-index: 3; position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid blue 2px;">test3<!--<object type="text/html" data="https://www.onvista.de/index/Dow-Jones-Index-324977"/>--></div>
      <div class="rotating-item" style="z-index: 4; position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid orange 2px;">test4<!--<object type="text/html" data="https://www.onvista.de/aktien/Alibab...e-US01609W1027"/>--></div>
      <div class="rotating-item" style="z-index: 5; position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid yellow 2px;">test5<!--<object type="text/html" data="https://www.onvista.de/aktien/Facebo...e-US30303M1027"/>--></div>
      
   </div>
   </body>
    EDIT: ich glaube das liegt daran dass die webseite von onvista nicht richtig geladen wird! die rödelt bei mir rum und im browser taucht bei mir nur ein einziges DIV mit der ersten seite auf ... das iss irgendwie blöd ... jetzt muss ich rausfinden wei cih objekte separat laden kann ... mhh
    Es gibt 10 Sorten von Menschen: Die einen können binär zählen, die anderen
    nicht.
    ZitierenZitieren
  3. 07.03.2018, 20:11 #3
    HaWe
    Gast
    stimmt, bei mir auch:
    test1...test5 werden zyklisch angezeigt!
    ZitierenZitieren
  4. 07.03.2018, 20:16 #4
    Ceos
    Ceos ist offline
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    11.12.2007
    Ort
    weit weg von nahe Bonn
    Alter
    40
    Beiträge
    3.416
    Code:
    <!--
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
//
// **********************************************************************
// This program is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
// **********************************************************************
-->
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <style type="text/css">
         html, body {
            height: 100%;
            width: 100%;
            margin: 0;
         }


      </style>
      <!--[if lte IE 6]>
      <style type="text/css">
         #container {
            height: 100%;
         }
      </style>
      <![endif]-->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.3.1"></script>
      <script type="text/javascript">
         $(document).ready(function () 
         {  //start after HTML, images have loaded
            var InfiniteRotator = 
            { 
               init: function() 
               {
                  //initial fade-in time (in milliseconds)
                  var initialFadeIn = 2000;

                  //interval between items (in milliseconds)
                  var itemInterval = 5000;

                  //cross-fade time (in milliseconds)
                  var fadeTime = 2000;

                  //count number of items
                  var numberOfItems = $('.rotating-item').length;

                  //set current item
                  var currentItem = 0;

                  //show first item
                  $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

                  //loop through the items    
                  var infiniteLoop = setInterval(function()
                  {
                     $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
                     if(currentItem == numberOfItems -1)
                     {
                        currentItem = 0;
                     }
                     else
                     {
                        currentItem++;
                     }
                     $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
                  }, itemInterval); 
               } 
            };
      
            InfiniteRotator.init();
        
         });
      </script>    
      <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title>
   </head>
   <body>

   <div id="rotating-item-wrapper">
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid green 2px;">
         <object type="text/html" data="https://www.onvista.de/index/DAX-Index-20735" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object></object></object></object></object>
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid red 2px;">
         <object type="text/html" data="https://www.onvista.de/index/MDAX-Index-323547" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object></object></object></object></object>
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid blue 2px;">
         <object type="text/html" data="https://www.onvista.de/index/Dow-Jones-Index-324977" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object></object></object></object></object>
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid orange 2px;">
         <object type="text/html" data="https://www.onvista.de/aktien/Alibab...e-US01609W1027" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object></object></object></object></object>
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid yellow 2px;">
         <object type="text/html" data="https://www.onvista.de/aktien/Facebo...e-US30303M1027" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object></object></object></object></object>
      </div>
      
   </div>
   </body>

    danke für den hirnsport hat gut getan und funktionieren tut es auch XD

    für weitere seiten einfach einen der div abschnitte mit dem object darin kopieren und die adresse in src des object ändern, rest so lassen wie er ist

    PS: mit facebook hab ich damals auch bei onvista spekuliert ... leider zu früh raus gegangen und nur 200% mitgenommen ... aber egal XD

    PPS: irgendwas in der onvista seite macht stress und stört meine HTML ich habe einfach ein paar schließende tag für /object reingeworfen und damit hat es dann geklappt

    und wenn die farbigen ränder stören einfach den part mit
    " border: solid yellow 2px; " aus den zeilen entfernen, das war nur wegen der objektgröße als hilfe
    Geändert von Ceos (07.03.2018 um 20:24 Uhr)
    Es gibt 10 Sorten von Menschen: Die einen können binär zählen, die anderen
    nicht.
    ZitierenZitieren
  5. 07.03.2018, 22:19 #5
    HaWe
    Gast
    Klicke auf die Grafik für eine größere Ansicht Name: thumbs-up-sign_1f44d.png Hits: 15 Größe: 2,0 KB ID: 33328

    wirklich super, absolut perfekt! ein ganz herzliches Dankeschön!

    Klicke auf die Grafik für eine größere Ansicht Name: thumbs-up-sign_1f44d.png Hits: 15 Größe: 2,0 KB ID: 33328

    - - - Aktualisiert - - -

    kurze Ergänzung:

    der Kurs-Chart wird immer nur beim 1. Link angezeigt, beim Rest fehlt er immer - dann ist er in der neuen Runde beim 1. Link wieder da.
    Hat jetzt aber keine Eile, der aktuelle Kurs ist immerhin immer da!

    - - - Aktualisiert - - -

    stimmt auch nicht immer, jetzt geht es zeitweise. Scheint was mit den eingebetteten Java-Werbeapplets zu tun zu haben, ob es funzt oder nicht.

    - - - Aktualisiert - - -

    FAZIT:

    alles super, wie es jetzt läuft, vielen, vielen Dank noch mal! Klicke auf die Grafik für eine größere Ansicht Name: thumbs-up-sign_1f44d.png Hits: 15 Größe: 2,0 KB ID: 33328
    ZitierenZitieren
  6. 08.03.2018, 06:44 #6
    Ceos
    Ceos ist offline
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    11.12.2007
    Ort
    weit weg von nahe Bonn
    Alter
    40
    Beiträge
    3.416
    wie gesagt, die eingebetten Seiten stressen irgendwie rum weil schlecht gecoded (Firefox Debugger meldet viele Fehler in den Webseiten), wenn ich eine Lösung finde wie ich die Webseiten Einkapseln kann ohne ihre Funktion einzuschränken, werf ich hier im Topic einfach was hinterher

    und manchmal kommen die besten Ideen wenn man darüber schreibt ... ich versuch mal ne Version mit FRAME oder IFRAME ... mal sehen ob die sich besser verhalten


    ---------

    Ich habe mal NOCH eine Version gebaut, die in den jeweiligen DIVs das Schlüsselwort SANDBOX benutzt, damit sollten die divs sich stabiler verhalten
    Code:
    <!--
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
//
// **********************************************************************
// This program is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
// **********************************************************************
-->
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <style type="text/css">
         html, body {
            height: 100%;
            width: 100%;
            margin: 0;
         }


      </style>
      <!--[if lte IE 6]>
      <style type="text/css">
         #container {
            height: 100%;
         }
      </style>
      <![endif]-->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.3.1"></script>
      <script type="text/javascript">
         $(document).ready(function () 
         {  //start after HTML, images have loaded
            var InfiniteRotator = 
            { 
               init: function() 
               {
                  //initial fade-in time (in milliseconds)
                  var initialFadeIn = 2000;

                  //interval between items (in milliseconds)
                  var itemInterval = 5000;

                  //cross-fade time (in milliseconds)
                  var fadeTime = 2000;

                  //count number of items
                  var numberOfItems = $('.rotating-item').length;

                  //set current item
                  var currentItem = 0;

                  //show first item
                  $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

                  //loop through the items    
                  var infiniteLoop = setInterval(function()
                  {
                     $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
                     if(currentItem == numberOfItems -1)
                     {
                        currentItem = 0;
                     }
                     else
                     {
                        currentItem++;
                     }
                     $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
                  }, itemInterval); 
               } 
            };
      
            InfiniteRotator.init();
        
         });
      </script>    
      <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title>
   </head>
   <body>

   <div id="rotating-item-wrapper">
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid green 2px;" sandbox>
         <object type="text/html" data="https://www.onvista.de/index/DAX-Index-20735" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object><!--</object></object></object></object>-->
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid red 2px;" sandbox>
         <object type="text/html" data="https://www.onvista.de/index/MDAX-Index-323547" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object><!--</object></object></object></object>-->
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid blue 2px;" sandbox>
         <object type="text/html" data="https://www.onvista.de/index/Dow-Jones-Index-324977" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object><!--</object></object></object></object>-->
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid orange 2px;" sandbox>
         <object type="text/html" data="https://www.onvista.de/aktien/Alibab...e-US01609W1027" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object><!--</object></object></object></object>-->
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid yellow 2px;" sandbox>
         <object type="text/html" data="https://www.onvista.de/aktien/Facebo...e-US30303M1027" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object><!--</object></object></object></object>-->
      </div>
      
   </div>
   </body>
    Geändert von Ceos (08.03.2018 um 13:47 Uhr)
    Es gibt 10 Sorten von Menschen: Die einen können binär zählen, die anderen
    nicht.
    ZitierenZitieren
  7. 08.03.2018, 17:37 #7
    HaWe
    Gast
    wie es momentan aussieht, werden allerdings die Seiten nicht bei jedem Anzeigen auch wirklich aktuell neu geladen, so sind alle Seiten momentan nach 2 Stunden Laufzeit seit 14:30 auch 2 Stunden alt, d.h. um 16:30 mit den Werten von 14:30.

    - - - Aktualisiert - - -

    edit:

    Ergänzung:
    ich hatte noch die alte Version getestet, und nicht gesehen, dass du inzwischen eine neuere eingestellt hast.
    Ich beobachte jetzt mit der neuen Version weiter...
    Code:
    <!--
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
//
// **********************************************************************
// This program is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
// **********************************************************************
-->
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <style type="text/css">
         html, body {
            height: 100%;
            width: 100%;
            margin: 0;
         }


      </style>
      <!--[if lte IE 6]>
      <style type="text/css">
         #container {
            height: 100%;
         }
      </style>
      <![endif]-->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.3.1"></script>
      <script type="text/javascript">
         $(document).ready(function () 
         {  //start after HTML, images have loaded
            var InfiniteRotator = 
            { 
               init: function() 
               {
                  //initial fade-in time (in milliseconds)
                  var initialFadeIn = 2000;

                  //interval between items (in milliseconds)
                  var itemInterval = 20000;

                  //cross-fade time (in milliseconds)
                  var fadeTime = 2000;

                  //count number of items
                  var numberOfItems = $('.rotating-item').length;

                  //set current item
                  var currentItem = 0;

                  //show first item
                  $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

                  //loop through the items    
                  var infiniteLoop = setInterval(function()
                  {
                     $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
                     if(currentItem == numberOfItems -1)
                     {
                        currentItem = 0;
                     }
                     else
                     {
                        currentItem++;
                     }
                     $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
                  }, itemInterval); 
               } 
            };
      
            InfiniteRotator.init();
        
         });
      </script>    
      <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title>
   </head>
   <body>

   <div id="rotating-item-wrapper">
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid green 2px;" sandbox>
         <object type="text/html" data="https://www.onvista.de/index/DAX-Index-20735" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object><!--</object></object></object></object>-->
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid red 2px;" sandbox>
         <object type="text/html" data="https://www.onvista.de/index/MDAX-Index-323547" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object><!--</object></object></object></object>-->
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid blue 2px;" sandbox>
         <object type="text/html" data="https://www.onvista.de/etf/DEKA-MDAX-UCITS-ETF-ETF-DE000ETFL441" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object><!--</object></object></object></object>-->
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid blue 2px;" sandbox>
         <object type="text/html" data="https://www.onvista.de/index/Dow-Jones-Index-324977" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object><!--</object></object></object></object>-->
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid orange 2px;" sandbox>
         <object type="text/html" data="https://www.onvista.de/aktien/Alibaba-Aktie-US01609W1027" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object><!--</object></object></object></object>-->
      </div>      
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid yellow 2px;" sandbox>
         <object type="text/html" data="https://www.onvista.de/aktien/Facebook-Aktie-US30303M1027" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object><!--</object></object></object></object>-->
      </div>
      <div class="rotating-item" style="position: fixed; top: 0; left: 0; display: none; min-height: 100%; min-width: 100%; border: solid yellow 2px;" sandbox>
         <object type="text/html" data="https://www.onvista.de/aktien/TENCENT-HOLDINGS-LTD-Aktie-KYG875721634" style="position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%;"></object><!--</object></object></object></object>-->
      </div>

      
   </div>
   </body>
    - - - Aktualisiert - - -

    aktualisiert:

    ja, es scheint so zu bleiben:

    es gibt Seiten, die sich von sich aus aktualisieren, per Ticker: hier wird die Anzeige immer aktualisiert.

    Die Seiten aber, die das nicht tun, bleiben auf dem alten Stand stehen und zeigen immer die alten Werte (z.B. Alibaba, Facebook).
    Werden sie hingegen manuell geladen und danach immer wieder neu manuell neu geladen (F5 oder reload-Symbol), dann sind sie aktualisiert, wie erwartet:

    das InfiniteRotatingImages-Programm müsste es aber auch so machen als würde man manuell neu laden.

    (augenblicklich kann man es nur auf den US Handelsplätzen verfolgen, da die deutschen (Frankfurt, Xetra) ja geschlossen sind.
    Alibaba und Facebook z.B. werden dabei automatisch auf Nasdaq (d.h. von D nach USA) umgeswitcht.)

    Vermutlich wird der DAX und der MDAX per Ticker selbst-aktualisierend sein, während Einzelaktien an deutschen Börsen nur per Neu-Laden aktualisert werden können: das fehlt im Augenblick also bisher.
    Geändert von HaWe (08.03.2018 um 18:41 Uhr)
    ZitierenZitieren
  8. 08.03.2018, 18:44 #8
    Ceos
    Ceos ist offline
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    11.12.2007
    Ort
    weit weg von nahe Bonn
    Alter
    40
    Beiträge
    3.416
    ja, die neuladefunktion hatte ich nicht eingebaut, hab ich irgendwie vergessen, ich schau mal was cih machen kann

    aber ich werd das so einbauen dass du steuern kannst welche seiten sich aktualsieren sollen, weil die mit dynamischer aktualisierung würden sonst ständig neu laden und die verbindungen neu laden, was den browser unnötig bremst
    Es gibt 10 Sorten von Menschen: Die einen können binär zählen, die anderen
    nicht.
    ZitierenZitieren
  9. 08.03.2018, 19:11 #9
    HaWe
    Gast
    ok, danke, steuern können ist an sich ja immer gut , aber weil die Seiten ja nur ca. 10-15 sec. angezeigt werden, wäre "immer aktualisieren" eigentlich absolut perfekt, gerade weil zwischendurch auch oft Ladefehler passieren!
    ZitierenZitieren
  10. 09.03.2018, 14:36 #10
    Ceos
    Ceos ist offline
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    11.12.2007
    Ort
    weit weg von nahe Bonn
    Alter
    40
    Beiträge
    3.416
    Finale Fassung!!!!

    ich habe die links in ein array gepackt und nur minimales feedback eingebaut, wenn man zu wenig einträge ind er liste hat doer wenn der script das wrapper div nicht finden kann!
    außerdem habe ich den code mal kommentiert zum verständnis und in dem array kann man auch sagen ob die seite NACH DEM FADEOUT neu geladen werden soll oder nicht (soll bedeuten die pages laden gleich NACH dem ausblenden neu, sind also nicht top aktuell, dafür müsste ich mir nochmal einen in der logik abbrechen um quasi das übernächste object zu reloaden während das aktuelle angezeigt wird doer so)

    Code:
    <!--
// Released under the GPL license
// http://www.opensource.org/licenses/gpl-license.php
//
// **********************************************************************
// This program is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
// **********************************************************************
-->
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <style type="text/css">
         html, body {
            height: 100%;
            width: 100%;
            margin: 0;
         }
      </style>
      <!--[if lte IE 6]>
      <style type="text/css">
         #container {
            height: 100%;
         }
      </style>
      <![endif]-->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.3.1"></script>
      <script type="text/javascript">
      
         //define list for all websites to cycle
         var URIList = [ 
            {"data": "https://www.onvista.de/index/DAX-Index-20735", reload: false},
            {"data": "https://www.onvista.de/index/MDAX-Index-323547", reload: false},
            {"data": "https://www.onvista.de/index/Dow-Jones-Index-324977", reload: false},
            {"data": "https://www.onvista.de/aktien/Alibab...e-US01609W1027", reload: false},
            {"data": "https://www.onvista.de/aktien/Facebo...e-US30303M1027", reload: false},
            {"data": "http://www.zeitzonen.de/deutschland.html", reload: true}
         ];
         
         //creates an object JQUERY node with the defined website that can be attached anywhere
         function createContent(data)
         {
            var newcontent = document.createElement("object");
            newcontent.style.position = "fixed"; 
            newcontent.style.top = 0; 
            newcontent.style.left = 0; 
            newcontent.style.minWidth = "100%"; 
            newcontent.style.minHeight = "100%";
            newcontent.id = "content-object";
            newcontent.type = "text/html";
            newcontent.data = data;
            return $(newcontent);
         }
         
         $(document).ready(function ()
         {
            //create our rotating-items
            var divs = [];
            var containers = $("#rotating-item-list");
            if(containers.length == 0)
            {
               alert("NO \"rotating-item-list\" CONTAINER FOUND!")
            }
            else if(containers.length > 1)
            {
               alert("ONLY 1 \"rotating-item-list\" CONTAINER ALLOWED!")
            }
            else
            {
               var divcontainer = containers.get(0);
               URIList.forEach(function(element){

               //create a div that can be faded and uses all displayspace available while overlapping with identical divs
                  var newdiv = document.createElement("div"); 
                  newdiv.style.position = "fixed";
                  newdiv.style.top = 0;
                  newdiv.style.left= 0;
                  if(divs.length > 0)
                  {
                     newdiv.style.display = "none";
                  }
                  else
                  {
                     newdiv.style.display = "block";
                  }
                  newdiv.style.minHeight = "100%";
                  newdiv.style.minHidth = "100%";
                  newdiv.class = "rotating-item";
                  newdiv.sandbox = "";

                  //create an object which loads and displays the page of interest
                  var newcontent = createContent(element.data);
                  
                  //convert DOM to JQUERY
                  newdiv = $(newdiv);

                  //insert content in div
                  newdiv.append(newcontent);

                  //insert div in container
                  divcontainer.append(newdiv.get(0));
                  divs.push(newdiv);
               });
               if(divs.length < 2)
               {
                  alert("TO FEW ENTRYS TO CYCLE");
               }
               else
               {
                  //start after HTML, images have loaded
                  var InfiniteRotator = 
                  { 
                     init: function() 
                     {
                        //initial fade-in time (in milliseconds)
                        var initialFadeIn = 1000;

                        //interval between items (in milliseconds)
                        var itemInterval = 3000;

                        //cross-fade time (in milliseconds)
                        var fadeTime = 1000;

                        //count number of items
                        var numberOfItems = divs.length;//$('.rotating-item').length;

                        //set current item
                        var currentItem = 0;

                        //show first item
                        $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
                        
                        var lastItem = -1;

                        //loop through the items    
                        var infiniteLoop = setInterval(function ()
                        {
                           //fade out and when finished reload page
                           divs[currentItem].fadeOut(fadeTime, function (){
                              if(URIList[lastItem].reload == true)
                              {
                                 var fadednode = $(this); //grab JQUERY
                                 fadednode.empty(this.firstChild); //clear content
                                 var newcontent = createContent(URIList[lastItem].data); //create new content
                                 fadednode.append(newcontent); //append new content
                              }
                           });
                           lastItem = currentItem;
                           if(currentItem == numberOfItems -1)
                           {
                              currentItem = 0;
                           }
                           else
                           {
                              currentItem++;
                           }
                           divs[currentItem].fadeIn(fadeTime);
                        }, itemInterval); 
                     } 
                  };
            
                  InfiniteRotator.init();
               }
            }
         });
      </script>    
      <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title>
   </head>
   <body>
      <div id="rotating-item-list">
      </div>
   </body>
</html>
    ACHTUNG: achte mal auf deinen RAM verbrauch, für das reload lösche ich content und erstelle ihn neu, ich hoffe da ist kein memory leak dabei
    Es gibt 10 Sorten von Menschen: Die einen können binär zählen, die anderen
    nicht.
    ZitierenZitieren
« Vorheriges Thema | Nächstes Thema »

Ähnliche Themen

  1. test mit Firefox 57
    Von HaWe im Forum Anregungen/Kritik/Fragen zum Forum und zum Wiki RN-Wissen
    Antworten: 0
    Letzter Beitrag: 18.11.2017, 12:30
  2. Lesezeichensymbol bei firefox ändern
    Von oberallgeier im Forum Offtopic und Community Tratsch
    Antworten: 4
    Letzter Beitrag: 08.12.2014, 18:55
  3. Mozilla Firefox 13 - sinnvolle Addons?
    Von Thomas E. im Forum Offtopic und Community Tratsch
    Antworten: 7
    Letzter Beitrag: 14.06.2012, 14:34
  4. gute Robotik/Microcontroller websites - Sammelthread
    Von goara im Forum Allgemeines zum Thema Roboter / Modellbau
    Antworten: 4
    Letzter Beitrag: 02.07.2010, 15:17
  5. ICQ Mail und Firefox
    Von izaseba im Forum PC-, Pocket PC, Tablet PC, Smartphone oder Notebook
    Antworten: 3
    Letzter Beitrag: 25.08.2005, 10:37

Lesezeichen

Berechtigungen

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

Foren-Regeln


12V Akku bauen