Ticker

S

sk4r

Grünschnabel
Hallo liebe Community,

ich hoffe, dass ihr mir helfen könnt.
Ich habe folgenden Code:

PHP: 
 <?php 
$sql = "SELECT user_id, text, timestamp FROM user_ticker"; 
$tickhol = mysql_query($sql); 
if(mysql_num_rows($tickhol)) { // gucken ob was im Query drinsteckt 
while ($row = mysql_fetch_assoc($tickhol)) { 
$sql = "SELECT user_id, user_name,user_avatar FROM user_db WHERE user_id='$row[user_id]'"; 
$namehol = mysql_query($sql); 
$rowname = mysql_fetch_assoc($namehol); 
$rowbild = trim($rowname[user_avatar]); 
?> 
<tr height="20"><td width="10%"><font class="nav_style"> 
<? echo $rowname['user_name']; ?></font> 
</td><td width="15%"> 
<? 
print "<img src='./avatar/".$rowbild."' width='80' heigth='80' valign='middle'>"; 
?></td><td width="70%"><font class="nav_style"> 
    <? 
echo $row['text']."</font></td><tr><td>&nbsp;</td></tr>";  
} 
} else { 
echo "Keine Einträge in der Datenbank vorhanden"; 
} 
?>
Mein Problem ist das hier -> http://www.finmi.de/system.php

Die Daten werden alle ausgegeben und untereinander angezeigt. 1. ich kann weder die Höhe der Tabelle festlegen, 2. ich würde es gerne von unten nach oben scrollen lassen, wobei jede Tickernachricht für 5 Sekunden stehen bleibt. Ich habe wirklich keine Ahnung wie ich das anstellen soll.

Wenn es geht, sollte es in etwa so aussehen http://flirtlife.de/fl_ticker.php

EDIT: Mittlerweile habe ich mein Quellcode etwas von der Form und von der Ausgabe her geändert. Vielleicht fällt es ja so einfacher.

PHP: 
<?php
$sql = "SELECT user_id, text, timestamp FROM user_ticker ORDER BY timestamp DESC";
$tickhol = mysql_query($sql);
if(mysql_num_rows($tickhol)) { // gucken ob was im Query drinsteckt
while ($row = mysql_fetch_assoc($tickhol)) {
$sql = "SELECT user_id, user_name,user_avatar FROM user_db WHERE user_id='$row[user_id]'";
$namehol = mysql_query($sql);
$rowname = mysql_fetch_assoc($namehol);
$rowbild = trim($rowname[user_avatar]);

print "<tr><td width=\"17%\">".thumb_maker('thumb_',$rowbild,80,80)."</td><td width=\"15%\"><font class=\"nav_style\">".view_profil($rowname['user_id'],$rowname['user_name'],$SID,'all_links')."</font></td><td width=\"70%\"><font class=\"nav_style\">".$row['text']."</font></td></tr>"; 
}
} else {
print "Keine Einträge in der Datenbank vorhanden";
}
?>

Freue mich schon sehr auf eure Antworten.

LG
sk4r
 
Zuletzt bearbeitet:
Hmm ich glaube, dass ich einen Fehler gemacht habe und ins falsche Forum gepostet habe. Ich bitte die Mods bzw Admins diesen Thread in den JavaScript bereich zu verschieben. Ich entschuldige mich für die Unannehmlichkeit.

Vielen Dank an die super Admins und Moderatoren für die schnelle Reaktion. Eben das beste Board das ich kenne.
 
Zuletzt bearbeitet:
Naja ich würde das mit 2 Div Layern machen , und diese beiden wiederrum in einen anderen Layer positionieren.

Also sagen wir mal der grundlayer weite = 300 px höhe = 200px
So die Anzeige Layer passen genau rein Das soll heissen weite 300px höhe 200px klar ;)
Der zweite Layer der nun nicht angezeigt wird befindet sich an der Position von posi:top -200px +spacing zwischen den Anzeige layern.

Also ich sage mal spontan 100 px spacing = top:300px.

Also müsstest nun nur folgendes machen. Wenn ne gewisse Zeit 5 sek vorbei ist , bewegst den aktuellen Anzeige layer einfach nach oben in dem du die höhe immer abziehst, 200 ist er hoch, also -200px-spacing top wert dies in einen Interval von püh 5 milli sek und dann immer 10 px oder so.Halt so das es nicht ruckelt.

Der untere kommte nun zum Vorschein und bleibt dann bei top:0px stehen.

Nun brauchen wir den oberen ja nicht mehr also schieben wir den Layer der eben oben war nun einfach nach unten so das er nicht mehr sichtbar ist , tauschen den Inhalt aus und fertig.
Das ganze Spiel kannst so oft wiederholen wie Du magst ;)

