Rabiator: Newsbox mit automatischer änderung!!

SELF-Forum

Newsbox mit automatischer änderung!!

Rabiator
– Informationen zu den Bewertungsregeln

Hallo alle zusammen,

und zwar dreht es sich hier um folgendes.
Ich wollte gern auf meiner Website eine Newsbox erstellen wo sich die News automatisch nach 2 -3 Minuten ändern. Im hintergrund liegen als Beispiel 3 News.
Dann stelle ich mir das so vor das News1 3 min da ist dann News2 3 min .... ist glaubig klar was ich möchte.

Ich wollte das ganze per javascript machen und in meiner html Seite dann einbinden.

Leider habe ich kein Schimmer wie anfangen soll bzw. wie ich das umsetzten kann. Google hilft nicht. Nur vorgefertigte Newsboxen. habe auch versucht diese umzuschreiben aber keine Chance.

Hoffe mir kann wer helfen.

P.S.
Will kein fertiges Script (also nehm schon eins), will damit sagen mir soll keiner eine musterlösung zeigen sondern mit helfen wie ich es hinbekomme.
Danke

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Newsbox mit automatischer änderung!!

    Rabiator
    – Informationen zu den Bewertungsregeln

    Habe was zusammengetrickt (halb gefunden halb gemacht ;), leider funktioneirt es nicht sihet wer den fehler??

    <html>
    <body onload="showNews(0)">
    <script language="JavaScript">
    <!-- var MessageArray = new Array();
    var timer = 5000; // 1000 millisek. = 1 Sek

    MessageArray[0]="Das ist Text 1.";
    MessageArray[1]="Text 2 folgt.";
    MessageArray[2]="Text 3 steht hier.";
    MessageArray[3]="und am Ende noch Text 4.";

    function showNews(offset)
     {
             if
             (offset < MessageArray.length)

    {

    document.getElementById("NewsField").innerHTML = MessageArray[offset]
             offset++
             setTimeout("showNews("+offset+")", timer)
             }
             else
             {

    offset = 0;
             setTimeout("showNews("+offset+")", 0
             )
             }
             }

    -->
             </script>

    <span id="NewsField">News laden...</span>
    </form>
    </body>
    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Newsbox mit automatischer änderung!!

      Patrick Andrieu Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo Rabiator!

      Habe was zusammengetrickt (halb gefunden halb gemacht ;), leider funktioneirt es nicht sihet wer den fehler??

      _den_ Fehler? ;)

      Zu Beginn des Dokuments fehlt eine Doctype-Angabe.

      <html>

      Hier fehlt der komplette head-Bereich. Da gehört das Skript auch hin (oder noch besser, in eine externe Datei ausgelagert).

      <script language="JavaScript">

      Das Attribut »language« hat einen langen, weißen Bart und ist schon lange in Rente. Dafür fehlt das »type«-Attribut:

      <script type="text/javascript">

      <!-- var MessageArray = new Array();

      ^ Hier gehört ein Zeilenumbruch hin. Die HTML-Kommentare für uralte Browser die <script> nicht interpretieren werden auch lange nicht mehr benötigt.

      var timer = 5000; // 1000 millisek. = 1 Sek

      MessageArray[0]="Das ist Text 1.";
      MessageArray[1]="Text 2 folgt.";
      MessageArray[2]="Text 3 steht hier.";
      MessageArray[3]="und am Ende noch Text 4.";

      function showNews(offset)
      {
               if
               (offset < MessageArray.length)

      {

      document.getElementById("NewsField").innerHTML = MessageArray[offset]
               offset++
               setTimeout("showNews("+offset+")", timer)
               }
               else
               {

      offset = 0;
               setTimeout("showNews("+offset+")", 0
               )

      ^ Diese Klammer gehört am Ende der Zeile zuvor,
      und überhaupt, Du hast sehr unübersichtlich geschrieben. Zur Übersichtlichkeit, siehe Ende des Posts.

      <body onload="showNews(0)">
      </form>

      Warum wird hier ein <form>-Tag geschlossen, das nirgends geöffnet wurde?

      Das Skript tut seine Arbeit, wenn man es gut mit ihm meint. Aber wenn es sieht, wie schlampig es umgeschrieben wurde, dann verweigert es den Dienst. Würde ich auch.

      Übersichtlicher ist es so:

      function tuwas(parameter_oder_keine) {  // in einer Zeile
        if (bedingung) {                 // Einrückung - in einer Zeile
          anweisung;
          anweisung;
          anweisung;
        }                                 // schließende Klammer mit selber Einrückung
      }                                   // schließende Klammer des äußeren Blocks (hier die function)

      Viele Grüße aus Frankfurt/Main,
      Patrick

      --

      _ - jenseits vom delirium - _
      [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
      Nichts ist unmöglich? Doch!
      Heute schon gegökt?
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Newsbox mit automatischer änderung!!

        Rabiator
        – Informationen zu den Bewertungsregeln

        Hallo Patrick,
        danke für deine Antwort.

        habe die Klammer auch gesehen und das form rausgeschmissen.
        Danke

        Da du dich anscheinend mit der materie auskennst eine frage kann man hier

        MessageArray[0]="Das ist Text 1.";

        das Array mit text aus einer txt datei oder js datei füllen??
        damit wäre dei News neu zu generieren viel einfacher.
        Danke

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Newsbox mit automatischer änderung!!

          Patrick Andrieu Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo Rabiator!

          danke für deine Antwort.

          Den Dank nehme ich an, aber wenn Du willst, dass man Dir weiterhilft, solltest Du die Tipps und Korrekturen beherzigen, die man Dir nahelegt bzw. aufzeigt. Ich füge hier ein den Code, den Du in Deinem zweiten (jetzt gesperrten) Thread gepostet hast:

          <script language="JavaScript">
          <!--
          var MessageArray = new Array();
          var timer = 120000; // 1000 millisek. = 1 Sek

          MessageArray[0]="Das ist Text 1.";
          MessageArray[1]="Das ist Text 2.";

          function showNews(offset)
           {
                   if
                   (offset < MessageArray.length)

          {

          document.getElementById("NewsField").innerHTML = MessageArray[offset]
                   offset++
                   setTimeout("showNews("+offset+")", timer)
                   }
                   else
                   {

          offset = 0;
                   setTimeout("showNews("+offset+")", 0)
                   }
                   }

          -->
                   </script>

          Da steht immer noch »<script language="JavaScript">« und der Code ist immer noch unübersichtlich. So könnte es aussehen, um sicher auch für Dich besser lesbar zu sein:

            
<script type="text/javascript">  


            
var MessageArray = new Array();  
var timer = 120000; // 1000 millisek. = 1 Sek  
var offset;  
  
MessageArray[0]="Das ist Text 1.";  
MessageArray[1]="Das ist Text 2.";  
  
function showNews(offset) {  
         if (offset < MessageArray.length) {  
           document.getElementById("NewsField").innerHTML = MessageArray[offset]  
           offset++  
           setTimeout("showNews("+offset+")", timer)  
         }  
         else {  
           offset = 0;  
           setTimeout("showNews(offset)", 0)  
         }  
}  


            
</script>

          Sollte Dir die -eigentlich bevorzugte- Klammeranordnung nicht gefallen, dann wenigstens so:

            
function showNews(offset)  
{  
         if (offset < MessageArray.length)  
         {  
           document.getElementById("NewsField").innerHTML = MessageArray[offset]  
           offset++  
           setTimeout("showNews("+offset+")", timer)  
         }  
         else  
         {  
           offset = 0;  
           setTimeout("showNews(offset)", 0)  
         }  
}

          denn sonst, sollte Dein oder ein anderes Stück Code wachsen, verlierst Du schnell den Überblick zu welchem Block welche Klammer gehört, und machst es für andere unmöglich, in Deinem Code »einzusteigen«. Also bitte im eigenen Interesse etwas Disziplin in dieser Hinsicht.

          habe die Klammer auch gesehen und das form rausgeschmissen.

          Zumindest etwas ;)

          Da du dich anscheinend mit der materie auskennst eine frage kann man hier

          Viele andere hier sind viiiiel besser ;)

          das Array mit text aus einer txt datei oder js datei füllen??
          damit wäre dei News neu zu generieren viel einfacher.

          JavaScript kann nicht aus Dateien lesen, reines JavaScript läuft clientseitig, das heißt, nur auf dem Browser. Und außer Cookies kann JavaScript weder auf die Festplatte schreiben noch lesen.

          Natürlich kannst Du den gesamten JavaScript-Code inklusive der News-Texte auslagern und, falls Du die Anzeige dieser News in mehreren Dateien brauchst, in jeder davon z.B. mit:

            
<script type="text/javascript" src="news.js"></script>

          einbinden. Die News-Texte kannst Du dabei in der selben Form belassen, wie oben. Oder ist das zu unübersichtlich?

          Viele Grüße aus Frankfurt/Main,
          Patrick

          --

          _ - jenseits vom delirium - _
          [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
          Nichts ist unmöglich? Doch!
          Heute schon gegökt?
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Newsbox mit automatischer änderung!!

            Christian
            – Informationen zu den Bewertungsregeln

            Hallo Patrick,

            habe mir überlegt die Js Datei voll auszulagern allerdings funzt es nur halb!

            2 Probleme

            1. Ich habe folgenden Code nun in eine js datei geschriben:

            var MessageArray = new Array();
            var timer = 1000; // 1000 millisek. = 1 Sek
            var offset;

            MessageArray[0]="News 1";
            MessageArray[1]="Das ist Text 2.";

            function showNews(offset) {
                     if (offset < MessageArray.length) {
                       document.getElementById("NewsField").innerHTML = MessageArray[offset]
                       offset++
                       setTimeout("showNews("+offset+")", timer)
                     }
                     else {
                       offset = 0;
                       setTimeout("showNews(offset)", 0)
                     }
            }

            (Hoffe übersichtlich);)

            die ausgabe in der entsprechenden html datei funktionuiert.
            Aber es gibt nur ein durchlauf, muss die Schleife umgestrickt werden dafür das es eine endlosschleife wird??

            Und 2 kann man in der js datei eine umbruch machen sprich:

            MessageArray[0]="Die neusten News von heute für euch sind .....";

            Wie man sieht ist hier ein zeilenumbruch und er speichert das nicht mehr im Array. Gibt es ein befehl dafür??

            Danke

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Newsbox mit automatischer änderung!!

              Christian
              – Informationen zu den Bewertungsregeln

              MessageArray[0]="Die neusten News von
              heute für euch sind .....";

              So mein ich das

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Newsbox mit automatischer änderung!!

                anjoschu
                – Informationen zu den Bewertungsregeln

                MessageArray[0]="Die neusten News von
                heute für euch sind .....";
                So mein ich das

                  
MessageArray[0] = "Wenn Text Zeilenumbrüche hat, \  
muss man unmittelbar vor jeden Umbruch einen Backslash setzen."

                Das gilt auch für die elegantere Variante (ohne die überflüssigen Indizes):

                  
var MessageArray = [  
    "Erster Text",  
    "Wenn Text Zeilenumbrüche hat, \  
muss man vor jeden Umbruch einen Backslash setzen."  
];

                Und -- rein prophylaktisch -- rate ich davon ab, die Zeichenketten aufzuteilen, nur um sie dann wieder zu Konkatenieren:

                  
var text = "Erste Zeile" +  
           "Zweite Zeile";
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

            2. Newsbox mit automatischer änderung!!

              Don P
              – Informationen zu den Bewertungsregeln

              Hallo,

              1. Ich habe folgenden Code nun in eine js datei geschriben:
                [...]
                (Hoffe übersichtlich);)

              Übersichtlich ja, aber es fehlen viele Semikolons am Ende der javascript-Befehle. Man sollte jeden Befehl mit Semikolon abschließen, denn wenn man sich darauf verlässt, dass der Interpreter die Dinger einsetzt, kann es böse Überraschungen geben.

              Also lieber so:

                
