wechselnde anzeige im fixen bereich

[Mathias]

Hallo ,

ich bin neu in dem Segment und habe gerade mein erstes problem für das ich keine lösung gefunden habe.

ich habe auf meiner page einen fixen bereich namens .top_container.dieser bereich wird mit einem CSS sheet formatiert.

in der html datei sieht der folgendermaßen aus :

<div class="top_container">
...
...
</div>

im CSS sheet ist er so definiert :

.top_container
{
color: #000000;
font-family: Arial,Helvetica,sans-serif;
height: 100px;
position: absolute;
top: 0px;
left: 175px;
width: 750px;
}

dieser container stellt quasi das obere "news banner" der page dar. ich will nun innerhalb dieses bereichs 2 zeitverzögerte wechselnde anzeigen haben. die zeitverzögerung regele ich mittels folgender java-script funktion :

<script type="text/javascript" language="JavaScript">
<!--
function warten(prmSec)
{
prmSec *= 1000;
var eDate = null;
var eMsec = 0;
var sDate = new Date();
var sMsec = sDate.getTime();

do {
eDate = new Date();
eMsec = eDate.getTime();

} while ((eMsec-sMsec)<prmSec);
}

// Funktion mit fester Wartezeit 10 Sekunden

function warten10()
{
// Start Verzögerung 10 Sekunden
warten(10);
}

nun soll in dem container einmal diese zeile hier angzeigt werden :

<p id="text1" class="Stil6" align="center">
<img src="feuerwerk.gif" align="absmiddle"/>75 Jahre FC Laubach
<img src="feuerwerk.gif" align="absmiddle"/></p>

und dann nach 10 sek. diese hier :

<p id="text2" class="Stil6" align="center">Jubiläums Turnier vom ....</p>

wie kann ich das lösen das die formate der beiden textzeilen erhalten bleiben ? mittels write.document{"..."} bekomm ich des irgendwie nich hin.

es wäre für den bereich ja eine endlos-schleife die einfach 2 statische textzeilen inkl. Gafiken aufruft. wo kann ich diese textzeilen so formatiert wie oben beschrieben vordefinieren ohne das sie dabei angezeigt werden ?

ich komm da irgendwie nich weiter :(

Wäre für jegliche hilfe dankbar :)

mfG

Mathias

[JürgenB]

Hallo Mathias,

» do {

eDate = new Date();
eMsec = eDate.getTime();

} while ((eMsec-sMsec)<prmSec);

diese Schleife wartet. Under Besucher wartet auch. Denn in dieser Zeit passiert mit dem Browser nichts. Er "friert ein". Nur der CPU-Lüfter springt an. Warten, oder besser zeitverzögertes Ausführen einer Funktion geht mit:

http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout.

Außerdem sollten u.A. die folgenden Seiten für Dich interessant sein:

http://de.selfhtml.org/javascript/objekte/document.htm
http://de.selfhtml.org/javascript/objekte/node.htm.

Gruß, Jürgen

[Dieter Raber]

Hallo Mathias,

Erstmal ein paar Randbemerkungen:

einen fixen bereich namens .top_container
<div class="top_container">
.top_container

Erstmal waerest Du hier mit einer Id besser bedient, insbesondere mit Hinblick auf Javascript, das waere dann so:
HTML: <div id="top_container">
CSS:  #top_container

<script type="text/javascript" language="JavaScript">

Das Language-Attribut ist veraltet, nimm  <script type="text/javascript"> stattdessen.

function warten(prmSec)

macht in diesem Zusammenhang etwa das, was setInterval() macht, man kann sie also einsparen.

function warten10() {
warten(10);

deutet irgendwie daraufhin, dass es auch eine Funktion warten5() und warten17½() gibt. warten() an sich nimmt aber schon die Zeit als Argument, also koennte man warten10() getrost loeschen und warten(zeit_in_sekunden) direkt aufrufen. Das nur als allgemeine Erklaerung zum Umgang mit Funktionen, denn warten() existiert ja nicht mehr.

Nun zu deinem konkreten Problem. Du hast ja nur eine sehr begrenzte Anzahl von Datenaetzen, naemlich zwei. Wenn das so bleiben soll, und du deine Seite von Hand pflegst, koenntest du so vorgehen:

HTML

  
<div id="top_container">  
  <div id="block1" class="aktiv">  
    <img src="feuerwerk.gif" alt="" />75 Jahre FC Laubach  
    <img src="feuerwerk.gif" alt="" />  
  </div>  
  <div id="block2">  
    <p>Jubiläums Turnier vom ....</p>  
  </div>  
  <div id="block3">  
    <p>Laber, laber laber ....</p>  
  </div>  
</div>  

Wie du siehst, habe ich pro Meldung einen Container gebaut, diese sind im Moment alle gleichzeitig sichtbar, was dir natuerlich missfallen wird... Zudem sind auch alle Inlinestyles verschwunden, denn all das gehoert in's idealerweise ausgelagerte

CSS

  
#top_container div {  
  display:none;  
}  
#top_container div.aktiv{  
  display:block;  
}  

So, jetzt sind alle ausser dem ersten verborgen.

mittels write.document{"..."} bekomm ich des irgendwie nich hin.

Wenn das Dokument geladen ist, hat auch document.write() (write.document() gibt's nicht) seine Schuldigkeit getan. Dann helfen nur noch die DOM-Methoden, um die Seite zu veraendern. Dazu brauchen wir ein bisschen

Javascript

  
// in einer globalen Variablen den aktiven Block merken, nicht sehr elegant, aber fuer dieses Beispiel ertraeglich  
var aktiveBlockNummer = 1;  
function wechseln() {  
  
  // erstmal eine Referenz auf den Container erzeugen, hierbei kommt die ID von vorher in's Spiel  
  var topContainer = document.getElementById('top_container');  
  
  // als naechstes wird eine Collection mit allen <div> Elementen innerhalb des Containers erzeugt  
  var blocks = topContainer.getElementsByTagName('div');  
  
  // naechsten aktiven Block herausfinden, entweder der naechste, oder ggf. der erste  
  aktiveBlockNummer += 1;  
  if(aktiveBlockNummer > blocks.length) { aktiveBlockNummer = 1; }  
  
  // Schleife ueber alle Blocks  
  for (var i = 0; i < blocks.length; i++) {  
  
    // wenn der Block der naechste aktive Block sein soll...  
    if(blocks[i].id == 'block' + aktiveBlockNummer.toString()) {  
  
     // Klasse anhaengen,  
     blocks[i].className = 'aktiv';  
     }  
  
     // anderenfalls  
     else {  
       // Klasse entfernen  
       blocks[i].className = '';  
     }  
  }  
}  
// Funktion alle 3000 Millisekunden aufrufen, 10000 ist schon arg lang  
window.onload = function() {  
  window.setInterval("wechseln()", 3000);  
}  

Bitte benutze beim naechsten Mal Gross- und Kleinschreibung, sonst wird das Posting unleserlich.

Gruß,

Dieter

[Mathias Ott]

aber ich hab doch schon #top_container im CSS Sheet folgendermaßen erstellt:

#top_container
  {
   display: none;
 color: #000000;
   font-family: Arial,Helvetica,sans-serif;
 height: 100px;
    position: absolute;
    top: 0px;
    left: 176px;
    width: 750px;
    }

wieso dann nochmal diese hier ?

#top_container div {
  display:none;
}
#top_container div.aktiv{
  display:block;
}

gehört das zu dem script oder ist das der aufruf im HTML ???

// Funktion alle 3000 Millisekunden aufrufen, 10000 ist schon arg lang
window.onload = function() {
  window.setInterval("wechseln()", 3000);
}

Gruß Mathias

[Dieter Raber]

Hallo Mathias,

aber ich hab doch schon #top_container im CSS Sheet folgendermaßen erstellt:
#top_container

[...]

wieso dann nochmal diese hier ?

#top_container div {[...]

Der erste Block ist der Container mit der id 'top_container', der zweite sind die <div>-Elemente innerhalb dessen.
Ganz allgemein bedeutet in CSS die Konstruktion
#foo x {
  eigenschaft:wert;
}
"Ein (oder mehrere) Element vom Typ x, also <x></x>, das innerhalb eines Elementes mit der Id 'foo' liegt"
Sowas wie
<div id="foo">
  <x></x>
  <x></x>
  <x></x>
</div>

gehört das zu dem script oder ist das der aufruf im HTML ???

