✔ stinknormaler Ticker mit Schleife

Berlinthor · 25. Februar 2004

Hallo liebe Leutz, viele von Euch werden bestimmt ganz unverständlich den Kopf schütteln, aber...

...ich brauche einen stinknormalen Ticker! Und wer glaubt, es gibt überall und an jeder Ecke die alle Ticker dieser Welt, der irrt sich gewaltig. Ich bin nämlich jetzt schon seit gut einer Stunde auf der Suche, nach dem wohl einfachsten Ticker der Menschheit und das frustet mich tierisch!

Folgendes: Ich brauch einen Newsticker, der ganz normal von rechts nach links scrollt. Dabei in keinem Formularfeld angezeigt wird und anklickbar ist. Dabei sollte der Code nicht so sperrig sein und überschaubar bleiben.

Achja, hätt ich fast vergessen, das wichtigste: Der Ticker muss NATÜRLICH in einer Schleife laufen, d.h. es darf nicht plötzlich "nichts" kommen und dann wieder der Anfang.

Verstanden?

Und wer so einen Ticker hat, der möge mir doch bitte unter die Arme helfen. Ich bin es leid x-mal auf irgendwelche Demoscripte zu klicken um festzustellen, dass es auch nicht das ist was ich suche.

Help me, please!

Danke im Voraus
~J

Andreas Gaisbauer · 25. Februar 2004

Original geschrieben von Berlinthor

Folgendes: Ich brauch einen Newsticker, der ganz normal von rechts nach links scrollt. Dabei in keinem Formularfeld angezeigt wird und anklickbar ist. Dabei sollte der Code nicht so sperrig sein und überschaubar bleiben.

Genau das macht den Ticker nicht ganz so simpel. Ticker im Textfeld wäre kein problem - ist jedoch nicht anklickbar. Ticker in einer DIV geht auch aber nur in IE und Geckos Browsern. Theoretisch kann man da auch einen Link in die Beiträge einbauen. Bei einem Ticker wird ja praktisch der erste Buchstabe abgeschnitten und hinten ein neuer Angehangen. Und genau da ist das Problem - wenn das erste Zeichen eines Links abgeschnitten wird, steht nicht mehr Link im Ticker sondern a href="url.html">Link"</a> und der Link ist geschrottet. Man müsste versuchen die Message in einen Layer zu packen und diesen Scrollen zu lassen ohne die Message ansich zu beschneiden. Da wirds dann aber mit der gewünschten Schleife wieder schwerer. Ich werds heute nacht mal versuchen kann dir aber nichts versprechen...

Wenn einer sich berufen fühlt das schnell aus dem Ärmel zu schütteln nur zu

"schiel zu Fabian && Fatalus"...

bye

xollo · 25. Februar 2004

Hi,
ausser das dieser Ticker in einer Schleife läuft erfüllt er wohl sonst alles was du suchst.
Probier es doch einfach einfach mal aus.

PHP:

<SCRIPT language=javascript1.2>
//Hintergrundbreite der Laufschrift in Pixel
var marqueewidth="500"
//Hintergrundhöhe der Laufschrift in Pivel
var marqueeheight="20"
//Geschwindigkeit (größer ist schneller 1-10)
var marqueespeed=2
//Hintergrundfarbe:
var marqueebgcolor=""
//Pause bei Mouseover (0=nein 1=ja)
var pauseit=1

//Hier den Newstext eingeben (<nobr> tag muß bleiben!)
var marqueecontent='<nobr><font face="Arial, Helvetica, Sans-Serif" color="" size="3">hier deinen Text rein</font></nobr>'



marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"

}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}

</SCRIPT>

läuft in IE, NN, Opera

gruss xollo

Sven Mintel · 25. Februar 2004

Hier auch der von mir eingeklagte Beitrag...nahtlos schleifend und mit klickbaren Links:

Code:

<script type="text/javascript">
<!--
//Ticker sollte laufen in Geckos, Opera7 und IE5+
//Den ganzen Skriptblock(oder die Referenz zum Skript... falls extern) dorthin in die Seite
//tun, wo der Ticker ticken soll
//das Aussehen kann per CSS angepasst werden.... als SELECTOR ist dabei "#ticker" zu verwenden



//°°°°°°°°°°°°°°>Der Text....keine <br> und keine Zeilenumbrueche erbeten
tText=' + + + Dies ist ein <b>Tickertext </b>mit klickbarem <a href="http://www.tutorials.de"target="_blank">Link</a>';

//°°°°°°°°°°°°°°>Zeit zwischen jedem "Tick" in msec
tInterval=200;

//°°°°°°°°°°°°°°>Sollte Leeraum im Ticker entstehen, hier einen hoeheren Wert waehlen
tNr=4;



//°°°°°°°°°°°°°°>Der Ticker
if(document.getElementsByTagName('title')&&document.getElementsByTagName('title')[0].innerHTML)
    {
    tCnt=0;
    tHtml='<span>'+tText+'</span>';
    document.write('<pre id="ticker"style="overflow:hidden;">');
    for(i=0;i<tNr;++i){document.write(tHtml);}
    document.write('</pre>');

    function ticken()
        {
        tObj=document.getElementById('ticker');
        tTxt=String(tObj.firstChild.innerHTML);
        isTag=false;isTxt=false;
        for(i=0;i<tTxt.length;++i)
            {
            if(tTxt.charAt(i)=='>')
                {
                isTag=false;continue;
                }
            if(tTxt.charAt(i)=='<')
                {
                isTag=true;continue;
                }
            if(!isTag)
                {
                tObj.firstChild.innerHTML=tTxt.substring(0,i)+tTxt.substring(i+1,tTxt.length);
                isTxt=true;break;
                }
            }
        if(!isTxt)
            {
            tObj.removeChild(tObj.firstChild);
            tObj.innerHTML+=tHtml;
            }
        }
    setInterval("ticken()",tInterval);
    }
//-->
</script>

Er ist vom Umtausch ausgeschlossen

Aussehen tut er so.

Berlinthor · 26. Februar 2004

mmmh...

Na das lässt mich ja wenigstens hoffen!

Also, der Ticker von fatalus kommt dem schon am nächsten, was ich suche.
Aber (musste ja kommen), der ruckelt so krass! Mein Chef will keinen Ticker der ruckelt. Und auch ich würde einen etwas sanfteren Ticker bevorzugen. Aber ich glaub ich muss kriegen was ich kriegen kann. verdammt. warum ruckelt der so mmmh...

gibs verbesserungen? *schämt sich, weil er kein javascript kann*

~J

Berlinthor · 26. Februar 2004

zu dem Ticker von Xollo

Also eigentlich schade! Wenn hier ne Schleife drin wär, dann wärs das schon!

kann man da was machen?

~J

Sven Mintel · 26. Februar 2004

Re: mmmh...

Original geschrieben von Berlinthor
verdammt. warum ruckelt der so mmmh...
~J

Der ruckelt nicht, der tickt...
Wenn du genau hinschaust, schneidet er vorne ein Zeichen ab.... halt ein Ticker...kein Roller.

Mal sehn...vielleicht mach ich noch nen Roller... aber nicht heute

Berlinthor · 26. Februar 2004

Roller?

Macht man da Unterschiede? Ob Roller oder Ticker Also dann brauch ich nen Roller!

Wenn du das kannst, wär mir das eine große Hilfe!

~J

Berlinthor · 26. Februar 2004

Alternative

Also... ich hab mir mal jetzt den Shortnewsticker angeschaut, und der macht ja eigentlich alles, wie ich es will. Nur dass er halt sich die News von einer anderen Adresse holt. Und nachdem ich die beiden dazugehörigen js-Files gedownloadet habe, sehe ich dort, dass dort irgendwie mit "switch" die Rubriken der News abgefragt wird. Keine Ahnung. Jedenfalls möchte ich es mal wagen, hier zu fragen, ob mir das jemand so umschreiben kann, dass statt der Short-News beliebiger Text eingetragen werden kann.

