lauftext

[agi]

liebes forum!

ich hab da ein problem. es soll ein lauftext eingebaut werden. jeder array-wert sollte mit einem anderen link versehen werden. ich hab probiert es in dem array direkt einzubauen, funktioniert leider nicht. ich wäre sehr dankbar, wenn mir jemand einen tip geben könnte.
hier das script:

<script language="javascript">
<!--
var delay=100;
var nextm=0;
var msg=new Array
(
'halli hallo',
'hier geht es weiter',
'mit dem Ticker'
);
function start_ticker()
{
do_ticker(msg[0], 0, 1);
}
function do_ticker(text, pos, dir)
{
var out='<font face="Verdana, Arial, Helvetica" color=#000000><strong><font size=-1>'+text.substring(0, pos)+'</font></strong>';
if(navigator.appName=="Netscape")
  with(document.ticker.document)
  {
  open(); write(out); close();
  }
else
  ticker.innerHTML=out;
  pos+=dir;
  if(pos>text.length)
   setTimeout('do_ticker("'+text+'",'+pos+','+(-dir)+')', delay*100);
  else
  {
   if(pos<0)
   {
   if(++nextm>=msg.length)
   nextm=0;
   text=msg[nextm];
   dir=-dir;
   }
  setTimeout('do_ticker("'+text+'",'+pos+','+dir+')', delay);
  }
}
// -->
</script>

danke, agi

[wahsaga]

hi,

ich hab da ein problem. es soll ein lauftext eingebaut werden.

das ist in der tat ein problem. http://www.kommdesign.de/galerie/inhalte/ticker.htm

jeder array-wert sollte mit einem anderen link versehen werden. ich hab probiert es in dem array direkt einzubauen, funktioniert leider nicht.

davon sehe ich in einem code nichts.
wo sollen da "links" sein/erstellt werden?

var out='<font face="Verdana, Arial, Helvetica" color=#000000><strong><font size=-1>'+text.substring(0, pos)+'</font></strong>';

gräßlich ... mit so veraltetem code solltest du nicht mehr arbeiten.

<font> durch ein anderes geeignetes element zu ersetzen, welches dann mit CSS wie gewünscht formatiert wird, ist das mindeste.

gruß,
wahsaga

[Gernot Back]

Hallo wahsaga,

var out='<font face="Verdana, Arial, Helvetica" color=#000000><strong><font size=-1>'+text.substring(0, pos)+'</font></strong>';

gräßlich ... mit so veraltetem code solltest du nicht mehr arbeiten.

Das ist nicht das Schlimmste, darin:

  

> >  if(navigator.appName=="Netscape")  
> >   with(document.ticker.document)  

wird sich jeder Mozilla und auch jeder Netscape6 oder 7 verheddern,  
Besser:  
       if(document.layers)  
        with(document.ticker.document)  

> >   {  
> >   open(); write(out); close();  
> >   }  
> >  else  
> >   ticker.innerHTML=out;  

und daran^^^^^^ müsste man dann auch noch arbeiten.  
besser: document.getElementById('ticker').innerHTML=out;  

Gruß Gernot

[agi]

hi wahsaga,

danke! zu den links weiß ich leider immer noch nicht weiter. ich meinte mit den links, dass jeder array-wert mit einem extra link versehen wird. in diesem beispiel, sollte 'der 1.text' ein link sein, 'der 2.text'´ein anderer link und auch 'der 3.text' auch ein anderer. mit einem hier noch einmal der quellcode:
<script language="javascript">
<!--
var delay=100;
var nextm=0;
var msg=new Array
(
'der 1.text',
'der 2.text',
'der 3.text'
);
function start_ticker()
{
do_ticker(msg[0], 0, 1);
}
function do_ticker(text, pos, dir)
{
var out='<strong>'+text.substring(0, pos)+'</strong>';
if(document.layers)
  with(document.ticker.document)
  {
  open(); write(out); close();
  }
else
  document.getElementById('ticker').innerHTML=out;
  pos+=dir;
  if(pos>text.length)

setTimeout('do_ticker("'+text+'",'+pos+','+(-dir)+')',
delay*100);
  else
  {
   if(pos<0)
   {
   if(++nextm>=msg.length)
   nextm=0;
   text=msg[nextm];
   dir=-dir;
   }
  setTimeout('do_ticker("'+text+'",'+pos+','+dir+')',
delay);
  }
}
// -->
</script>