var MessageArray = []; // [] entspricht new Array()  
var timer = 1000;      // 1000 millisek. = 1 Sek  
var offset;  
  
MessageArray[0] = "News 1";  
MessageArray[1] = "Das ist Text 2.";  
  
function showNews(offset) {  
  
         if (offset < MessageArray.length) {  
  
           document.getElementById("NewsField").innerHTML = MessageArray[offset];  
           offset++;  
           setTimeout("showNews("+offset+")", timer);  
  
         } else {  
  
           offset = 0;  
           setTimeout("showNews(offset)", 0);  
  
         }  
}

              Aber es gibt nur ein durchlauf, muss die Schleife umgestrickt werden dafür das es eine endlosschleife wird??

              Welche Schleife meinst du? Ich sehe keine Schleife in deinem Code. Wenn du alle News-Texte nacheinander anzeigen willst, brauchst du aber eine Schleife, das stimmt.

              Und 2 kann man in der js datei eine umbruch machen sprich:

              MessageArray[0]="Die neusten News von heute für euch sind .....";

              Ja, das sollte gehen. Mit InnerHTML kenne ich mich nicht aus, aber vermutlich musst du nur einen HTML-Umbruch <br> einsetzen:

                
MessageArray[0]="Die neusten News von heute für euch sind <br> Text nach dem Umbruch...";

              Oder, wenn das nicht klappt, versuch' es mal mit \n:

                