window.onload = function() {

Du kannst das auf zwei Arten machen, entweder so:
<html>
<head>
[...]
<script type="text/javascript">
function wechseln() {
...
}
window.onload ....
<script>
</head>

oder so

<html>
<head>
[...]
<script type="text/javascript" src="meinscript.js"><script>
[...]

und dann ein Script mit dem Inhalt:
function wechseln() {
...
}
window.onload ....

anlegen.

Gruß,

Dieter

[mathias]

hmm in selfhtml steht das onload nur in folgenden tags zugelassen ist :
<frameset> <body>

also kann ich das onload event doch auch nur innerhalb dieser tags verwenden oder ?

weil wenn ich ich die function wie von dir beschrieben im script aufrufe passiert mal gar nix

»»window.onload = function() {window.setInterval("wechseln()",3000);
                             }

kann ich die nich einfach auch ohne ein vorausgegangenes event aufrufen ?

[Dieter Raber]

Hallo mathias,

hmm in selfhtml steht das onload nur in folgenden tags zugelassen ist :
<frameset> <body>

Ich glaube du verwechselst hier was. Dieser Hinweis bezieht sich auf Konstruktionen in der Art
<body onload="window.setInterval('wechseln()',3000)">
wo also der Eventhandler direkt in einem HTML-Tag steht.

window.onload ist zwar in etwa das gleiche, steht aber im <script>-Bereich oder in der Javascriptdatei und das ist technisch voellig in Ordnung. Woran das liegt, dass meine Konstruktion bei dir Probleme macht, kann ich ohne Fehlermeldung nicht nachvollzuziehen. Moeglicherweise wuerde es helfen, das Script erst ganz am Ende im Body einzubauen, also etwa so:

<script ....>...</script>
</body>
</html>

Das sollte sicherstellen, dass zum Zeitpunkt des Aufrufes alle Elemente auch tatsaechlich vorhanden sind. Aber, wie gesagt, ohne Fehlermeldung ist das reine Spekulation.

also kann ich das onload event doch auch nur innerhalb dieser tags verwenden oder ?

Wie schon erwaehnt, du verwendest es garnicht in einem Tag, sondern innerhalb des Skript(bereiches).

weil wenn ich ich die function wie von dir beschrieben im script aufrufe passiert mal gar nix

Auch keine Fehlermeldung in der Fehlerkonsole?

kann ich die nich einfach auch ohne ein vorausgegangenes event aufrufen ?

Ich verstehe nicht ganz, was du meinst. Es ist ja nicht so, dass du auf irgendeinen Button klicken muesstest oder sowas, der Wechsel startet von ganz alleine, also window.onload, wenn das Fenster geladen ist.

Gruß,

Dieter

[mathias]

Es gibt weder in der Dreamweaver Zielbrowserüberprüfung noch in der dDokument überprüfung ne Fehlermeldung.

Auch wenn ich mit Internetexplorer Vorschau/Debug mache kommt keine Fehlermeldung. Der meckert meistens ja wenn in dem scriptcode was nicht stimmt.

[Dieter Raber]

Hallo mathias,

Kannst du deinen Code bitte mal veroeffentlichen, damit man sich das Problem ansehen kann?

Gruß,

Dieter

[mathias]

Ok ich habs eben hinbekommen :).

Allerdings wird mein Text nicht mehr zentriert und auch nicht mehr in "bold" angezeigt. Aber er wechselt die Schriftzüge jetzt.

Das muß ich ja in der CSS Datei ändern :)

[Dieter Raber]

Hallo mathias,

Das muß ich ja in der CSS Datei ändern :)

Genau da gehoert's hin

Gruß,

Dieter

[mathias]

Hallo mathias,

Das muß ich ja in der CSS Datei ändern :)
Genau da gehoert's hin

Gruß,

Dieter

hm , jetzt hab ich des Problem das er zwar den ersten Block mit den animierten .gif's mittig anzeigt, aber den zweiten ohne die .gif's nicht.

Habe schon im CSS sheet mit vertical-align rumgespielt , aber es funzt nicht  so , grrr.

[Dieter Raber]

Hallo mathias,

Habe schon im CSS sheet mit vertical-align rumgespielt , aber es funzt nicht  so , grrr.

vertical-align funktioniert in diesem Zusammenhang nicht. Entweder du gibst den gifs etwas padding oben und unten oder du packst deine Banner in Tabellen. Tabellen sind aber allerhoechstens eine Notloesung, denn der Inhalt ist ja nicht tabellerischer Natur.

Gruß,

Dieter

[Felix Riesterer]

Lieber Mathias,

Dieter hat Dir ja schon seine Vorschläge gemacht. Ich möchte seine Vorschläge noch stark vereinfachen.

ich habe auf meiner page einen fixen bereich namens .top_container.

Warum "nur" in einer Klasse und nicht in einer ID? Hast Du mehrere solcher Container?

dieser bereich wird mit einem CSS sheet formatiert.

Löblich, aber warum sehe ich da HTML-Reste in Form von align-Attributen und Ähnlichem? Wenn schon CSS, dann aber konsequent!

<p id="text1" class="Stil6" align="center">
<img src="feuerwerk.gif" align="absmiddle"/>75 Jahre FC Laubach
<img src="feuerwerk.gif" align="absmiddle"/></p>

Das könnte sinnvollerweise so aussehen:

<p id="text1"><img src="feuerwerk.gif />75 Jahre FC Laubach<img src="feuerwerk.gif /></p>

und dann nach 10 sek. diese hier :

<p id="text2" class="Stil6" align="center">Jubiläums Turnier vom ....</p>

Auch hier vereinfachen wir:

<p id="text2">Jubiläumsturnier vom ...</p>

