suche javascript oÄ für marquee

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/suche_javascript_oae_fuer_marquee_68512/page_1 - zur Vollversion wechseln!

jAcKz schrieb am 23.02.2003 um 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:

schrieb am 23.02.2003 um 13:43

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

atrox schrieb am 23.02.2003 um 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 schrieb am 23.02.2003 um 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 schrieb am 23.02.2003 um 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 schrieb am 23.02.2003 um 19:54

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

atrox schrieb am 23.02.2003 um 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.

Frys_Assassin schrieb am 23.02.2003 um 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 schrieb am 23.02.2003 um 22:05

thx! :ghug:

DirtyHarry schrieb am 23.02.2003 um 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 schrieb am 24.02.2003 um 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 schrieb am 24.02.2003 um 14:11

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

ahaha der war gut, n1