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

**Ceos** · 07.03.2018, 12:41

gibst du mir mal 3 chart links als beispiel dann versuch ich das mal eben in einen online HTML editor zu packen

PS.
es soll ja auch in einem Firefox-Tab laufen, nicht eine eigene Website erstellen

es ist nur eine HTML die du lokal aufrufst, kein server benötigt

Her estmal ein Beispiel, aber irgendwas habe ich beim kopieren verbockt, der wechselt die charts nicht durch, ich fix das offentlich schnell XD

http://scratchpad.io/grateful-vacation-3980

irgendwie bin ich aber auchg erade zu blöd dafür den script starten zu lassen, der wird einfach nciht aufgerufen ... WTF ?

HaWe · 07.03.2018, 13:06

Zitat von Ceos

gibst du mir mal 3 chart links als beispiel dann versuch ich das mal eben in einen online HTML editor zu packen

das sind die urls, die ich oben verlinkt hatte, mit allem drum und dran:

while(true) {
https://www.onvista.de/index/DAX-Index-20735
sleep(20);
https://www.onvista.de/index/MDAX-Index-323547
sleep(20);
https://www.onvista.de/index/Dow-Jones-Index-324977
sleep(20);
https://www.onvista.de/aktien/Alibab...e-US01609W1027
sleep(20);
https://www.onvista.de/aktien/Facebo...e-US30303M1027
sleep(20);
}

**Ceos** · 07.03.2018, 13:40

Code:

<!--
// Copyright (c) 2010 TrendMedia Technologies, Inc., Brian McNitt. 
// All rights reserved.
//
// 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>
    <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">
      function rotator()  {  //start after HTML, images have loaded
        alert("LAUNCHED")
        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 = 2500;
            
            //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>
    <meta charset="utf-8" />
    <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title>
  </head>
  <body onload="rotator();">
    <h1>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</h1>
    <div id="rotating-item-wrapper">
      <div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/polar-area.html" width="980" height="347" /></div>
      <div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/line/stepped.html" width="980" height="347" /></div>
      <div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/bar/horizontal.html" width="980" height="347" /></div>
    </div>
  </body>
</html>

so müsste das EIGENTLICH funktionieren, aber er beschwert sich im browser beim laden immer über das $ zeichen im script, obwohl ich die jquery geladen habe

HaWe · 07.03.2018, 13:46

ok, vielen Dank für die viele Mühe!
Wie lade ich denn jetzt den ganzen Code, damit er im Firefox-Fenster läuft?

Code:

<!--
// Copyright (c) 2010 TrendMedia Technologies, Inc., Brian McNitt. 
// All rights reserved.
//
// 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>
    <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">
      function rotator()  {  //start after HTML, images have loaded
        alert("LAUNCHED")
        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 = 2500;
            
            //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>
    <meta charset="utf-8" />
    <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title>
  </head>
  <body onload="rotator();">
    <h1>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</h1>
    <div id="rotating-item-wrapper">
      <div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/polar-area.html" width="980" height="347" /></div>
      <div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/line/stepped.html" width="980" height="347" /></div>
      <div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/bar/horizontal.html" width="980" height="347" /></div>
    </div>
  </body>
</html>

**Ceos** · 07.03.2018, 13:51

text datei auf, text rein, umbenennen zu .html statt .txt, doppelklick, eventuell zielbrowser zum öffnen von HTML auswählen

ich komme die nächsten 2-3 stunden aber nicht mehr an einen PC ich kann zwar beiträge lesen und antworten aber nicht mehr am script arbeiten und leider auch jetzt nicht mehr rausfinden was ich da gerade falsch gemacht habe dass er den script nicht vollständig ausführt sorry ;P

HaWe · 07.03.2018, 13:54

Zitat von Ceos

text datei auf, text rein, umbenennen zu .html statt .txt, doppelklick, eventuell zielbrowser zum öffnen von HTML auswählen

ach sooo funktioniert das - ok, dann habe ich jetzt wenigstens eine grobe Vorstellung davon, wie man Firefox dazu bringen kann, so etwas abzuspulen...

**Ceos** · 07.03.2018, 14:02

EDITIERT, BITTE GENAU AUF DIE EDIT MARKIERUNG ACHTEN

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>
    <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
         alert("LAUNCHING");
        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 = 2500;
            
            //count number of items
            var numberOfItems = $('.rotating-item').length;
      
            //set current item
            var currentItem = 0;
      
            //show first item
            $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
            alert("PREPARED");
      
            //loop through the items    
            var infiniteLoop = setInterval(function(){
              $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
               alert("ROTATING");
              if(currentItem == numberOfItems -1){
                currentItem = 0;
              }else{
                currentItem++;
              }
              $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
      
            }, itemInterval); 
            alert("DONE");
          } 
        };
      
        InfiniteRotator.init();
        
      });
    </script>    <meta charset="utf-8" />
    <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title>
  </head>
  <body>

    <h1>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</h1>
    <div id="rotating-item-wrapper">
      <div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/polar-area.html" width="980" height="347" /></div>
      <div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/line/stepped.html" width="980" height="347" /></div>
      <div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/bar/horizontal.html" width="980" height="347" /></div>
    </div>
   </body>

