vernünftiger Newsticker

[Payne_of_Death]

Hey,

ich überlege seit neuem wie ich einen vernünftigen Ticker generiere der folgendermaßen aussieht....

- bestimmter Bereich indem kontinuierlich eine Zeile dargestellt wird und nach Ablauf einer bestimmten Zeit weitergescrollt wird zur nächsten News (mit anderen Worten einen vertikalen Ticker).
- Dabei soll der Lauftext in einer flüssigen Bewegung sein also nicht abgehakt wirken. (weicher Übergang)
-Events wie onmouseover(); sollten den Ticker pausieren

Hab mir überlegt dies über Javascript zu realisieren.
Und da würde sich die Eigenschaft clip anbieten.
da dies aber zum <layer> Tag gehört und von W3C abgelehnt wird und im Mozilla nicht implementiert ist lehne ich das auch ab.

Was bleibt ist meine Ratlosigkeit die auch das www nicht beantworten konnte.....Nach Suchbegriffen wie Newsticker findet man Ticker die via <layer> und clip realisiert wurden....

Für Javascript Ideen wäre ich dankbar ansonsten darf ich mich mit dem ActionScript wohl anfreunden

EDIT:

---

Nachtrag: position:absolute wird dabei häufig verwendet

---

[S.Oliver]

Warum soll clip nicht funktionieren? Ich selbst schon animierte Menüs und sowas mit clip gemacht und die Funktionieren in so ziemlich allen Browsern. Es kann zwar sein, dass clip keine offizielle CSS Eigenschaft ist, allerdings ist das dem W3C ziemlich egal, weil Du die Eigenschaft ja erst nachträglich mit JS vergibst und von daher ist es dem validator egal.

[derHund]

allerdings ist das dem W3C ziemlich egal, weil Du die Eigenschaft ja erst nachträglich mit JS vergibst und von daher ist es dem validator egal.

L. O. L.

[Payne_of_Death]

Original geschrieben von S.Oliver
[....]allerdings ist das dem W3C ziemlich egal, weil Du die Eigenschaft ja erst nachträglich mit JS vergibst und von daher ist es dem validator egal.

Würdest Du auf diese Aussage auch dein Leben verwetten?

[Hopka]

Mach doch ein div mit overflow: hidden. Darein kommt noch ein div, dessen margin-top du per JS immer weiter runtersetzt.
Probleme könnten nur auftreten, wenn du den Wert von marginTop per JavaScript dynamisch auslesen willst, weil du sowas wie '-20px' rauskriegst, und damit lässt sicht nicht rechnen. Im Endeffekt gibt das dann viel unsauberen Code mit globalen Variablen und so, aber naja, ist ja nur JavaScript...

[S.Oliver]

Original geschrieben von Payne_of_Death
Würdest Du auf diese Aussage auch dein Leben verwetten?

Guckst Du da -> http://i-linkz.com/
Die Mouseover Effekte sind mit clip gemacht.

[wahsaga]

Re: vernünftiger Newsticker

Original geschrieben von Payne_of_Death
Und da würde sich die Eigenschaft clip anbieten.
da dies aber zum <layer> Tag gehört und von W3C abgelehnt wird und im Mozilla nicht implementiert ist lehne ich das auch ab.

du möchtest dich vermutlich mal über die CSS-eigenschaft clip informieren.

[Payne_of_Death]

Re: Re: vernünftiger Newsticker

Original geschrieben von wahsaga
du möchtest dich vermutlich mal über die CSS-eigenschaft clip informieren.

Ja möchte ich

Gut es geht auch mit einem <div> Konstrukt
aber das hier ist nunja nicht gut:

Sowohl bei Netscape also auch beim Internet Explorer war die clip-Eigenschaft nur im Zusammenhang mit absolut positionierten Elementen nachvollziehbar.

im W3C steht auch nichts anderes:

The 'clip' property applies only to absolutely positioned elements.

[schlimmerfinger]

Original geschrieben von Hopka
Mach doch ein div mit overflow: hidden. Darein kommt noch ein div, dessen margin-top du per JS immer weiter runtersetzt.
Probleme könnten nur auftreten, wenn du den Wert von marginTop per JavaScript dynamisch auslesen willst, weil du sowas wie '-20px' rauskriegst, und damit lässt sicht nicht rechnen. Im Endeffekt gibt das dann viel unsauberen Code mit globalen Variablen und so, aber naja, ist ja nur JavaScript...

Das ist die beste vorgehensweise.

http://www.isadorn.com/de/handschrift/worte/index.htm
http://hiphop.de/ <-SMS Ticker

Hier eine Funktion womit man das Element Browserübergreifend Referenzieren
kann.

function getLayRef(id, document) {
    if (!document)
        document = window.document;
    
    if (document.layers) {
        for (var i=0; i<document.layers.length; i++)
            if (document.layers[i].id == id)
                return document.layers[i];
        for (var i=0; i<document.layers.length; i++)
            var result = getLayRef(id, document.layers[i].document)
        if (result)
            return result
    } else if (document.all) {
        return document.all[id];
    } else if (document.getElementById) {
        return document.getElementById(id);
    }
} 

Beispiel:

<div id="test">Hallo</div>
<script>
<!--
var testObj = getLayRef('test');

if (document.layers) {
    testObj.visibility = (testObj.visibility == 'hide')?'show':'hide';
} else {
    testObj.style.visibility = (testObj.style.visibility == 'hidden')?'visible':'hidden';
}

/* oder auch */
if (document.layers) {
    getLayRef('test').visibility = (getLayRef('test').visibility == 'hide')?'show':'hide';
} else {
    getLayRef('test').style.visibility = (getLayRef('test').style.visibility == 'hidden')?'visible':'hidden';
}

//-->
</script> 

cheers