Text in Fenster automatisch scrollen

Werner7272 · 29. April 2011 um 09:29

Hallo,

auf einer Homepage will ich am rechten Rand ein Fenster setzen, dies funktioniert bereits mit diesem Code:

News

HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN

Nun soll dieser Text aber durchweg automatisch von oben nach unten scrollen.
Wie kann ich die erreichen?

Danke.

Gruss Werner

Nitya · 29. April 2011 um 13:26

Hallo Werner,
vertikale Ticker/Scroller sind jede Menge zu finden.
Hier mal ein einfacher, der sich für Text gut eignet:



Ticker
#ticker{width:300px;height:100px;overflow:hidden;padding:0px;text-align:center}

function init(){
	Scrolling=true; speed=50;
	elem=document.getElementById(‚ticker‘)
	max=elem.scrollHeight;
	elem.innerHTML+=elem.innerHTML;
	setTimeout(‚move()‘,2500);
}

function move(){
	var scroll=elem.scrollTop;
	if (Scrolling){
 if(scroll < max) {scroll++}
 else{scroll=1}
 elem.scrollTop=scroll;
	}
setTimeout(‚move()‘,speed);
}

window.onload=function(){init()}
 
 
…START…

HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
…ENDE…

h♥rzlichen Gruß
Nitya

Werner7272 · 29. April 2011 um 13:44

Hallo und vielen Dank,

leider kenne ich mich mit diesem Zeug garnicht aus.
Kannst Du mir sagen wie mein Code zu Schluss aussehen müsste, dass der Lauftext nur in diesem Fester läuft?

Danke Gruss Werner

Werner7272 · 29. April 2011 um 13:45

Noch eine Frage:

Muss ich da nich irgendetwas installieren und oder auf Lizensrechte achten?

Gruss Werner

Nitya · 29. April 2011 um 14:32

Hallo Werner,

das „Zeugs“ darfst Du ohne copyright verwenden …

Kannst Du mir sagen wie mein Code zu Schluss aussehen müsste,
dass der Lauftext nur in diesem Fester läuft?

mit Fenster meinst Du das p-Element, welches in einem div steht?!?!
Jedenfalls mit der id=„ticker“ und am besten ohne padding(so wie ich es im style definiert habe)

onmouseover und -out sind nur dafür da, dass es stehen bleibt, wenn man mit der mouse drauf ist.

h♥rzlichen Gruß
Nitya

Werner7272 · 29. April 2011 um 15:25

Hallo,

also derzeit sieht der Auszug aus meinem Quelltext so aus:

News

HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN

Gehe ich richtig in der Annahme, dass er dann so aussehen muss:

News

Ticker
#ticker{width:300px;height:100px;overflow:hidden;padding:0px;text-align:center}

function init(){
Scrolling=true; speed=50;
elem=document.getElementById(‚ticker‘)
max=elem.scrollHeight;
elem.innerHTML+=elem.innerHTML;
setTimeout(‚move()‘,2500);
}

function move(){
var scroll=elem.scrollTop;
if (Scrolling){
if(scroll < max) {scroll++}
else{scroll=1}
elem.scrollTop=scroll;
}
setTimeout(‚move()‘,speed);
}

window.onload=function(){init()}

…START…

HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
…ENDE…

Nochmals vielen Dank.

Gruss Werner

Nitya · 29. April 2011 um 15:53

Hallo Werner,

so wie Du das machen willst … geht es natürlich nicht!

Dann zeige ich Dir mal, wie der Script in Deinen „unvollständigen“ Quelltext eingefügt werden könnte:


 
 News 
 

 

HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN 
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN

 


var Scrolling=true; speed=50;
var elem=document.getElementById(‚ticker‘)
var max=elem.scrollHeight;
elem.innerHTML+=elem.innerHTML;

function move(){
	var scroll=elem.scrollTop;
	if (Scrolling){
 if(scroll < max) {scroll++}
 else{scroll=1}
 elem.scrollTop=scroll;
	}
	setTimeout(‚move()‘,speed);
}

setTimeout(‚move()‘,2500);



h♥rzlichen Gruß
Nitya

Werner7272 · 29. April 2011 um 18:13

Hallo,

ich habe dies nun versucht.
Jedoch war alles etwas verschoben.
Ich habe dann am Ende von Deinem Code noch folgenden Code ergänzt:

Dann sieht das kleine Fenster richtig gut aus.
Jedoch je mehr Zeilen ich als Lauftext einfüge umso langer wird das Fenster.
Der Text läuft aber leider nie.
Ich nutze den Firefox als Browser.
Hast Du noch eine Idee?

Gruss Werner

Nitya · 29. April 2011 um 18:45

Hallo,

Dann sieht das kleine Fenster richtig gut aus.
Jedoch je mehr Zeilen ich als Lauftext einfüge umso langer
wird das Fenster.

ein Element ohne height wächst mit dem Inhalt.
Sorry … wusste nicht, dass Du nur diese inline-styles verwendest,
sonst hätte ich im style beim p-element noch ein „height:100px“ beigefügt.

