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

HaWe · 07.03.2018, 12:39

hmmm - gibts da irgendwo Lösungsbeispiele, wo man einfach nur die dortigen urls durch meine urls ersetzen muss?

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

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

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>