Im Nachfolgendem der Code der html-datei, und der beiden js-files (a.js und b.js).

Code:

<html>
<head>
	<title>Untitled</title>
	<script type="text/javascript">
var tickerwidth = 753;
var tickercolor = "#000000";
var fontcolor = "#FFFFFF";
var splitcolor = "#ffffff";
var fontsize = 11;
var visitedlink = "#ffffff";
var rollovercolor = "#ffff00";
var font = "Arial";
var speed = 2;
var sparte = 4;
var rubrik = 13;
var rollover_underline = 1;
var font_underline = 0;
var transparent = 0;
var fontbold = 0;
var tickertyp = 1;
var u_id = 320908;
</script>
</head>

<body>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
 


</body>
</html>

a.js:

Code:

var fehler=true;

// Routine für einlesen des Contents
news=new Array();


var pfad = 'http://newsticker.shortnews.de/de/export/js/'

switch(sparte)
{
 case 1:
 var spa = ('h')
 break;
 case 2:
 var spa = ('s')
 break;
 case 3:
 var spa = ('t')
 break;
 case 4:
 var spa = ('a')
 break;
} 

switch(rubrik)
{
 case 1:
 var rub = ('hig')
 break;
 case 2:
 var rub = ('bre')
 break;
 case 3:
 var rub = ('ent')
 break;
 case 4:
 var rub = ('wir')
 break;
case 5:
 var rub = ('spo')
 break;
 case 6:
 var rub = ('pol')
 break;
 case 7:
 var rub = ('fre')
 break;
 case 8:
 var rub = ('reg')
 break;
 case 9:
 var rub = ('wis')
 break;
 case 10:
 var rub = ('ges')
 break;
 case 11:
 var rub = ('kul')
 break;
 case 12:
 var rub = ('aut')
 break;
 case 13:
 var rub = ('all')
 break;
 
} 


switch(spa)
{
 
 
 case 'a':
 
 var datei = rub+'_'+tickertyp+'.js';

 break;
 default:
 
 var datei = spa +'_'+ rub+'_'+tickertyp+'.js';
 
 break;
} 



var content = pfad + datei; 

var ax = '<SCRIPT language="JavaScript" SRC="'+content+'" TYPE="text/javascript"><\/SCRIPT>';


document.write(ax);

if (fehler==true)

{
news=new Array()
news[0]="<a class='shortnews' onclick='return false' href='x.htm'>ShortNews wird gewartet, wir bitten um Verständnis.</a>";
news[1]="<a class='shortnews' onclick='return false' href='x.htm'>Der Newsticker ist in Kürze wieder verfügbar.</a>";
news[2]="<a class='shortnews' onclick='return false' href='x.htm'>Der Newsticker ist in Kürze wieder verfügbar.</a>";

}

b.js:

Code:

function Ticker(name, id, shiftBy, interval)
{
  this.name     = name;
  this.id       = id;
  this.shiftBy  = shiftBy ? shiftBy : 1;
  this.interval = interval ? interval : 100;
  this.runId	= null;

  this.div = document.getElementById(id);



  var node = this.div.firstChild;
  var next;

  while (node)
  {
    next = node.nextSibling;
    if (node.nodeType == 3)
      this.div.removeChild(node);
    node = next;
  }


 
  this.left = 0;
  this.shiftLeftAt = this.div.firstChild.offsetWidth;
  this.div.style.height	= this.div.firstChild.offsetHeight;
  this.div.style.width = 2 * screen.availWidth;
  this.div.style.visibility = 'visible';
}

function startTicker()
{
  this.stop();
  
  this.left -= this.shiftBy;

  if (this.left <= -this.shiftLeftAt)
  {
    this.left = 0;
    this.div.appendChild(this.div.firstChild);
  
    this.shiftLeftAt = this.div.firstChild.offsetWidth;
  }

  this.div.style.left = (this.left + 'px');

  this.runId = setTimeout(this.name + '.start()', this.interval);
}