Der Text läuft aber leider nie.

klar … gibt wohl nichts zu scrollen )

h♥rzlichen Gruß
Nitya

Werner7272 · 29. April 2011 um 20:53

Hallo,

SUPER !!!
Jetzt haut es hin.
Hier mein fertiger Code:

 News 


 

HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLLwwwER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN 
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLLeeeeeR TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN 
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER S2L DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN
HIER SOLL DER TEXT REIN 
HIER SOL2
OLL DER TEXT REIN
HIER SOLL DER TEXT REIN

 


var Scrolling=true; speed=50;
var elem=document.getElementById('ticker')
var max=elem.scrollHeight;
elem.innerHTML+=elem.innerHTML;

function move(){
 var scroll=elem.scrollTop;
 if (Scrolling){
 if(scroll \< max) {scroll++}
 else{scroll=1}
 elem.scrollTop=scroll;
 }
 setTimeout('move()',speed);
}

setTimeout('move()',2500);
 




Nur noch zwei kleine Fragen:
Wenn ich den Text der Laufschrift etwas kleiner haben möchte was / wo muss ich da ändern?

Nach der unteren Zeile ist noch relativ viel Platz bis zum Ende des Fenstern, wie kann ich diesen eine Zeile kleiner machen?

VIELEN DANK.

Gruss Werner

Nitya · 29. April 2011 um 21:19

Hallo,

SUPER !!!
Jetzt haut es hin.

mit dem was Du gepostet hast … kaum zu glauben … p-element ist so breit, dass wohl alles reinpasst.

Wenn ich den Text der Laufschrift etwas kleiner haben möchte
was / wo muss ich da ändern?

font-size ist wahrscheinlich das, was Du suchst
wird auch über style definiert

Nach der unteren Zeile ist noch relativ viel Platz bis zum Ende des Fenstern, wie kann ich diesen eine Zeile kleiner machen?

habe Dich schon mal gefragt, was Du mit „Fenster“ meinst.
Sehe da keinen „relativ viel Platz“ bei dem was Du gepostet hast.

h♥rzlichen Gruß
Nitya

Werner7272 · 29. April 2011 um 21:40

Hallo,

also es sieht jetzt so aus:
Ich meine den Abstand zwischen der unteren Zeile und…
Was meinst Du damit? Kann dies Probleme mit anderen Browsern geben?

Mit der Schriftgröße hab ich es so versucht:

Leider tut sich da nichts.

Ich hoffe ich bin nicht zu anstrengend.

Gruss Werner

Nitya · 29. April 2011 um 22:22

Hallo,

Ich hoffe ich bin nicht zu anstrengend.

doch … so langsam schon )
Javascript in eine Sache … HTMl & CCS eine andere …
Wenn Du nicht weißt, welche Werte font-size erwartet …
Tipp: px em %

h♥rzlichen Gruß
Nitya

Werner7272 · 30. April 2011 um 09:45

Hallo,

vielen Dank für Deine Geduld.
Mit Schrift ist nun auch alles i.O.

Dennoch leider kleine offene Fragen:

Nochmals wegen dem Abstand, hier mal ein Bild vom Fenster:

http://www.fotos-hochladen.net/view/bild010rqvz2xfpb…

Ich meine den Abstand zwischen der unteren Zeile und dem unteren Strich des Fensters / der Tabelle oder wie man dies nennt.

Wenn ich die Überschrift der Tabelle (derzeit „News“ ) auf eine zweizeilige Überschrift ändern mächte, wie bekomme ich dann diesen grau hinterlegten Bereich (unter der Überschrift) ewtas größer?

kaum zu glauben … p-element ist so breit, dass wohl alles reinpasst.
3. Was meinst Du damit? Kann dies Probleme mit anderen Browsern geben?

Vielen Dank

Gruss Werner

Werner7272 · 30. April 2011 um 09:47

Hallo,

vielen Dank für Deine Geduld.
Mit Schrift ist nun auch alles i.O.

Dennoch leider kleine offene Fragen:

Nochmals wegen dem Abstand, hier mal ein Bild vom Fenster:

http://www.fotos-hochladen.net/view/bild010rqvz2xfpb…

Ich meine den Abstand zwischen der unteren Zeile und dem unteren Strich des Fensters / der Tabelle oder wie man dies nennt.

Wenn ich die Überschrift der Tabelle (derzeit „News“ ) auf eine zweizeilige Überschrift ändern mächte, wie bekomme ich dann diesen grau hinterlegten Bereich (unter der Überschrift) ewtas größer?

kaum zu glauben … p-element ist so breit, dass wohl alles reinpasst.
3. Was meinst Du damit? Kann dies Probleme mit anderen Browsern geben?

Vielen Dank

Gruss Werner

Nitya · 30. April 2011 um 13:32

Hallo,

Abstände, Ausmaße etc … alles Sache von CSS.

h♥rzlichen Gruß
Nitya

Werner7272 · 30. April 2011 um 13:42

Hallo,

alles klar, ich werde es dort nochmals versuchen.

Vielen Dank nochmals…

Gruss Werner