MessageArray[0]="Die neusten News von heute für euch sind \n Text nach dem Umbruch...";

              Gruß, Don P

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Newsbox mit automatischer änderung!!

                Patrick Andrieu Homepage des Autors
                – Informationen zu den Bewertungsregeln

                Hallo Don!

                Wenn du alle News-Texte nacheinander anzeigen willst, brauchst du aber eine Schleife, das stimmt.

                Ach, er kann bei seinem if/else-Konstrukt bleiben und erhält so eine dieser sagenumwobenen if-Schleifen ;)
                Code:

                  
var MessageArray = new Array();  
var timer = 3000; // 1000 millisek. = 1 Sek  
var offset;  
  
MessageArray[0]="Ich bin Text<br>mit der Nummer 1";  
MessageArray[1]="Text 2 folgt.";  
MessageArray[2]="Text 3 steht hier.";  
MessageArray[3]="und am Ende noch Text 4.";  
  
  
  
function showNews() {  
         if (offset < MessageArray.length) {  
           document.getElementById("NewsField").innerHTML = MessageArray[offset];  
           offset++;  
           setTimeout("showNews()", timer);  
         }  
         else {  
           offset = 0;  
           showNews();  
         }  
}  
  
window.onload = showNews;

                Im HTML:

                  
<body>  
<span id="NewsField">News laden...</span>

                Elegant dürfte sicher etwas anderes sein... ;)

                Viele Grüße aus Frankfurt/Main,
                Patrick

                --

                _ - jenseits vom delirium - _
                [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
                Nichts ist unmöglich? Doch!
                Heute schon gegökt?
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Newsbox mit automatischer änderung!!

                  anjoschu
                  – Informationen zu den Bewertungsregeln

                  Hallo,

                  um an meinen Beitrag zum mittlerweile gesperrten Thread anzuknüpfen: Das MessageArray kannst Du wie folgt schreiben, damit es weniger nach neunziger Jahre aussieht und auch weniger Fehleranfällig ist:

                    
var MessageArray = [  
    "Ich bin Text<br>mit der Nummer 1",  
    "Text 2 folgt.",  
    "Text 3 steht hier.",  
    "und am Ende noch Text 4." // ohne Komma hinter mir  
];

                  Und die Variable offset musst Du zu Anfang unbedingt auf 0 setzen. Falls es im Moment in einigen Browsern trotzdem funktioniert, dann nur, weil die heute ihren guten Tag haben.

                  Wenn Du beim Ändern der Nachrichten nicht gerne die Datei gleiche editierst, in der Du Deine Programmlogik hast (mir ginge es so), kannst Du obige MessageArray-Deklaration in eine eigene JS-Datei auslagern. Diese Datei kannst Du dann über ein eigenes Script-Element einbinden:

                    
<script type="text/javascript" src="newstexte.js"></script>  
<script type="text/javascript" src="newslogik.js"></script>

                  Schöne Grüße

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln