HP-4-Fun :: HP Tutorial Box: ET-Chat: Einfacher Nachrichtenticker

HP Points

Pos.	Name	Punkte
	Harlekin	20043
	Tommy	5050
	Partybremen	4230
4.	Parzival	4039
5.	Fizzy Lemon	2394

Zeige mehr

V-Shop

Artikel kaufen

Version Info

Aud dieser Seite läuft:
HP-4-Fun 2.0
und der
ET-Chat-v3.0.7-r3-PHP-8-b
auf
PHP 8.4.12

Du hast in deinem Browser kein Javascript aktiviert.
Um diese Seite korrekt anzuzeigen ist Javascript jedoch zwingend nötig.
Bitte aktiviere Javascript in den Einstellungen deines Browser beziehungsweise besorge dir einen Browser, der diesen unterstützt.
Mozilla Firefox | Safari | Opera | Google Chrome | Internet Explorer höher Version 6

Tutorial: Einfacher Nachrichtenticker

Tutorial Übersicht >>

ET-Chat

Einfacher Nachrichtenticker

Von: Fizzy Lemon am: 03.06.2023 - 06:56 1813 x gelesen

Werbung:

HINWEIS: Den Link zu tagesschau.de und die Verwendung des Feeds geschieht zwar nach meinem Wissen in regulärer Weise, aber ist hier dennoch nur beispielhaft. Das Modul lässt sich an jeden gängigen Newsfeed anpassen.

Wer möchte, kann ein einfaches Modul in die chat.tpl.html einbinden, in dem die Nachrichten von tagesschau.de angezeigt werden. Wie viele Meldungen und wie hoch der Aktualisierungsintervall in Minuten sein soll, kann eingestellt werden. Folgendes ist zu tun:

Erstellt zunächst ein Verzeichnis "news", in diesem legt ihr die Datei news.php an mit folgendem Inhalt:

Code



<!DOCTYPE html>

<html lang="de">



<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>NEWS</title>

    <link rel="stylesheet" href="news.css">

</head>

<body>

   <p id="Schlag">Die Nachrichten von <a href="https://www.tagesschau.de" target="_blank">tagesschau.de:</a></p>

<div id="news">

<div id="info">NEWS: </div>

<div id="tickerwrapper"><nobr><span id="ticker" style="position:relative;">Ticker +++ Ticker +++ Ticker +++ </span></nobr>



<script type="text/javascript">

 

//Interval in ms

tInterval   =25;



tObj=document.getElementById('ticker');

tUpdate=document.getElementById('Schlag');



var Textinhalt;

var Textinhalt2="";

var zaehler = 0;    

var minuten = 15; //Anzahl der Minuten in denen der Feed neu geladen werden soll



function updatenews() {

<?php

if( !$xml = simplexml_load_file('https://www.tagesschau.de/infoservices/alle-meldungen-100~rss2.xml') ) {

    die('Fehler beim Einlesen der XML Datei!');

}

$out = array();

$i = 5; //Anzahl der einzulesenden Meldungen

if( !isset($xml->channel[0]->item) ) {

   die('Keine Informationen im Feed vorhanden!');

}

foreach($xml->channel[0]->item as $item) {

   if( $i-- == 0 ) {

      break;

   }



   $out[] = array(

      'title'        => (string) $item->title,

      'description'  => (string) $item->description,

      'ulink'        => (string) $item->link,

   );

}



?>

        Textinhalt=<?php echo json_encode($out); ?>;

        for(var i = 0; i < Textinhalt.length; i++){

          Textinhalt2+=" +++ <a href=\""+Textinhalt[i].ulink+"\" target=\"_blank\">"+Textinhalt[i].title+"</a> <a href=\""+Textinhalt[i].ulink+"\" target=\"_blank\">"+Textinhalt[i].description+"</a>";

         

       

       }

        tObj.innerHTML=Textinhalt2;

        date= new Date();

        tUpdate.innerHTML="Die Nachrichten von <a href=\"https://www.tagesschau.de\" target=\"_blank\">tagesschau.de:</a> (Aktualisiert: "+date.toLocaleString('de-DE')+")";

      }







   updatenews();

   setInterval('updatenews()',minuten*60000);

    tPos=0;

    function ticken(){

      tOffset=tObj.offsetWidth/2;

        if(Math.abs(tPos)>tOffset){

         tPos=0;

          }

         tObj.style.left=tPos+'px';tPos--;

         }

    setInterval('ticken()',tInterval);



</script>

       </div>

</div>

</body>

</html>

Danach noch eine news.css:

Code



* {

font-size: 16px;

font-family: Arial, Helvetica, sans-serif;

padding: 0;

margin: 0;

}



a:link, a:visited {

text-decoration: none;

color: white;

}



a:hover {

text-decoration: underline;

color: blue;

}



.rss-meldung-ueberschrift {

padding: 10px;

background-color: teal;

color: white;

font-weight: bold;

margin: auto;

}



.rss-meldung-inhalt {

padding: 10px;

background-color: black;

color: white;

margin: auto;

}



#ticker{

 color: white;

 font-weight: bold; 

}



#tickerwrapper {

overflow: hidden; 

position: relative; 

width: calc(100%,50px); 

height: auto; 

background-color:#2198a0; 

padding:5px;

}



#info{

font-weight: bold;

margin: auto;

position: relative; 

width: 50px; 

height: auto; 

color: white;

background-color:black; 

padding: 5px;

left:0px;

float: left;

}



#news {

border: 2px solid #222;

}

#Schlag {

font-family: Monospace, Courier;

font-size: 10px;

}

#Schlag a:link { 

font-family: Monospace, Courier;

font-size: 10px;

color: blue; 

text-decoration: underline;

}

Das war es dann schon. In der chat.tpl.html setzt ihr dann mit der folgenden Zeile:

Code

<iframe src="news/news.php" width="100%" height="50" title="Nachrichten" allowtransparency="true" allowfullscreen="false" style="border:none;"></iframe>

das Modul ein.

War dieses Tutorial hilfreich für dich?
Nur Mitglieder können abstimmen!

Für 4 der Mitglieder war es hilfreich.
Für 0 der Mitglieder nicht.