So. Nun haben wir also zwei Textabsätze mit den IDs "text1" und "text2". Diese sitzen in einem <div> mit (hoffentlich) der ID "top_container". Das sieht dann wahrscheinlich etwa so aus:

<div id="top_container">  
    <p id="text1"><img src="feuerwerk.gif />75 Jahre FC Laubach<img src="feuerwerk.gif /></p>  
    <p id="text2">Jubiläumsturnier vom ...</p>  
</div>

Das sollte uns für's erste reichen.

CSS:

#text1,  
#text2 {  
    display: none; /* damit es beim Laden nicht sichtbar ist */  
    text-align: center; /* dann braucht es dieses "align"-Attribut nicht mehr */  
}  
  
#text1 img {  
    vertical-align: middle; /* für die Bilder */  
}

wie kann ich das lösen das die formate der beiden textzeilen erhalten bleiben ?

Indem Du ausschließlich mit der Eigenschaft "display" herumspielst! Per CSS sind beide Texte nicht zu sehen. Es wird bei display:none auch kein Platz reserviert. Wenn Du das möchtest, dann sollte man anstatt "display" lieber "visibility" verwenden.

Mittel Javascript kannst Du dann diese Eigenschaft verändern (wirkt wie ein inline-Style-Attribut):

function an_aus(id) {  
    var element = document.getElementById(id);  
    var altesDisplay = element.style.display;  
  
    // sollte altesDisplay einen Wert haben, dann wurde dieser per Javascript gesetzt.  
    if (altesDisplay != "")  
        element.style.display = ""; // Urzustand (unsichtbar) wieder herstellen  
    else  
        element.style.display = "block"; // sichtbar schalten  
}

Diese Funktion kannst Du z.B. aus einer setTimeout-Funktion aus aufrufen lassen, oder auf Anklicken eines Links, oder oder oder.

Beispiel für das zeitverzögerte Ein- und Ausblenden:

window.setTimeout(  
    function () {  
        // Dieses wird nach 2100 Millisekunden ausgeführt  
        an_aus("text1"); // Text1 sichtbar  
        window.setTimeout(  
            // Dieses wird nach dem ersten Einblenden mit 3000 Millisekunden Verzögerung ausgeführt  
            function () {  
                an_aus("text1"); // Text1 wieder unsichtbar  
                an_aus("text2"); // Text2 sichtbar  
                window.setTimeout(  
                    // Dieses wird nach dem "Umblenden" mit 3500 Millisekunden Verzögerung ausgeführt  
                    function () {  
                        an_aus("text2"); // Text2 wieder unsichtbar  
                    },  
                    3500 // Verzögerung dritter Timeout  
                );  
            },  
            3000 // Verzögerung zweiter Timeout  
        );  
    },  
    2100 // Verzögerung erster Timeout  
);

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[mathias ott]

ich habe auf meiner page einen fixen bereich namens .top_container.

Warum "nur" in einer Klasse und nicht in einer ID? Hast Du mehrere solcher Container?

ja ich habe 3 solcher container

jeweils einen für 3 bereiche auf meiner page

die funktion unten versteh ich nich so ganz , aber das mit den texten und mit dem display attribut hab ich kapiert.

wo ruf ich die funktion auf ? ich will das ein und ausblenden aber nicht mit einem event starten sondern das soll einfach andauernd ablaufen solange man auf dieser seite ist und nicht nur 3 mal oder so

ist die übergabe »»function an_aus(top_container)
gemeint oder muß da wirklich id rein ?

function an_aus(id) {

var element = document.getElementById(id);
    var altesDisplay = element.style.display;
    if (altesDisplay != "")
    else
        element.style.display = "block"; // sichtbar schalten
}

  

> Diese Funktion kannst Du z.B. aus einer setTimeout-Funktion aus aufrufen lassen, oder auf Anklicken eines Links, oder oder oder.  
  
ich kann sie also auch mit setIntervall aufrufen oder ?  
  
was ich nich kapiere ist wo ich den aufruf einfügen muß ? im HTML bereich oder im script bereich ?  
  
  

> Beispiel für das zeitverzögerte Ein- und Ausblenden:  
>   
> ~~~javascript

window.setTimeout(  

>     function () {  
>         an_aus("text1"); // Text1 sichtbar  
>         window.setTimeout(  
>             function () {  
>                 an_aus("text1"); // Text1 wieder unsichtbar  
>                 an_aus("text2"); // Text2 sichtbar  
>                 window.setTimeout(  
>                     function () {  
>                         an_aus("text2"); // Text2 wieder unsichtbar  
>                     },  
>                     3500 // Verzögerung dritter Timeout  
>                 );  
>             },  
>             3000 // Verzögerung zweiter Timeout  
>         );  
>     },  
>     2100 // Verzögerung erster Timeout  
> );

den rest hab ich kapiert :)