ACHTUNG: da sind alerts drinne zum debuggen, einfach nur die alert zeilen löschen dann sind die meldungen weg!

VERALTET: der funktioniert aber die divs sind trotzdem nciht sichtbar aus irgendwelchen gründen die sich mir gerade noch nciht erschließen
EDIT: habe vergessen die divs mit dem inhalt reinzu packen, jetzt geht es ;D

in der script schleife wo das fadein steht, könnetst du einfach eine zeile darüber einfügen die das div neu laden lässt um den inhalt neu zu laden! sollten deine charts bereits von alleine updaten kannst du dir das sparen

PS: später kann cih dir auch noch versuchenein simples eingabefeld einzubauen, mit dem du neue charts hinzufügen kannst, aber normalerweise lädt er nur das was als <div class="rotating-item"></div> im beispiel angegeben ist und innerhalb des wrappers <div id="rotating-item-wrapper"></div> steht

HaWe · 07.03.2018, 18:38

da verstehe ich zuwenig von der Sprache, was da wirklich geändert werden und passieren muss.
So kommt jedenfalls nur Murks raus:

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. 
// **********************************************************************
-->

// https://www.onvista.de/index/DAX-Index-20735

// https://www.onvista.de/index/MDAX-Index-323547

// https://www.onvista.de/index/Dow-Jones-Index-324977

// https://www.onvista.de/aktien/Alibab...e-US01609W1027

// https://www.onvista.de/aktien/Facebo...e-US30303M1027
 

<html lang="en">
  <head>
    <script type="text/javascript" src="https://www.onvista.de/index/DAX-Index-20735"></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 = 2500;
            
            //count number of items
            var numberOfItems = $('.rotating-item').length;
      
            //set current item
            var currentItem = 0;
      
            //show first item
            $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);
            alert("PREPARED");
      
            //loop through the items    
            var infiniteLoop = setInterval(function(){
              $('.rotating-item').eq(currentItem).fadeOut(fadeTime);
               alert("ROTATING");
              if(currentItem == numberOfItems -1){
                currentItem = 0;
              }else{
                currentItem++;
              }
              $('.rotating-item').eq(currentItem).fadeIn(fadeTime);
      
            }, itemInterval); 
            alert("DONE");
          } 
        };
      
        InfiniteRotator.init();
        
      });
    </script>    <meta charset="utf-8" />
    <title>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</title>
  </head>
  <body>

    <h1>Infinite Rotating Images Using jQuery (JavaScript) - Unstyled</h1>
    <div id="rotating-item-wrapper">
      <div class="rotating-item"><object type="text/html" data="https://www.onvista.de/index/MDAX-Index-323547" /></div>
      <div class="rotating-item"><object type="text/html" data="www.onvista.de/index/Dow-Jones-Index-324977" /></div>
      <div class="rotating-item"><object type="text/html" data="https://www.onvista.de/aktien/Alibab...e-US01609W1027" /></div>
      <div class="rotating-item"><object type="text/html" data="www.onvista.de/aktien/Facebo...e-US30303M1027" /></div>
    </div>
   </body>

**Ceos** · 07.03.2018, 19:13

ah okay ich seh noch einen fehler, die divs werden untereinander dargestellt

da muss ich wohl nochmal ran in ruhe und sehen wie man die divs überlappen lässt

PS bei mir läd es schon aber die divs stehen halt untereinander ... das iss bissl doof XD