stinknormaler Ticker mit Schleife @ tutorials.de: Tutorials, Forum & Hilfe

Berlinthor · 25.02.04 16:12

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.02.04 18:06

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.02.04 19:23

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-Code:


<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.02.04 22:44

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.02.04 11:15

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.02.04 11:18

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

kann man da was machen?

~J

Sven Mintel · 26.02.04 12:01

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.02.04 12:05

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.02.04 16:37

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.02.04 03:12

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

Berlinthor · 27.02.04 10:11

Na da issa ja, der Ticker, der nicht ticken tut, sondern rollt! Super! Ich danke Dir echt! Hast mir echt geholfen. Coole Sache Parker. Du hast es drauf!

~J

Berlinthor · 27.02.04 10:40

mmmh... also wenn der Ticker alleine steht, er. Sobald ich ihn aber in meiner Seite einbaue, bewegt er sich nicht einen Pixel weit! Ich wollte ihn in einer schon vorbereiteten Tabellenzelle stecken. Hab also das javascript in den <td>-Tag gepackt und niX passiert.

mmmh... ne Ahnung?

~J

Berlinthor · 27.02.04 11:02

sobald ich den Ticker-Code in einer einfachen Tabelle pack, bewegt er sich nicht. Wenn er in einer Tabellenzelle nicht , wie kann ich ihn denn trotzdem zum Laufen bringen? Den Code in den head-Bereich und den Funktionsaufruf in der Tabellenzelle?

Kannst du das vielleicht mal checken

~J

Sven Mintel · 27.02.04 12:36

Verwende keine Tabellen ... dann gehts

Scherz... habs geändert, läuft jetzt auch in Tabellen.

Berlinthor · 27.02.04 12:48

Jo, das issa! Ey du bist mein Held!

SPECIAL THANX
sagt
Jörg aus Berlin

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Ticker im DIV

Ticker im DIV

stinknormaler Ticker

Ticker

Ticker

E-Mail:

Abonnieren Abbestellen