4. javascrpit ticker mit mysql?

javascrpit ticker mit mysql?

  • D

    Hallo liebe Forengemeinde,

    Ich brauche mal wieder eure Hilfe!

    Also meine Kenntnisse in Javascript sind gleich NULL.

    Ich möchte gerne einen Javascript Text Ticker realiesieren der die Texte aus eine MYSQL Datenbank heraus liest und dann auf der Webseite wiedergibt.

    Ich hoffe das ihr mir da mal wieder weiterhelfen könnt.

    Danke!

    0
  • Z

    an sich kein Problem, zumindest, wenn man Javascript kann :p

    Ohne Javascriptkenntnisse wirds schwieriger, vor allem, da du mit Javascript allein nicht weit kommst

    Bei Seitenaufruf kannst du dem Ticker ja bereits die neuesten Einträge mitgeben (über eine serverseitig eingesetzte Sprache, im Regelfall PHP), die er dann darstellt (beschränk dich anfangs auf das reine Anzeigen. Laufschrift und Ausblenden und derlei Spielereien kannst du dann danach einbauen)
    Dann startest du mit JS einen Timer. Wenn er abläuft schickst du einen HTTP-Request an den Server (Stichwort AJAX), schickst den Timestamp deines letzten Aufrufs mit und das aufgerufene Skript holt dann alle Einträge, die neuer als der mitgeschickte Timestamp sind. Dann musst du die Einträge nur noch einbauen und den Timer neu starten.

    Jetzt hast du ein paar Stichpunkte. Was du erst versuchen solltest:
    - Mit Javascript Text in eine vorhandene Struktur einbauen (DOM-Skripting)
    - Mit Javascript Funktionen zeitgesteuert aufrufen
    - Ein PHP-Skript erstellen, dass Daten aus der Datenbank liest und darstellt
    - Mit Javascript ein PHP-Skript aufrufen und die Rückgabe auswerten (Ajax, XMLHttpRequest)

    Wenn du alles kannst, musst du es nur noch verbinden.

    0
  • D

    Hallo,

    Das erscheint mir alles sehr kompliziert.

    Gibt es möglichkeiten das auch einfacher und auch gleichzeitig sinnvoll zu realisieren?

    zum beispiel mit <marquee></marquee>?

    ich hatte schon angefangen in Php sowas zurealisieren allerdings hat das nicht geklappt der Code:

    <?php
require ('config.php');
error_reporting(E_ALL); 

$abfrage = "SELECT ID,Link,tickertext AS marquee FROM ticker ORDER BY ID DESC ";
$end = mysql_query($abfrage);

while( $row = mysql_fetch_assoc( $end ))
{

      echo "<p><marquee><a href:\"http://www.".$row['Link']."\">".$row['marquee']."</a></marquee></p>";
}     
?>

    oder würde das sogar klappen nur das da Fehler drinne sind??

    0
  • ?

    Hallo,

    der Fehler an der Stelle wird wohl der Doppelpunkt hiner href sein. Da sollte ein = hin. Der Rest ist in Ordnung, allerdings sehr statisch. Dann würde sich der Newsticker nur beim Neuladen der Seite aktualisieren.

    Edit: Quatsch, gar nich in Ordnung. Bei dem gezeigten Code würde jeder "Text" in einem seperaten marquee auftauchen. Also erst sammeln, dann anzeigen.

    while ($row = mysql_fetch_array($end))
{
   $marquee .= " >> " . $row['marquee'];
}

print "<p><marquee...." . $marquee . "</marquee></p>";

    VlG

    0
  • Z

    <marquee> ist nicht bestandteil des HTML-Standards und sollte dementsprechend auch nicht genutzt werden

    Wenn du auf das nachladen über Javascript verzichten kannst, also der Inhalt des Tickers bis zum nächsten Reload gleich bleiben kann, dann kannst du auf den AJAX-Part verzichten, was das ganze vereinfacht. Dann brauchst du JS nur, um das ganze optisch ein wenig aufzuwerten (z.B. Laufschrift).

    Da bietet dir aber eine Google-Suche nach "Javascript Ticker" wohl genug Ergebnisse

    0
  • D

    Hallo,

    so schnell passieren Fehler.

    ich habe bei Google gegooglet allerdings nichts gefunden das meinen wünschen entspricht und oft nichtmal anähernd

    0
  • D

    Hallo,

    an RandomAccess85

    Vielen dank
    der code hilft schon ungemein weiter!

    genau so wollte ich es haben danke!

    0
  • ?

    Hallo,

    dann musst du ja nur noch weg vom marquee. zwutz sagte ja bereits dass es nicht mehr zum HTML-Standard gehört und deswegen durch jede w3c-Prüfung fliegt (gehörte es jemals dazu?).

    Kleines Beispiel für eine Javascript-Lösung:

    <?php
//Abfrage ...

while ($row = mysql_fetch_array($end)) 
{ 
   $Tickertext.= " >> " . $row['marquee']; 
} 

?>

<script language="javascript"> 

var news=<?=$Tickertext?> 
var text; 
var timeout=150 ;
newsticker();

function newsticker() 
{ 
  text=news;
  document.getElementById("ticker").innerText = text ;
  news=news.substring (1, news.length) + news.substring(0,1) ;
  setTimeout("newsticker()", timeout) ;
} 

