Tweet
Hallo zusammen,
mich beschäftigt jetzt seit einigen Tagen ein Problem, das ich einfach nicht auf die Kette bekomme. Ich konnte auch nach stundenlanger Suche keine Lösung finden, die mich essenziell weiter gebracht hätte.
Ich hätte gerne eine DIV Scroller Lösung, funktional exakt wie sie auf http://www.renault.de/ zu sehen ist.
In der Mitte bei "Neuwagen" und "Transporter" kann man sich durch das Menü scrollen, dass passiert automatisch, je nach dem wo sich die Maus gerade befindet. Auf dieser Seite ist das mit Flash gelöst, ich hätte jedoch gerne eine saubere und vor allem barrierefreie und suchmaschinengerechte Version, weshalb das Menü grundsätzlich komplett angezeigt werden soll, und für JS Browser eben anständig formatiert. Damit fällt auch weg, dass ich den Inhalt irgendwie mit JavaScript und innerHTML oder document.write einbringe!
Hier mal mein primitiver Code bisher:
Soweit so gut. Ich prüfe die Höhe des Scrollers und je nach dem ob der Mauszeiger in der oberen Hälfte oder der unteren ist, erhöhe oder veringere ich das margin des darin befindlichen <ul> Elements.
Das Problem ist, dass ich nur scrolle, wenn ich die Maus bewege. Ich dachte mir dem rekursiven Aufruf (hier auskommentiert) käme ich dann soweit, dass er weiter scrollt. Dann läuft er aber in einen timeout mit "out of memory" Fehler. Zudem habe ich noch keine Idee, wie ich dem Script beibringen kann, dass wenn er unten angekommen ist, er nicht mehr weiter das margin erhöhen soll.
An eine weiche Scrollfunktion oder gar das abbremsen bzw. je nach Mausposition schnellere oder langsamere scrollen ist auch noch nicht zu denken, letzteres bekäme ich aber schon hin.
Ist hier irgendwer der mir da helfen kann? Wie gesagt, je näher es an diese Flash Funktion herankommt, umso besser. Zudem liebe ich es gerne einfach. Am liebsten wäre natürlich, dass ich diese Funktion mit Parametern immer wieder überall aufs neue einbinden kann, und die Funktion zentral irgendwo in einer JS-Datei unterbringen kann.
Gruß
Armin
mich beschäftigt jetzt seit einigen Tagen ein Problem, das ich einfach nicht auf die Kette bekomme. Ich konnte auch nach stundenlanger Suche keine Lösung finden, die mich essenziell weiter gebracht hätte.
Ich hätte gerne eine DIV Scroller Lösung, funktional exakt wie sie auf http://www.renault.de/ zu sehen ist.
In der Mitte bei "Neuwagen" und "Transporter" kann man sich durch das Menü scrollen, dass passiert automatisch, je nach dem wo sich die Maus gerade befindet. Auf dieser Seite ist das mit Flash gelöst, ich hätte jedoch gerne eine saubere und vor allem barrierefreie und suchmaschinengerechte Version, weshalb das Menü grundsätzlich komplett angezeigt werden soll, und für JS Browser eben anständig formatiert. Damit fällt auch weg, dass ich den Inhalt irgendwie mit JavaScript und innerHTML oder document.write einbringe!
Hier mal mein primitiver Code bisher:
PHP-Code:
<style>
#scroll{
overflow:hidden;
width:200px;
height:100px;
border:1px solid #CCC;
background: #F4F4F4;
}
</style>
<script>
iTop = 0;
function DoIt(obj,evt,content)
{
intTop = (evt.offsetY) ? evt.offsetY : evt.layerY;
objMdl = obj.offsetHeight / 2;
if(intTop < objMdl)
{
window.status="oben"; //debug
iTop=iTop+2;
document.getElementById(''+content+'').style.marginTop=iTop;
//window.setTimeout(DoIt(obj,evt,content), 1000);
}
if(intTop > objMdl)
{
window.status="unten"; //debug
iTop=iTop-2;
document.getElementById(''+content+'').style.marginTop=iTop;
//window.setTimeout(DoIt(obj,evt,content), 1000);
}
}
</script>
<body>
<div id="scroll" onmouseover="DoIt(this,event,'content')">
<ul id="content">
<li>1</li>
<li>2</li>
<li>321</li>
<li>421</li>
<li>521</li>
<li>621</li>
<li>6721</li>
<li>343243241</li>
<li>1sadsad</li>
<li>1sad</li>
<li>1wqeqweqwes</li>
<li>1asdsadsadsad</li>
<li>1asdsad</li>
</ul>
</div>
Das Problem ist, dass ich nur scrolle, wenn ich die Maus bewege. Ich dachte mir dem rekursiven Aufruf (hier auskommentiert) käme ich dann soweit, dass er weiter scrollt. Dann läuft er aber in einen timeout mit "out of memory" Fehler. Zudem habe ich noch keine Idee, wie ich dem Script beibringen kann, dass wenn er unten angekommen ist, er nicht mehr weiter das margin erhöhen soll.
An eine weiche Scrollfunktion oder gar das abbremsen bzw. je nach Mausposition schnellere oder langsamere scrollen ist auch noch nicht zu denken, letzteres bekäme ich aber schon hin.
Ist hier irgendwer der mir da helfen kann? Wie gesagt, je näher es an diese Flash Funktion herankommt, umso besser. Zudem liebe ich es gerne einfach. Am liebsten wäre natürlich, dass ich diese Funktion mit Parametern immer wieder überall aufs neue einbinden kann, und die Funktion zentral irgendwo in einer JS-Datei unterbringen kann.
Gruß
Armin
Kommentar