Codebeispiel kann ich später noch einfügen wenn Interesse besteht.
 
Hättest du vielleicht einen Ansatz? Ich verstehe dich leider nicht so wirklich (nicht böse gemeint aber von HTML hab ich sehr wenig Ahnung.)

Hier hab ich noch mal den ganzen Code von meiner Ticker.php

PHP: 
<?php
if ($PAGE_HEADER != 1){exit;}
?>
<table width="555" border="0" align="center" cellpadding="0" cellspacing="0" class="table_style">
  <tr background="images/bg_color_blue_1_a.gif">
    <td width="20" height="15" align="center" valign="middle" background="images/bg_color_blue_1_a.gif"><img src="images/content_header_pfeil_rechts.gif" width="5" height="9"></td>
    <td width="545" align="left" valign="middle" background="images/bg_color_blue_1_a.gif"><strong>FinTick</strong></td>
  </tr>
  <tr align="left" valign="top" height="30">
    <td colspan="2">
      <table width="100%" border="0" cellspacing="0" cellpadding="4" class="table_style_dash">
        <tr>
          <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<?php
$sql = "SELECT user_id, text, timestamp FROM user_ticker ORDER BY timestamp DESC";
$tickhol = mysql_query($sql);
if(mysql_num_rows($tickhol)) { // gucken ob was im Query drinsteckt
while ($row = mysql_fetch_assoc($tickhol)) {
$sql = "SELECT user_id, user_name,user_avatar FROM user_db WHERE user_id='$row[user_id]'";
$namehol = mysql_query($sql);
$rowname = mysql_fetch_assoc($namehol);
$rowbild = trim($rowname[user_avatar]);
print "<tr><td width=\"17%\">".thumb_maker('thumb_',$rowbild,80,80)."</td><td width=\"15%\"><font class=\"nav_style\">".view_profil($rowname['user_id'],$rowname['user_name'],$SID,'all_links')."</font></td><td width=\"70%\"><font class=\"nav_style\">".$row['text']."</font></td></tr>"; 
}
} else {
echo "Keine Einträge in der Datenbank vorhanden";
}
?>
          </table></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
 
Zuletzt bearbeitet:
Ich hab da mal was vorbereitet.

HTML: 
<html>
	<head>
		<script type="text/javascript">

			var layerValues = new Array();
			var layers      = new Array();

			var primaryLayer = 1;
			var secondaryLayer = 2;
					
			function setLayerValues(value) {
				this.layerValues.push(value);
			}
												
			function changelayers() {
				layerbuffer    = primaryLayer;
				primaryLayer   = secondaryLayer
				secondaryLayer = layerbuffer;
			}
						
			function movelayer() {
				
				this.layers[primaryLayer].style.top = parseInt(this.layers[primaryLayer].style.top)-5;		
				this.layers[secondaryLayer].style.top = parseInt(this.layers[secondaryLayer].style.top)-5;		
				
				this.layers[secondaryLayer].style.display = 'block';
				
				if(parseInt(this.layers[primaryLayer].style.top) > -150) {
					setTimeout("movelayer()",36);
				} else {
				   // nun werden die Layer getauscht
				   changelayers();
				   //alter layer wird nach unten geschoben nun bereits der secondary Layer
				   with(this.layers[secondaryLayer].style) {
					  top = 150;
					  display = 'none';
				   }

				}
			}
			
			function SimpleTicker() {
			
				this.layerValues = layerValues;
				this.layers      = layers;
				
				this.setLayerValues = setLayerValues;
				this.movelayer      = movelayer;
				this.loadLayers     = loadLayers;
				this.start          = start;

				this.loadLayers();
				
				function loadLayers() {
					this.layers[0] = document.getElementById('tickerGround');
					this.layers[1] = document.getElementById('layer1');
					this.layers[2] = document.getElementById('layer2');
				}
			}
			
			function start() {
				this.movelayer();
				setTimeout("start()",5000)
			}
			
			function init() {		
				ticker = new SimpleTicker();
				ticker.setTime(2000);
				
				ticker.setLayerValues("peter");
				ticker.setLayerValues("klaus");
				ticker.setLayerValues("manfred");
				ticker.setLayerValues("ingeborg");
				ticker.start();
			}

			window.onload = init;
		</script>
	</head>
	<body>
		<div style="position:relative;height:100px;width:600px;border:1px solid #000000;" id="tickerGround">
			<div style="position:absolute;top:0px;width:600px;height:100px;background-color:#FF00FF;" id="layer1">
				huhu welt
			</div>
			<!-- der ist zu beginn eh nicht sichbar //-->
			<div style="position:absolute;top:150px;width:600px;height:100px;display:none;" id="layer2">
				huhu welt 2
			</div>
		</div>
	</body>