function stopTicker()
{
  if (this.runId)
    clearTimeout(this.runId);
    
  this.runId = null;
}

function changeTickerInterval(newinterval)
{

  if (typeof(newinterval) == 'string')
    newinterval =  parseInt('0' + newinterval, 10); 
	
  if (typeof(newinterval) == 'number' && newinterval > 0)
    this.interval = newinterval;
    
    this.stop();
    this.start();
}


Ticker.prototype.start = startTicker;
Ticker.prototype.stop = stopTicker;
Ticker.prototype.changeInterval = changeTickerInterval;



if (window.tickercolor) {var farbe='bgcolor="'+tickercolor+'"';}
else {var tickercolor="#ffffcc";} 

if (window.tickercolor){var farbe='bgcolor="'+tickercolor+'"';}
else {var farbe="";} 


var farbe=tickercolor;

if (window.transparent)
{

if (transparent==1) { var farbe="";}

else {var farbe=tickercolor;}

}



if (rollover_underline==false) { var textdecoration_underline = 'none';}
else {var textdecoration_underline = 'underline';}

if (rollover_underline==null) { var rollover_underline =1;}
if (font_underline==null) { var font_underline =0;}
if (fontbold==null) { var fontbold=0;}
if (rollover_underline==0) { var textdecoration_underline = 'none';}
else {var textdecoration_underline = 'underline';}
if (font_underline==1) { var font_underline = 'underline';}
else {var font_underline = 'none';}
if (fontbold==1) { var textdecoration_fontbold = 'bold';}
else {var textdecoration_fontbold = 'normal';}


// style

document.open();
document.write('<style type=\"text/css\">');            
document.write('.shortnews:link{vertical-align:middle;color:'+fontcolor+';text-decoration:'+font_underline+';font-weight:'+textdecoration_fontbold+';font-family:'+font+';font-size:'+fontsize+'px}'); 
document.write('.shortnews:visited{vertical-align:middle;color:'+fontcolor+';text-decoration:'+font_underline+';font-weight:'+textdecoration_fontbold+';font-family:'+font+';font-size:'+fontsize+'px}'); 
document.write('.shortnews:hover{vertical-align:middle;color:'+rollovercolor+';font-weight:'+textdecoration_fontbold+';font-family:'+font+';font-size:'+fontsize+'px;text-decoration:'+textdecoration_underline+'}'); 
document.write('.shortnews:active{vertical-align:middle;color:'+fontcolor+';font-weight:'+textdecoration_fontbold+';text-decoration:none;font-family:'+font+';font-size:'+fontsize+'px;text-decoration:'+textdecoration_underline+'}'); 
document.write('.x1{vertical-align:middle;color:'+splitcolor+';font-weight:'+textdecoration_fontbold+';text-decoration:none;font-family:'+font+';font-size:'+fontsize+'px}'); 
document.write('.tickerLabel{font-family:'+font+';font-weight:bold;vertical-align:middle;font-size:11px;color:#'+farbe+'}'); 
document.write('.container{position:relative;height:20px;width:'+tickerwidth+'px;overflow:hidden;background-color:'+farbe+'}'); 
document.write('.ticker{position:relative;visibility:hidden;left:0px;top:0px;border-width:0px;border-style:none;font-size:12px;font-weight:bold;width:'+tickerwidth+'px;height:20px;vertical-align:middle}'); 
document.write('.clstsu{PADDING-RIGHT:2em;PADDING-LEFT:2em;PADDING-BOTTOM:2px;MARGIN:0px;CURSOR:pointer;COLOR:green}'); 
document.write('.clstsd{PADDING-RIGHT:2em;PADDING-LEFT:2em;PADDING-BOTTOM:2px;MARGIN:0px;CURSOR:pointer;COLOR:red}'); 
document.write('.clstimg{WIDTH:18px;HEIGHT:12px}'); 
document.write('</style>') 
document.close();

// content

var textcontent;

var i = 0;

textcontent="";

 for(i = 0; i <= 15; i++)
  {
   if (news[i]==null) {break;}

textcontent+="<span class='banner'>&nbsp;&nbsp;"+news[i]+"<span class='x1'>&nbsp;&nbsp;&nbsp;+&nbsp;+&nbsp;+&nbsp;</span></span>"
   textcontent+"&nbsp;&nbsp;"

}	

textcontent+"";

m=textcontent;



	var ticker = null; /* ticker object */

var ts=speed*7;	

function init()
	{
		
ticker = new Ticker('ticker', 'tickerID', 1, ts);
		ticker.start();
	}

document.open();
document.write("<div align='left' class='container'>");
document.write("<div class='ticker' id='tickerID' onMouseOver='ticker.stop();' onMouseOut='ticker.start();'>");
document.write("<nobr>");
document.write(m+m+m+m+m+m);
document.write("</nobr>");
document.write("</div>");
document.write("</div>");
document.close();


init()

Sven Mintel · 27. Februar 2004

Neuer Tag...neuer Ticker

Code:

<script type="text/javascript">
<!--
/* * * * * * * * * * * * * * * * D I E  V A R I A B L E N * * * * * * * * * * * * * * * * * */
tNews=new Array();

//°°°°°°°°°°Die News
tNews[0]='Neu bei <a href="http://www.tutorials.de">tutorials.de</a>...noch nen Ticker!';
tNews[1]='Der Ticker tickt jetzt nicht mehr,sondern rollt :o)';
tNews[2]='im Rahmen der allgemeinen Sparmassnahmen wurde der Code weiter dezimiert';
tNews[3]='Update in der Morgend&auml;mmerung:jetzt tickt er auch in Tabellen!';

//°°°°°°°°°°Delimiter zwischen den einzelnen News
tDelimiter  =' + + + ';

//°°°°°°°°°°Interval in ms
tInterval   =10;

//°°°°°°°°°°Stop bei mouseover?true:false
tStop       =true;

//°°°°°°°°°°Falls Leeraum zwischen News...hier Wert erhoehen...minimum:1
tRepeat     =2;

//°°°°°°°°°°Rahmen
tBorder     ='1px solid #818181';

//°°°°°°°°°°Breite
tWidth      =300;

//Abstand Rahmen->Inhalt (top+bottom)
tPadding    =1;

//Das Aussehen per CSS anpassbar unter Verwendung des Selectors #ticker

/* * * * * * * * * * * * * * * * * * D E R  T I C K E R * * * * * * * * * * * * * * * * * * * * * */
IE=document.all&&!window.opera;DOM=document.getElementById&&!IE;
if(DOM||IE)
    {
    var tGo;tPos=0;tStop=tStop?'onmouseover="clearInterval(tGo)"'+
    'onmouseout="tGo=setInterval(\'DM_ticken()\','+tInterval+')"':'';
    tTxt=tDelimiter+tNews.join(tDelimiter);tNews=tTxt;
    for(i=1;i<tRepeat;++i){tNews+=tTxt;}document.write
    ('<div style="overflow:hidden;border:'+tBorder+';width:'+
     tWidth+'px;padding:'+tPadding+'px 0px '+tPadding+'px 0px;">'+
     '<nobr><span id="ticker"style="position:relative;"'+tStop+'>'+
     tNews+'</span></nobr></div>');
    tObj=IE?document.all.ticker:document.getElementById('ticker');
    function DM_ticken(){tOffset=tObj.offsetWidth/tRepeat;
    if(Math.abs(tPos)>tOffset){tPos=0;}tObj.style.left=tPos;tPos--;}
    tGo=setInterval('DM_ticken()',tInterval);
    }
//-->
</script>

--->Test

✔ stinknormaler Ticker mit Schleife

Berlinthor

Grünschnabel

Andreas Gaisbauer

Erfahrenes Mitglied

xollo

Mitglied

Sven Mintel

Mitglied

Berlinthor

Grünschnabel

Berlinthor

Grünschnabel

Sven Mintel

Mitglied

Berlinthor

Grünschnabel

Berlinthor

Grünschnabel

Sven Mintel

Mitglied

Neue Beiträge