hast du eine idee? bitte, danke!
agi

[wahsaga]

hi,

zu den links weiß ich leider immer noch nicht weiter.

tja, ich genauso wenig.
allerdings hatte _ich_ mir da mit einem neuen posting von _dir_ etwas mehr klarheit erhofft.

ich meinte mit den links, dass jeder array-wert mit einem extra link versehen wird. in diesem beispiel, sollte 'der 1.text' ein link sein, 'der 2.text'´ein anderer link und auch 'der 3.text' auch ein anderer.

willst du dafür das attribut beALinkNowPlease benutzen - oder doch so etwas wie href? wenn letzteres - wo soll's denn hingehen ...?

mit einem hier noch einmal der quellcode:

das ist bisauf minimale änderung immer noch der gleiche wie eben - von irgendetwas "link"-artigem noch immer keine spur.

hast du eine idee? bitte, danke!

wie wär's, wenn du das problem erst mal logisch angehst?

• was brauche ich für einen link?
• wie kann ich versuchen das da einzubauen?
• ...

gruß,
wahsaga

[agi]

hi,

in diesem script wird doch erst der Inhalt von msg[0] als lauftext ausgegeben,verschwindet, dann der von msg[1] usw. ich hab z.B. bei der variablen out ein link <a href...> eingebaut und die ganzen texte erscheinen als link, aber beben nur in einem, siehe unten:

<script language="javascript">
<!--
var delay=50;
var nextm=0;
var msg=new Array
(
'text 1',
'text 2',
'text 3'
);
function start_ticker()
{
do_ticker(msg[0], 0, 1);
}
function do_ticker(text, pos, dir)
{
var out='<a href="http://www.mongolei.de" target="_blank"><strong>'+text.substring(0, pos)+'</strong></a>';
if(navigator.appName=="Netscape")
  with(document.ticker.document)
  {
  open(); write(out); close();
  }
else
  ticker.innerHTML=out;
  pos+=dir;
  if(pos>text.length)
   setTimeout('do_ticker("'+text+'",'+pos+','+(-dir)+')', delay*100);
  else
  {
   if(pos<0)
   {
   if(++nextm>=msg.length)
   nextm=0;
   text=msg[nextm];
   dir=-dir;
   }
  setTimeout('do_ticker("'+text+'",'+pos+','+dir+')', delay);
  }
}
// -->
</script>

würde gerne msg[0], msg[1], msg[2] jeweils mit je unterschiedl. links versehen. hoffentlich ist es jetzt verständlich?! danke, agi

[wahsaga]

hi,

würde gerne msg[0], msg[1], msg[2] jeweils mit je unterschiedl. links versehen.

dann könntest du dir beispielsweise noch ein zweites array erstellen, in dem du die zugehörigen linkziele einträgst.

und an der stelle, wo der wert für out zusammensetzt wird, setzt du für den wert des href-attributes dann halt aus diesem array eben den zur messegenummer gehörenden wert ein.

gruß,
wahsaga

[Gernot Back]

Hallo wahsaga,

dann könntest du dir beispielsweise noch ein zweites array erstellen, in dem du die zugehörigen linkziele einträgst.

Nur dass so ein Buchstabenkarussell, bei dem der vorderste Buchstabe in einem Intervall immer ans Ende verschoben wird, immer ruckeln wird, schlimmer noch als ein Marquee-Element. Außerdem, da auch innerhalb des Links die Buchstaben gesplittet werden, muss ich um die Einzelteile vorne und hinten zweimal den Grenzlink herumplatzieren, das ist ein ziemlicher Programmieraufwand!

Gruß Gernot

[agi]

werde morgen versuchen es hinzukriegen. danke!
agi

[Gernot Back]

Hallo agi,

was du vorhast ist im Prinzip wohl mit Javascript machbar, aber ziemlich kompliziert zu realisieren.

Ich würde dir einfach das MARQUEE-Element als Ticker vorschlagen. Auch wenn das nicht W3C-Standard ist, so wird es doch von allen modernen Browsern interpretiert (Wer benutzt schon noch Netscape 4.X?). Mit Marquee ist es kein Problem, Links einzubauen, ganz ohne Javascript.

http://de.selfhtml.org/html/text/proprietaer.htm#marquee

Mozilla 1.7.2 kann das übrigens auch, auch wenn der in dem Artikel noch nicht aufgeführt wird.

Gruß Gernot

[agi]

hi Gernot,

das hatte ich schon gemacht, aber dieses geruckele stört einen ziemlich. trotzdem danke!
agi

[Gernot Back]

Hallo agi,

das hatte ich schon gemacht, aber dieses geruckele stört einen ziemlich. trotzdem danke!

Ja, so sind sie nun mal, diese Lauftexte, übrigens auch mit Javascript. Hast du gesehen, dass du bei Marquee auch die Laufgeschwindigkeit einstellen kannst?

Gruß Gernot

[Gernot Back]

Hallo nochmal,

was mir gerade noch einfällt:

Dieser Ansatz könnte ruckelfreier sein.

Gruß Gernot

[Gernot Back]

und nochmal,

so sähe das dann aus. (Wahnsinn jetzt habe ich auch mal ein Tickerskipt geschrieben. Ist das wirklich neu, oder gab es das schon irgendwo?)

  
<html>  
<head>  
<title>Smoothticker</title>  
<meta name="author" content="Gernot Back">  
<meta name="generator" content="Ulli Meybohms HTML EDITOR">  
<style type="text/css">  
[code lang=css]  
html, body {  
  margin:0;  
  padding:0;  
  width:100%;  
}  
  
#ticker {  
  background-color:#FFFFAA;  
  float:left;  
}  
  
#ticker a {  
 color:#0000DD;  
 text-decoration:none;  
 font-weight:bold;  
}

</style>
<script type="text/javascript">

  
var tck;  
var speed = 2;  
var divisor = 1;  
  
function step () {  
  pos = tck.style.left;  
  pos = pos.substring(0,pos.length-2);  
  pos = parseInt(pos);  
  if(tck.offsetLeft <= (tck.offsetWidth / -divisor)) {  
    pos += tck.offsetWidth/divisor;  
  }  
  pos -= speed;  
  tck.style.left = pos + "px";  
  window.setTimeout('step()', 42);  
}  
  
function init() {  
  if(window.innerWidth) {  
    var wd = window.innerWidth;  
  } else {  
    var wd = document.body.clientWidth;  
  }  
  if(document.all) {  
    tck = document.all.ticker;  
  } else {  
    tck = document.getElementById('ticker');  
  }  
  var txt = tck.innerHTML;  
  while(tck.offsetWidth < wd*2) {  
    divisor++;  
    tck.innerHTML += txt + ' ';  
  }  
  step();  
}

</script>
</head>
<body onload="init()">
<div style="width:100%;overflow:hidden;">
<div id="ticker" style="position:relative;left:0px;white-space:nowrap"><a href="#Hier">Hier</a> <a href="#steht">steht</a> <a href="#ein">ein</a> <a href="#Text">Text,</a> <a href="#bei">bei</a> <a href="#dem">dem</a> <a href="#jedes">jedes</a> <a href="#Wort">Wort</a> <a href="#einzeln">einzeln</a> <a href="#verlinkt">verlinkt</a> <a href="#ist">ist,</a> <a href="#wie">wie</a> <a href="#man">man</a> <a href="#in">in</a> <a href="#der">der</a> <a href="#Statuszeile">Statuszeile</a> <a href="#leicht">leicht</a> <a href="#ueberpruefen">überprüfen</a> <a href="#kann">kann.</a>
</div>
</div>
</body>
</html>
[/code]

Gruß Gernot

[Gernot Back]

Noch ein Nachtrag:

Die Funktion init() sollte besser so aussehen:

  
function init() {  
    if(document.all) {  
      tck = document.all.ticker;  
    } else {  
      tck = document.getElementById('ticker');  
    }  
    var txt = tck.innerHTML;  
    do {  
      divisor++;  
      tck.innerHTML +=  ' ' + txt;  
    } while(tck.offsetWidth < screen.width*2);  
    step();  
}  

screen.width können alle relevanten Browser gleichermaßen auslesen; eine Fallunterscheidung erübrigt sich. Außerdem ist es besser geeignet als window.innerWidth, da ein Nutzer ja auch während des Betrachtens der Seite auf die Idee kommen könnte, sein Browserfenster zu vergrößern oder zu verkleinern.