</script>
<div id="ticker"></div>

    VlG

    0
  • ?

    RandomAccess85 schrieb:

    (gehörte es jemals dazu?)

    Meines Wissens nicht:
    http://en.wikipedia.org/wiki/Marquee_element

    Schon lustig, dass einzelne HTML-Elemente in der englischsprachigen Wikipedia bereits eigene Artikel für sich haben 🤡

    0
  • D

    RandomAccess85 schrieb:

    <?php
//Abfrage ...

while ($row = mysql_fetch_array($end)) 
{ 
   $Tickertext.= " >> " . $row['marquee']; 
} 

?>

<script language="javascript"> 

var news=<?=$Tickertext?> 
var text; 
var timeout=150 ;
newsticker();

function newsticker() 
{ 
  text=news;
  document.getElementById("ticker").innerText = text ;
  news=news.substring (1, news.length) + news.substring(0,1) ;
  setTimeout("newsticker()", timeout) ;
} 

</script>
<div id="ticker"></div>

    VlG

    Wie kann ich da denn hintergrund farbe, schnelligkeit und grösse ändern?

    0
  • ?

    Hallo,

    mit CSS. Gib dem DIV-Container eine Klasse und spezifiziere dann das Layout in entweder in einer CSS-Datei oder innerhalb der Style-Tags:

    <style>
.meinDiv {
   backgroundColor = #006699;
   font-size:16px;
   /* usw. */
}
</style>

<!-- PHP und Javascript-Zeug von oben übernommen -->

<div id="ticker" class="meinDiv"></div>

    VlG

    0
  • D

    Hallo,

    kann mir noch jemand hierbei helfen mittlerweile blick ich hier gar nicht mehr durch!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HEADER</title> 
</head>
<style>
.meinDiv {
   backgroundColor = #FFFFFF;
   font-size:16px;
   /* usw. */
}
</style>
<body bgcolor="#000000">
<center>
<font color="#FFFFFF">
<h1>header</h1>
<?php
require ('config.php');
error_reporting(E_ALL); 
$Tickertext = "";
$abfrage = "SELECT ID,Link,tickertext FROM ticker ORDER BY ID DESC ";
$end = mysql_query($abfrage);

while ($row = mysql_fetch_array($end))
{
   $Tickertext.= " >> " . $row['tickertext'];
}

?>

<script language="javascript">

var news=<?=$Tickertext?>
var text;
var timeout=150 ;
newsticker();

function newsticker()
{
  text=news;
  document.getElementById("ticker").innerText = text ;
  news=news.substring (1, news.length) + news.substring(0,1) ;
  setTimeout("newsticker()", timeout) ;
}

</script>
<div id="ticker" class="meinDiv"></div>
</center>
</body>
</html>

    er gibt mir kein TICKER aus sondern gar nichts

    EDIT:

    So klappt es ebenfalls nicht:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HEADER</title>
<?php
require ('config.php');
error_reporting(E_ALL); 
$Tickertext = "";
$abfrage = "SELECT ID,Link,tickertext FROM ticker ORDER BY ID DESC ";
$end = mysql_query($abfrage);

while ($row = mysql_fetch_array($end))
{
   $Tickertext.= " >> " . $row['tickertext'];
}

?> 
<script language="javascript">

var news=<?=$Tickertext?>
var text;
var timeout=150 ;
newsticker();

function newsticker()
{
  text=news;
  document.getElementById("ticker").innerText = text ;
  news=news.substring (1, news.length) + news.substring(0,1) ;
  setTimeout("newsticker()", timeout) ;
}

</script>
</head>
<body bgcolor="#FFFFFF">
<center>
<font color="#000000">
<h1>header</h1>
<div id="ticker"> <?php echo 'FEHLER:'. mysql_error(); ?></div>
</center>
</body>
</html>
    0
  • D

    So nach langem suchen und probieren gibt es so keine Fehler mehr die aufgeführt werden allerdings wird der ticker nicht angezeigt hier der vollständige code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HEADER</title>
</head>
<style TYPE="text/css">
.meinDiv {
   background-Color:#FFFFFF;
   font-size:16px;
   color:#000000;
   /* usw. */
}
</style>
<body bgcolor="#000000">
<body> 
<center>
<font color="#FFFFFF">
<h1>header</h1>
</font>
<body onload="newsticker()">
<div id="ticker" class="meinDiv"> <?php echo "FEHLER:".mysql_error(); ?></div>
<?php
require ('config.php');
error_reporting(E_ALL); 
$Tickertext = "";
$abfrage = "SELECT ID,Link,tickertext FROM ticker ORDER BY ID DESC ";
$end = mysql_query($abfrage);

while ($row = mysql_fetch_array($end))
{
   $Tickertext.= " | " . $row['tickertext'];
}

?>
<script language="javascript">

var news="<?=$Tickertext?>";
var text;
var timeout=150 ;
newsticker();

function newsticker()
{
  text=news;
  document.getElementById("ticker").innerText = text ;
  news=news.substring (1, news.length) + news.substring(0,1) ;
  setTimeout("newsticker()", timeout) ;
}

</script>
</center>
</body>
</html>
    0
  • ?

    Hallo,

    der FX kennt die Eigentschaft innerText nicht. Dafür kannst du stattdessen textContent verwenden.

    if(document.all){
    document.getElementById("ticker").innerText = text; 
} else{
    document.getElementById("ticker").textContent = text; 
}

    <body bgcolor="#000000">
<body> <!-- ?? einmal body reicht -->

    Desweiteren würd ich für meinDiv noch eine größe vergeben.

    VlG

    0
Anmelden zum Antworten