</html>

Also soweit funktioniert es bei mir erstmal man müsste es nun noch ausbauen , mystisch ist mir immer noch das Timeout und das setInterval. Aber nach ein wenig rumtesten hats geklappt endlich.

Also im Prinzip läuft das so ab nun erstmal. 2 Layer werden gesetzt. der Untere Layer ist nun nicht sichtbar. Nach 5 sek etwa geht er immer in die Funktion MoveLayer rein da werden dann beide Layer verschoben. Sollte nun der primary Layer über das Ziel hinausgeschossen sein. Wird er versteckt und wieder unten rangehängt. Gleichzeitig tauschen wir den primaryLayer und den Secondary Layer aus.

Den Inhalt einfügen sollte nun das kleinste Problem sein das müsste man dann machen nachdem die Layer vertauscht worden.
 
Zuletzt bearbeitet:
Wow ich bin dir zu tiefstem Dank verpflichtet. Freut mich, dass endlich mal jemand Kompetenz zeigt. Bin dir wirklich Dankbar.

Ich habs nun probiert. Aber irgendwie komm ich nicht drauf, wie die Ausgabe von PHP das JavaScript übergeben soll.

PS: Bei mir wird nur Layer1 angezeigt (huhu welt). D.h. "huhu welt 2" wird garnicht erst angezeigt. Auch net nach dem Austausch.
 
Zuletzt bearbeitet:
Naja Du musst Dir vor augen führen das PHP bevor die Seite angezeigt wird ausgeführt wird.
HTML / JavaScript oder ähnliches kommt später.

Du siehst ja in der Funktion init() immer folgenden Aufruf

ticker.setLayerValues(String);

Damit werden in einen Array alle Daten gesammelt , also die Werte die dann in die Layer reinsollen.
Da PHP ja nun vor der Anzeige durchgeht ist es ein leichtes zu sagen