Durch die Do-While-Schleife wird sichergestellt, dass der Inhalt des Ticker-Elementes auf jeden Fall einmal dupliziert wird (wichtig falls sowieso schon im einfachen Text mehr drin steht, als in das Doppelte der Bildschirmweite passt) und dass er in jedem Fall solange um sich selbst verlängert wird, bis er länger als dieses Doppelte der screen.width ist.

Nun kann sich der Nutzer das Fenster unterwegs so groß ziehen wie er will: Gesteuert durch die Variable divisor erfolgt in jedem Fall der horizontale Rücksprung nach dem Durchlauf eines kompletten Urprungstextes um seine entsprechende Weite, d. h. seine ursprüngliche offsetWidth und erscheint auch dahinter bildschirmfüllend oft wiederholt.

Schön zu beobachten ist das Springen, wenn man einen der Links in einem Browser anklickt, der diese dann mit einer gepunkteten Linie umrandet.

Gruß Gernot

P.S.: Den Versuch, das Tickersript für Netscape 4.X lauffähig zu machen, habe ich aufgegeben, es gibt da zu viele für diesen Ansatz notwendige CSS-Eigenschaften und Javascript-Methoden und -Eigenschaften für die es in diesem Browser keine Entsprechungen gibt.

[Cybaer]

Hi,

Noch ein Nachtrag:

Ohne den Entstehungsgang en detail (hurra, kein Denglisch ;-)) verfolgt zu haben:

if(document.all) {
      tck = document.all.ticker;
    } else {
      tck = document.getElementById('ticker');
    }

Daß ein Browser all nicht beherrscht, ist definitiv kein Kriterium für die Beherrschung von getElementById. :-o

var txt = tck.innerHTML;

Und strenggenommen ist die Beherrschung von getElementById auch kein Kriterium für die Beherrschung von innerHTML. ;)

do {
      divisor++;
      tck.innerHTML +=  ' ' + txt;
    } while(tck.offsetWidth < screen.width*2);

Auf das (zumal korrekte) Vorhandensein von screen.width ist auch kein Verlaß. Auch offsetWidth kennt nicht jeder. Na gut: do gibt es schon ab JavaScript 1.2 ... ;-)

Gruß, Cybaer

[Gernot Back]

Hallo Cybaer,

if(document.all) {
      tck = document.all.ticker;
    } else {
      tck = document.getElementById('ticker');
    }

Daß ein Browser all nicht beherrscht, ist definitiv kein Kriterium für die Beherrschung von getElementById. :-o

Mir geht es bei dieser Abfrage auch weniger darum sicherzustellen, dass der Browser die Objekte kennt. Ich gehe hier (Vorsicht Denglish:) "quick'n dirty" einfach davon aus, dass in 99% der Fälle der Browser des Nutzers schon zumindest eines der beiden Objekte verstehen wird.

Mir geht es hier eher um die Browser, die beide Objekte beherrschen, also z.B. IE5/6 und die neueren Opera-Versionen.

Ich habe insbesondere bei Opera 7.54 den Verdacht, dass dieser Browser DOM-Objekte intern immer in entsprechende ALL und ALL-Unterojekte umwandeln muss, da ich hier deutliche Performanzunterschiede bemerke.

So brauchte Opera z. B. bei http://www.sprachlernspiele.de/selftests/klappmenue/index.html mit einer zugegeben extrem langen verschachtelten Liste dreimal so lange zum Abarbeiten der Initialisierungsfunktion mit document.getElementsByTagName("LI") wie mit document.all.tags("LI").

Gruß Gernot

[Cybaer]

Hi,

Ich gehe hier (Vorsicht Denglish:) "quick'n dirty" einfach davon aus, dass in 99% der Fälle der Browser des Nutzers schon zumindest eines der beiden Objekte verstehen wird.

Ja, OK. Bin halt davon ausgegangen, daß ein Surfer das mal im Archiv finden könnte und denkt: Uih, fein. Genauso brauche ich das!" =;-)

So brauchte Opera z. B. bei http://www.sprachlernspiele.de/selftests/klappmenue/index.html mit einer zugegeben extrem langen verschachtelten Liste dreimal so lange zum Abarbeiten der Initialisierungsfunktion mit document.getElementsByTagName("LI") wie mit document.all.tags("LI").

Hmm, das würde in der Tat dafür sprechen, immer all als erstes abzufragen. Aber für ernsthaftes JS ist Opera (8er kenne ich noch nicht) ja ohnehin nur bedingt zu gebrauchen ... >:->

Gruß, Cybaer

[Gernot Back]

Hallo Cybaer,

Ja, OK. Bin halt davon ausgegangen, daß ein Surfer das mal im Archiv finden könnte und denkt: Uih, fein. Genauso brauche ich das!" =;-)

Du hast recht, ich werde mir in Zukunft mehr Mühe geben:

  
function init() {  
    if(document.all) {  
      tck = document.all.ticker;  
    } else {  
      if (document.getElementById) {  
         tck = document.getElementById('ticker');  
      } else  
          return;  
    }  
    if((txt = tck.innerHTML) && tck.offsetWidth && screen.width) {  
    // nein,^ kein Schreibfehler, tatsächlich Zuweisung!  
      do {  
        divisor++;  
        tck.innerHTML +=  ' ' + txt;  
      } while(tck.offsetWidth < screen.width*2);  
      step();  
    }  
}  

Bist du jetzt zufrieden mit mir? Schau bitte noch mal drüber!
;-)

Gruß Gernot

[Cybaer]

Hi,

if((txt = tck.innerHTML) && tck.offsetWidth && screen.width) {

screen könnte gar nicht erst vorhanden sein (also: screen && screen.width).

Bist du jetzt zufrieden mit mir? Schau bitte noch mal drüber!
;-)

Ungetestet, aber theoretisch für OK gefunden. ;-)

Gruß, Cybaer

[Cybaer]

Hi,

Ich würde dir einfach das MARQUEE-Element als Ticker vorschlagen. Auch wenn das nicht W3C-Standard ist, so wird es doch von allen modernen Browsern interpretiert (Wer benutzt schon noch Netscape 4.X?).

Nur daß in Nicht-IEs der MARQUEE-Content unbrauchbar ist und es beschissen aussieht, wenn JS deaktiviert ist. Und mit JS ist man nicht mehr auf MARQUEE angewiesen. ;->

Gruß, Cybaer

[Gernot Back]

Hallo Cybaer,

Nur daß in Nicht-IEs der MARQUEE-Content unbrauchbar ist und es beschissen aussieht, wenn JS deaktiviert ist. Und mit JS ist man nicht mehr auf MARQUEE angewiesen. ;->

Das stimmt nicht, in meinen Nicht-IE-Browsern (Mozilla 1.7.2, Netscape 7.1 und Opera 7.54 unter Win98) wird der MARQUEE-Content nicht nur dargestellt, sondern auch wie gewünscht ohne JS animiert. Vielleicht kapituliert ja auch das W3C bald vor solch geballten Realitäten und erklärt es zum Standard.

Aber du siehst ja, ich gebe mir Mühe, damit ein Lauftext auch jetzt schon W3C-konform darstellbar ist:
https://forum.selfhtml.org/?t=106821&m=663051
Ich will dann demnächst auch noch versuchen, dort was mit dem Layerobjekt für die ollen Netscape 4.Xer einzubauen.

Gruß Gernot

[Cybaer]

Hi,

Das stimmt nicht, in meinen Nicht-IE-Browsern (Mozilla 1.7.2, Netscape 7.1 und Opera 7.54 unter Win98) wird der MARQUEE-Content nicht nur dargestellt, sondern auch wie gewünscht ohne JS animiert.

Is nich wahr? Die haben alle den Bug entfernt? Respekt! :-)

Gruß, Cybaer

[Gernot Back]

Hallo Cybaer,

Is nich wahr? Die haben alle den Bug entfernt? Respekt! :-)

Cheatah würde jetzt sagen "eingebaut", wetten dass?

Gruß Gernot

[Orlando]

Hallo Gernot,

in meinen Nicht-IE-Browsern (Mozilla 1.7.2, Netscape 7.1 und Opera 7.54 unter Win98) wird der MARQUEE-Content nicht nur dargestellt, sondern auch wie gewünscht ohne JS animiert.

Das sind noch längst nicht alle, siehe Browser-Icons.

Vielleicht kapituliert ja auch das W3C bald vor solch geballten Realitäten und erklärt es zum Standard.

Das kann uns blühen, siehe CSS3 marquee.

Grüße
Roland