ach sooo funktioniert das - ok, dann habe ich jetzt wenigstens eine grobe Vorstellung davon, wie man Firefox dazu bringen kann, so etwas abzuspulen...Zitat:
Zitat von Ceos
Druckbare Version
ach sooo funktioniert das - ok, dann habe ich jetzt wenigstens eine grobe Vorstellung davon, wie man Firefox dazu bringen kann, so etwas abzuspulen...Zitat:
Zitat von Ceos
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
vielen herzlichen Dank!
aber nein, keine charts wie gesagt, sondern die kompletten websites, samt ihrer ganzen Links, Einstellungen, und eingebetten Objekte, so als wenn man sie per url manuell aufruft - wie man das einsetzt oder ersetzt, verstehe ich aber noch nicht, da ich nicht weiß, was solche "items", "divs", "fadein" oder "alerts" etc. überhaupt sind, ganz zu schweigen von java oder javascript.
Die popup-Fenster müssten ntl alle raus, damit es ohne Unterbrechung automatisch durchläuft - verstehe aber absolut nicht, wie man die im Quelltext löscht (die Sprachzeilen sind mir alle völlig fremd).
Eingabefelder aber brauche ich gar nicht, ich brauche nur die genannten 5 oder 6 urls, und wenn ich mal andere brauchen sollte, dann ersetze ich sie einfach statisch im Quelltext.
das ist exakt das, ich habe nur die google charts zum testen benutzt, das sind keine bilder sondern vollwertige webseitenZitat:
aber nein, keine charts wie gesagt, sondern die kompletten websites, samt ihrer ganzen Links, Einstellungen, und eingebetten Objekte, so als wenn man sie per url manuell aufruft
popouts macht man mit sog. alerts, schmeiß einfach die ganzen "alert("BLABLA");" aus dem code raus und erstz weiter unten im body die adressen für deine wunsch-webseiten
ersetz einfach die adressen und füge neue zeilen nach belieben ein, der code passt sich automatisch anCode:<div class="rotating-item"><object type="text/html" data="http://www.chartjs.org/samples/latest/charts/polar-area.html" width="980" height="347" /></div>
die width und height parameter kannst du weglassen oder auf "100%" setzen damit sie bildfüllen geöffnet werden
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>
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
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
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 ... mhhCode:<!--
// 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>
stimmt, bei mir auch:
test1...test5 werden zyklisch angezeigt!
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 :D 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