nicht angemeldet
text im div scrollbar machen
Gernot BackHallo,
ich möchte per JavaScript einen Text im div scrollbar machen.
NICHT mit CSS -> overflow:scroll.
Sondern mit Javascript. Dazu möchte ich eigene Pfeil-Buttons für "up" und down "haben".
Das Scrollen habe ich zwar hinbekommen, das Scrollen kann ich aber nicht mehr stoppen. Irgendwo hakt mein script, aber ich weiss nicht wo.
Wenn ich auf "Up", dann soll der Text scollen, wenn ich noch mal auf "up" klicke, soll das Scrollen stoppen.
Schöner wäre es diesen Vorgang mit "onMouseDown" und "onMouseUp" zu handhaben.
Hat jemand einen Tipp für mich?
Hier mein Code:
-----------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#scrollArea
{
width: 200px;
height:200px;
border:1px solid #990000;
overflow:hidden;
}
div#scrollContent
{
width: 200px;
border:1px solid #990000;
overflow:hidden;
position:relative;
top:0px;
left:0px;
}
div#scrollNav
{
width: 200px;
height:20px;
border:1px solid #990000;
}
</style>
<script language="JavaScript" type="text/javascript">
var xOrigPosText;
var xPosText;
var scrollActive = 0;
function getScrollTextPosition()
{
xOrigPosText = 0;
}
function scrollText(mode)
{
var xStep;
if(mode == "stop") { xStep = 0; scrollActive = 0; }
else { xStep = 10; scrollActive = 1;}
if(xPosText == null) { xPosText = xOrigPosText; }
else { xPosText = parseInt(window.document.getElementById("scrollContent").style.top); }
window.document.getElementById("display").firstChild.nodeValue = scrollActive;
if(mode == "up") { xStep = xStep * -1};
window.document.getElementById("scrollContent").style.top = xPosText + xStep + "px";
if(scrollActive)
{
setTimeout("scrollText('" + mode + "')", 100);
}
}
</script>
</head>
<body onLoad="getScrollTextPosition();">
<div id="scrollArea">
<div id="scrollContent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="scrollNav">
SCROLL: <a href="javascript:void(0);" onMouseDown="scrollText('up');" onMouseUp="scrollText('stop');">up</a> -- <a href="javascript:void(0);" onMouseDown="scrollText('down');" onMouseUp="scrollText('stop');">down</a>
</div>
<div id="display">x</div>
</body>
</html>
-----------------------------------------
Gruß,
Floater
-
Lieber floater,
Wenn ich auf "Up", dann soll der Text scollen, wenn ich noch mal auf "up" klicke, soll das Scrollen stoppen.
Schöner wäre es diesen Vorgang mit "onMouseDown" und "onMouseUp" zu handhaben.Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:) -
Hallo floater,
ich möchte per JavaScript einen Text im div scrollbar machen.
NICHT mit CSS -> overflow:scroll.Dann eben
overflow:hidden;!Sondern mit Javascript. Dazu möchte ich eigene Pfeil-Buttons für "up" und down "haben".
Du kannst mit JavaScript nicht nur die style.top-Eigenschaft manipulieren, sondern auch die scrollTop-Eigenschaft des DIV-Elements.
Das Scrollen habe ich zwar hinbekommen, das Scrollen kann ich aber nicht mehr stoppen. Irgendwo hakt mein script, aber ich weiss nicht wo.
Dazu müsstest du mit zwei wechselseitig dynamisch zugewiesenen onclick-Handler-Funktionen arbeiten. Hierzu ein paar Code-Versatzstücke zur Anregung:
meinDIV = document.getElementById('meinButtonScrollDIV'; meinDIV.scrolling = false; meinRunterScrollButton.onclick = function () { meinDIV.runterScrollen(); this.onclick = meinDiv.scrollStop; } meinDIV.runterScrollen = function () { if(meinDIV.scrolling) this.scrolling = false; if(this.scrollTop >= this.scrollHeight) { this.scrollStop(); return; } this.scrollTop += scrollSchrittWertInPixeln; meinDIV.scrolling = window.setTimeout('meinDIV.runterScrollen()', 42); } meinDIV.scrollStop = function () { window.clearTimeout(this.scrolling); this.onclick = runterScrollen; }Entsprechend mit dem Nach-oben-Scrollen verfahren.
Wenn ich auf "Up", dann soll der Text scollen, wenn ich noch mal auf "up" klicke, soll das Scrollen stoppen.
Schöner wäre es diesen Vorgang mit "onMouseDown" und "onMouseUp" zu handhaben.Das fände ich nicht so komfortabel, weil für den Nutzer noch ungewohnter.
Gruß Gernot
-
Hallo Gernot,
> meinDIV.scrollStop = function () { > window.clearTimeout(this.scrolling); > this.onclick = runterScrollen; > } >Ups, Fehler; natürlich musst du den Eventhandler dem Button zuweisen und nicht deinem DIV.
meinDIV.scrollStop = function () { window.clearTimeout(this.scrolling); meinRunterScrollButton.onclick = runterScrollen; }Gruß Gernot
-