PHP: 
<?php
   $jScript = '<script type="text\/javascript">
                     function init() {
                        ticker = new SimpleTicker();'; 
   for($i = 0 ; $i < 10;$i++) {
      $jScript .= "ticker.setLayerValues($i);\n";
   }
   
   $jScript .= "ticker.start();</script>"; 
echo $jScript; // dann senden wir es an den Browser
?>

Wäre zum Beispiel eine möglichkeit in diesem Fall wie man es einbinden könnte. Wie der Inhalt dann geändert wird da müsstest Dich kurz selber nochmal hinsetzen da meine Zeit leider momentan etwas begrenzt ist und ich es erst später zu Ende bringen würde.
Aber eine Laufzeitvariable im JavaScript würde reichen die dann immer den nächsten Wert aus dem Array zieht und dann in das Div Element einfügt. Ginge glaub mit innerHTML um direkt HTML Code reinzupumpen, müsste ich auch noch testen. Meine JS Erfahrungen sind noch nicht so reichhaltig das ich es sofort sagen könnte.

PS: Bei mir wird nur Layer1 angezeigt (huhu welt). D.h. "huhu welt 2" wird garnicht erst angezeigt. Auch net nach dem Austausch.
Zum Vergrößern anklicken....

Mhm das macht mich nun nachdenklich ein wenig , bei mir geht es immer noch ohne Probleme im Firefox 2.0 und im IE 6.0 (örgs) getestet. Opera hab ich noch nicht drauf andere Browser ebenfalls nicht :(
Kann sein das ich vorhin beim Editieren was zerlegt habe hier nochmal das JS

Code: 
			var layerValues = new Array();
			var layers      = new Array();

			var primaryLayer = 1;
			var secondaryLayer = 2;
					
			function setLayerValues(value) {
				this.layerValues.push(value);
			}
												
			function changelayers() {
				layerbuffer    = primaryLayer;
				primaryLayer   = secondaryLayer
				secondaryLayer = layerbuffer;
			}
						
			function movelayer() {
				
				this.layers[primaryLayer].style.top = parseInt(this.layers[primaryLayer].style.top)-5;		
				this.layers[secondaryLayer].style.top = parseInt(this.layers[secondaryLayer].style.top)-5;		
				
				this.layers[secondaryLayer].style.display = 'block';
				
				if(parseInt(this.layers[primaryLayer].style.top) > -150) {
					setTimeout("movelayer()",36);
				} else {
				   // nun werden die Layer getauscht
				   changelayers();
				   //alter layer wird nach unten geschoben nun bereits der secondary Layer
				   with(this.layers[secondaryLayer].style) {
					  top = 150;
					  display = 'none';
				   }

				}
			}
			
			function SimpleTicker() {
			
				this.layerValues = layerValues;
				this.layers      = layers;
				
				this.setLayerValues = setLayerValues;
				this.movelayer      = movelayer;
				this.loadLayers     = loadLayers;
				this.start          = start;				
				this.loadLayers();
				
				function loadLayers() {
					this.layers[0] = document.getElementById('tickerGround');
					this.layers[1] = document.getElementById('layer1');
					this.layers[2] = document.getElementById('layer2');
				}
			}
			
			function start() {
				this.movelayer();
				setTimeout("start()",5000)
			}
			
			function init() {		
				ticker = new SimpleTicker();
	
				ticker.setLayerValues("peter");
				ticker.setLayerValues("klaus");
				ticker.setLayerValues("manfred");
				ticker.setLayerValues("ingeborg");
				ticker.start();
			}

			window.onload = init;
 
Zuletzt bearbeitet:
Also ich hab das jetzt so gemacht. Aber es gibt viele viele Fehler :-)

PHP: 
<?php
if ($PAGE_HEADER != 1){exit;}
?>
<table width="555" border="0" align="center" cellpadding="0" cellspacing="0" class="table_style">
  <tr background="images/bg_color_blue_1_a.gif">
    <td width="20" height="15" align="center" valign="middle" background="images/bg_color_blue_1_a.gif"><img src="images/content_header_pfeil_rechts.gif" width="5" height="9"></td>
    <td width="545" align="left" valign="middle" background="images/bg_color_blue_1_a.gif"><strong>FinTick</strong></td>
  </tr>
  <tr align="left" valign="top" height="30">
    <td colspan="2">
      <table width="100%" border="0" cellspacing="0" cellpadding="4" class="table_style_dash">
        <tr>
          <td height="20"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<?php
$sql = "SELECT user_id, text, timestamp FROM user_ticker ORDER BY timestamp DESC";
$tickhol = mysql_query($sql);
$anzz = mysql_num_rows($tickhol);
if($anzz) { // gucken ob was im Query drinsteckt
while ($row = mysql_fetch_assoc($tickhol)) {
$sql = "SELECT user_id, user_name,user_avatar FROM user_db WHERE user_id='$row[user_id]'";
$namehol = mysql_query($sql);
$rowname = mysql_fetch_assoc($namehol);
$rowbild = trim($rowname[user_avatar]);
for ($i=0; $i<$anzz; $i++)
{
$zahl++;
print "<div style=\"position:relative;height:100px;width:600px;border:1px solid #000000;\" id=\"tickerGround\">";    
print "<div style=\"position:absolute;top:0px;width:600px;height:100px;background-color:#FF00FF;\" id=\"layer".$zahl."\"><tr><td width=\"17%\">".thumb_maker('thumb_',$rowbild,80,80)."</td><td width=\"15%\"><font class=\"nav_style\">".view_profil($rowname['user_id'],$rowname['user_name'],$SID,'all_links')."</font></td><td width=\"70%\"><font class=\"nav_style\">".$row['text']."</font></td></tr></div></div>"; 
}
}
} else {
echo "Keine Einträge in der Datenbank vorhanden";
}
?>
          </table></td>
        </tr>
      </table>
    </td>
  </tr>
</table><br>

Das JS hab ich natürlich in meine Header Datei eingebunden.

Was hab ich denn falsch gemacht?

Ich danke dir vielmals für deine super Hilfe.

Das Ergebnis ist auf http://www.finmi.de/system.php anzusehen. Der haut mir meine Ergebnisse trotzdem nicht da rein (in die divs).
 
Zuletzt bearbeitet:
Wie gesagt ich muss nun erstmal fix meins fertig bekommen. Danach kümmer ich mich mal darum das es fertig wird. Du darfst hiebei auch nicht vergessen das es bei mir immer nur 1 Layer ist der angezeigt wird. bei Dir sind das irgendwie so viele. Naja schau ich dann mal rein.
 
Ja ok super. Vielen Dank. Natürlich musst du erst an dich denken und wenn du evtl. Zeit hast, dich um mich kümmern :-(.

//edit

Und wie weit bist du mit deinem Vorhaben? Vielleicht gewährst du mir ja einen Einblick. In PHP und MySQL bin ich der geborene Überlebenskünstler :-). Also falls du da Hilfe gebrauchen kannst, sag mir ruhig bescheid.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück