suche javascript oÄ für marquee

jAcKz

Legend
fool martyr

Registered: Dec 2000
Location: cross
Posts: 21376

23.02.2003 - 11:27

da html marquee ie-proprietär und außerdem sehr eingeschränkt ist suche ich eine möglichkeit um lauftext darzustellten. muß nichts besonderes, soll nur auch mit einem "längeren" text (~300 zeichen) zurecht kommen. wichtig ist weiters, daß die widerholung direkt anschließt, d.h. daß kein spalt zwischen dem ende und anfang des textes entsteht.

kennt jemand was nettes?

tia! :ghug:

Guest

Deleted User

Registered: n/a
Location:
Posts: n/a

23.02.2003 - 13:43

du kannst einen layer für den text erstellen und diesen dann in 100-millisekunden-intervallen verschieben.

atrox

in fairy dust... I trust!

Registered: Sep 2002
Location: HTTP/1.1 404
Posts: 2782

23.02.2003 - 15:48

ich würde es auch mit css-layer lösen und dann über einen javascript-timer das clipping und die position des layers verändern.
damit es beim rollover keinen abstand gibt, schlage ich vor, den layer zu duplizieren und an der nahtstelle den zweiten layer ansetzen. beim nächsten rollover kann man dann wieder den ersten layer ansetzen.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

23.02.2003 - 18:00

Zitat von atrox
ich würde es auch mit css-layer lösen und dann über einen javascript-timer das clipping und die position des layers verändern.
damit es beim rollover keinen abstand gibt, schlage ich vor, den layer zu duplizieren und an der nahtstelle den zweiten layer ansetzen. beim nächsten rollover kann man dann wieder den ersten layer ansetzen.

vorausgesetzt der anzeigebereich is kleiner als die länge des marquee... andernfalls gibts nämlich probs... :rolleyes:

atrox

in fairy dust... I trust!

Registered: Sep 2002
Location: HTTP/1.1 404
Posts: 2782

23.02.2003 - 19:05

hatte kurz zeit zum experiment, dementsprechend häßlich ist der code.
known bugs: IE5 ist durch die kombination clipping/overflow/oder was anderes - so verwirrt, daß er "unsichtbar" scrolled.
NS6: no known bugs.

wer will, wer mag? - bug hunting

Code:

<html>
<style>
.scroller {
  position: absolute;
  display: block;
  font-face: tahoma;
  font-size: 18px;
  clip: rect(0px, 0px, 10px, 100px);
  white-space:nowrap;
  overflow: hidden;
}

.platzhalter {
  display:block;
  height: 30px; 
}
</style>

<script>

var s1,s2;
var sleft=20;    // abstand vom linken rand
var swidth=100;  // display width (breite des angezeigten bereiches)
var step=5;     // schrittweite
var realwidth;
var pos=0;       // scrollposition

function scroller() {
  s1.style.left=sleft-pos;
  s1.style.clip="rect(0px "+(pos)+"px "+s1.offsetHeight+"px "+(swidth+pos)+"px)";
  
  if (pos%realwidth+swidth > realwidth) {  
    s2.style.display="block";
    s2.style.left=sleft-pos+realwidth;
    s2.style.clip="rect(0px 0px "+s1.offsetHeight+"px "+(swidth-realwidth+pos)+"px)";
  } else {
    s2.style.display="none"; // man könnte zwar immer ein 0 clipping
                             // machen, das hier ist sicherer.
  }
  pos+=step;
  pos%=realwidth;
  realwidth=s1.offsetWidth;
  window.setTimeout(scroller,100);
}

function startscroll() {  
  s1=document.getElementById("scroller1");  
  s2=document.getElementById("scroller2");  
  s2.innerHTML=s1.innerHTML;
  s1.style.height=s1.offsetHeight;
  realwidth=s1.offsetWidth;
  swidth=Math.min(swidth,realwidth);
  scroller();
}
</script>

<body onload="startscroll()">
Hier könnte Ihr Text stehen...
<div class=platzhalter>
<div class=scroller id=scroller1>
 near a tree by a river
there's a hole in the ground
where an old man of aran
goes around and around
and his mind is a beacon 
in the veil of the night
for a strange kind of fashion
there's a wrong and a right
but he'll never, never fight over you
</div>
<div class=scroller id=scroller2><!-- fake scroller für endlostext --></div>
</div>
... wenden sie sich vertrauensvoll an unsere Anzeigenabteilung.

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

23.02.2003 - 19:54

known bug: es geht weder mit ie6 noch mit opera 7.01

atrox

in fairy dust... I trust!

Registered: Sep 2002
Location: HTTP/1.1 404
Posts: 2782

23.02.2003 - 20:12

ahh.. nur die reihenfolge beim clipping vertauscht, und problem mit IE5 clipping+overflow bug.

jetzt gehts im ns6+ie5

Code:

<html>
<style>
.scrtext {
  position: absolute;
  display: block;
  font-face: tahoma;
  font-size: 18px;
  clip:rect(5px 100px 10px 0px);
  /* white-space:nowrap; -- ie5 braucht <nobr> */
  /* overflow: hidden; */
}

.platzhalter {
  display:block;
  height: 30px; 
  overflow: hidden;
}

</style>

<script>

var s1,s2;
var sleft=20;    // abstand vom linken rand
var swidth=100;  // display width (breite des angezeigten bereiches)
var step=5;     // schrittweite
var realwidth;
var pos=0;       // scrollposition

function scroller() {
  s1.style.left=sleft-pos;
  s1.style.clip="rect(0px "+(swidth+pos)+"px "+s1.offsetHeight+"px "+(pos)+"px )";
  
  if (pos%realwidth+swidth > realwidth) {  
    s2.style.display="block";
    s2.style.left=sleft-pos+realwidth;
    s2.style.clip="rect(0px "+(swidth-realwidth+pos)+"px "+s1.offsetHeight+"px 0px)";
  } else {
    s2.style.display="none"; // sicherer als 0-clipping
  }
  pos+=step;
  pos%=realwidth;
  realwidth=s1.offsetWidth;
  window.setTimeout(scroller,100);
}

function startscroll() {  
  s1=document.getElementById("scroller1");  
  s2=document.getElementById("scroller2");  
  s2.innerHTML=s1.innerHTML;
  s1.style.height=s1.offsetHeight;
  realwidth=s1.offsetWidth;
  swidth=Math.min(swidth,realwidth);
  scroller();
}
</script>

<body onload="startscroll()">
Hier könnte Ihr Text stehen...
<div class=platzhalter>
<div class=scrtext id=scroller1><nobr>
 near a tree by a river
there's a hole in the ground
where an old man of aran
goes around and around
and his mind is a beacon 
in the veil of the night
for a strange kind of fashion
there's a wrong and a right
but he'll never, never fight over you
</nobr></div>
<div class=scrtext id=scroller2><!-- fake scroller für endlostext --></div>
</div>
... wenden sie sich vertrauensvoll an unsere Anzeigenabteilung.

opera kompatibilität soll sich wer anderer ansehen/anpassen.

Bearbeitet von atrox am 23.02.2003, 20:48

Frys_Assassin

information keeper

Registered: Oct 2001
Location: New New York
Posts: 2503

23.02.2003 - 21:52

funzt auch im opera 7.01, aber ich würd am anfang oder am ende vom scrollenden text ein nbsp einfügen, weil sonst pickt ers zam...

jAcKz

Legend
fool martyr

Registered: Dec 2000
Location: cross
Posts: 21376

23.02.2003 - 22:05

thx!

DirtyHarry

aka robobimbo

Registered: Apr 2001
Location: outer space
Posts: 464

23.02.2003 - 22:15

tolle lösung atrox

der hier sieht auch recht nett aus:

http://javascript.internet.com/messages/len's-news-scroller.html

cu

robo

atrox

in fairy dust... I trust!

Registered: Sep 2002
Location: HTTP/1.1 404
Posts: 2782

24.02.2003 - 04:07

Zitat von robobimbo
tolle lösung atrox

ist noch lange entfernt von "toll"

ist nur ein proof-of-concept
aber fürn jackz soll ja auch noch ein bishen arbeit abfallen

zb kann man in startscroll() folgende zeile einfügen, um die durch den IE-workaround beim NS entstehenden horizontalen scrollbalken loszuwerden:
if (window.navigator.userAgent.indexOf("Gecko")>0) s1.style.overflow=s2.style.overflow="hidden";

Phobos

✝

Registered: Jan 2003
Location: 1050
Posts: 2111

24.02.2003 - 14:11

Zitat von watchout
known bug: es geht weder mit ie6 noch mit opera 7.01

ahaha der war gut, n1

jAcKz Legend fool martyr Registered: Dec 2000 Location: cross Posts: 21376	23.02.2003 - 11:27 da html marquee ie-proprietär und außerdem sehr eingeschränkt ist suche ich eine möglichkeit um lauftext darzustellten. muß nichts besonderes, soll nur auch mit einem "längeren" text (~300 zeichen) zurecht kommen. wichtig ist weiters, daß die widerholung direkt anschließt, d.h. daß kein spalt zwischen dem ende und anfang des textes entsteht. kennt jemand was nettes? tia!
Guest Deleted User Registered: n/a Location: Posts: n/a	23.02.2003 - 13:43 du kannst einen layer für den text erstellen und diesen dann in 100-millisekunden-intervallen verschieben.
atrox in fairy dust... I trust! Registered: Sep 2002 Location: HTTP/1.1 404 Posts: 2782	23.02.2003 - 15:48 ich würde es auch mit css-layer lösen und dann über einen javascript-timer das clipping und die position des layers verändern. damit es beim rollover keinen abstand gibt, schlage ich vor, den layer zu duplizieren und an der nahtstelle den zweiten layer ansetzen. beim nächsten rollover kann man dann wieder den ersten layer ansetzen.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	23.02.2003 - 18:00 Zitat von atrox ich würde es auch mit css-layer lösen und dann über einen javascript-timer das clipping und die position des layers verändern. damit es beim rollover keinen abstand gibt, schlage ich vor, den layer zu duplizieren und an der nahtstelle den zweiten layer ansetzen. beim nächsten rollover kann man dann wieder den ersten layer ansetzen. vorausgesetzt der anzeigebereich is kleiner als die länge des marquee... andernfalls gibts nämlich probs...
atrox in fairy dust... I trust! Registered: Sep 2002 Location: HTTP/1.1 404 Posts: 2782	23.02.2003 - 19:05 hatte kurz zeit zum experiment, dementsprechend häßlich ist der code. known bugs: IE5 ist durch die kombination clipping/overflow/oder was anderes - so verwirrt, daß er "unsichtbar" scrolled. NS6: no known bugs. wer will, wer mag? - bug hunting Code: <html> <style> .scroller { position: absolute; display: block; font-face: tahoma; font-size: 18px; clip: rect(0px, 0px, 10px, 100px); white-space:nowrap; overflow: hidden; } .platzhalter { display:block; height: 30px; } </style> <script> var s1,s2; var sleft=20; // abstand vom linken rand var swidth=100; // display width (breite des angezeigten bereiches) var step=5; // schrittweite var realwidth; var pos=0; // scrollposition function scroller() { s1.style.left=sleft-pos; s1.style.clip="rect(0px "+(pos)+"px "+s1.offsetHeight+"px "+(swidth+pos)+"px)"; if (pos%realwidth+swidth > realwidth) { s2.style.display="block"; s2.style.left=sleft-pos+realwidth; s2.style.clip="rect(0px 0px "+s1.offsetHeight+"px "+(swidth-realwidth+pos)+"px)"; } else { s2.style.display="none"; // man könnte zwar immer ein 0 clipping // machen, das hier ist sicherer. } pos+=step; pos%=realwidth; realwidth=s1.offsetWidth; window.setTimeout(scroller,100); } function startscroll() { s1=document.getElementById("scroller1"); s2=document.getElementById("scroller2"); s2.innerHTML=s1.innerHTML; s1.style.height=s1.offsetHeight; realwidth=s1.offsetWidth; swidth=Math.min(swidth,realwidth); scroller(); } </script> <body onload="startscroll()"> Hier könnte Ihr Text stehen... <div class=platzhalter> <div class=scroller id=scroller1> near a tree by a river there's a hole in the ground where an old man of aran goes around and around and his mind is a beacon in the veil of the night for a strange kind of fashion there's a wrong and a right but he'll never, never fight over you </div> <div class=scroller id=scroller2><!-- fake scroller für endlostext --></div> </div> ... wenden sie sich vertrauensvoll an unsere Anzeigenabteilung.
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	23.02.2003 - 19:54 known bug: es geht weder mit ie6 noch mit opera 7.01
atrox in fairy dust... I trust! Registered: Sep 2002 Location: HTTP/1.1 404 Posts: 2782	23.02.2003 - 20:12 ahh.. nur die reihenfolge beim clipping vertauscht, und problem mit IE5 clipping+overflow bug. jetzt gehts im ns6+ie5 Code: <html> <style> .scrtext { position: absolute; display: block; font-face: tahoma; font-size: 18px; clip:rect(5px 100px 10px 0px); /* white-space:nowrap; -- ie5 braucht <nobr> / / overflow: hidden; / } .platzhalter { display:block; height: 30px; overflow: hidden; } </style> <script> var s1,s2; var sleft=20; // abstand vom linken rand var swidth=100; // display width (breite des angezeigten bereiches) var step=5; // schrittweite var realwidth; var pos=0; // scrollposition function scroller() { s1.style.left=sleft-pos; s1.style.clip="rect(0px "+(swidth+pos)+"px "+s1.offsetHeight+"px "+(pos)+"px )"; if (pos%realwidth+swidth > realwidth) { s2.style.display="block"; s2.style.left=sleft-pos+realwidth; s2.style.clip="rect(0px "+(swidth-realwidth+pos)+"px "+s1.offsetHeight+"px 0px)"; } else { s2.style.display="none"; // sicherer als 0-clipping } pos+=step; pos%=realwidth; realwidth=s1.offsetWidth; window.setTimeout(scroller,100); } function startscroll() { s1=document.getElementById("scroller1"); s2=document.getElementById("scroller2"); s2.innerHTML=s1.innerHTML; s1.style.height=s1.offsetHeight; realwidth=s1.offsetWidth; swidth=Math.min(swidth,realwidth); scroller(); } </script> <body onload="startscroll()"> Hier könnte Ihr Text stehen... <div class=platzhalter> <div class=scrtext id=scroller1><nobr> near a tree by a river there's a hole in the ground where an old man of aran goes around and around and his mind is a beacon in the veil of the night for a strange kind of fashion there's a wrong and a right but he'll never, never fight over you </nobr></div> <div class=scrtext id=scroller2><!-- fake scroller für endlostext --></div> </div> ... wenden sie sich vertrauensvoll an unsere Anzeigenabteilung. opera kompatibilität soll sich wer anderer ansehen/anpassen. Bearbeitet von atrox am 23.02.2003, 20:48*
Frys_Assassin information keeper Registered: Oct 2001 Location: New New York Posts: 2503	23.02.2003 - 21:52 funzt auch im opera 7.01, aber ich würd am anfang oder am ende vom scrollenden text ein nbsp einfügen, weil sonst pickt ers zam...
jAcKz Legend fool martyr Registered: Dec 2000 Location: cross Posts: 21376	23.02.2003 - 22:05 thx!
DirtyHarry aka robobimbo Registered: Apr 2001 Location: outer space Posts: 464	23.02.2003 - 22:15 tolle lösung atrox der hier sieht auch recht nett aus: http://javascript.internet.com/messages/len's-news-scroller.html cu robo
atrox in fairy dust... I trust! Registered: Sep 2002 Location: HTTP/1.1 404 Posts: 2782	24.02.2003 - 04:07 Zitat von robobimbo tolle lösung atrox ist noch lange entfernt von "toll" ist nur ein proof-of-concept aber fürn jackz soll ja auch noch ein bishen arbeit abfallen zb kann man in startscroll() folgende zeile einfügen, um die durch den IE-workaround beim NS entstehenden horizontalen scrollbalken loszuwerden: if (window.navigator.userAgent.indexOf("Gecko")>0) s1.style.overflow=s2.style.overflow="hidden";
Phobos ✝ Registered: Jan 2003 Location: 1050 Posts: 2111	24.02.2003 - 14:11 Zitat von watchout known bug: es geht weder mit ie6 noch mit opera 7.01 ahaha der war gut, n1

suche javascript oÄ für marquee

Forum Index > Software > Coding Stuff

jAcKz

Guest

atrox

watchout

atrox

watchout

atrox

Frys_Assassin

jAcKz

DirtyHarry

atrox

Phobos