mein "Schieberegler" geht nicht im NN 4.x
Rol
- dhtml
Hi,
ich möchte auf einer site so etwas wie einen horizontalen Schieberegler einbauen.
Wenn ich den "Reglerknopf" in eine Tabelle einbaue, geht unter NN 4.x nix mehr, im IE ist alles ok.
Wenn <div>...</div> außerhalb der Tabelle steht, gehts auch im NN, aber dann stimmt die Positionierung natürlich nicht.
Kann mir jemand sagen was ich falsch mache:
hier die url:
http://www.floridee.de/Schieberegler_horizontal_NN2.htm
hier der code:
<html>
<head>
<title>Test</title>
<SCRIPT language=JavaScript type=text/javascript>
<!--
var position;
function init() {
NN= document.layers ? true : false;
IE= document.all ? true : false;
if (NN) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
document.onmousedown = startDrag;
document.onmouseup = endDrag;
}
function startDrag(e) {
var found = false;
if (NN) {
// Netscape
var gefunden = 0;
var obj = document.slider;
// Ueberpruefen, wob Schieberegler angeklickt wurde
if ((e.pageX > obj.left) && (e.pageX < obj.left + obj.clip.width) && (e.pageY > obj.top) && (e.pageY < obj.top + obj.clip.height)) gefunden = true;
if (gefunden) {
current = document.slider;
dx = e.pageX - current.left;
// Event-Capturing
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = drag;
return false;
}
}
if (IE) {
// MSIE
var obj = window.event.srcElement;
if (obj.parentElement.id.indexOf("slider") != -1) {
current = obj.parentElement.style;
dx = window.event.clientX - current.pixelLeft;
document.onmousemove = drag;
return false;
}
}
// Benutzer hat nicht auf den Schieberegler geklickt
current = null;
return false;
}
function drag(e) {
// Der Schieberegler wird positioniert und der Regelbereich dabei auf die Höhe
// der Reglerskala begrenzt (die erfreulicherweise 100 Pixel hoch ist, andernfalls
// muss hier noch umgerechnet werden):
if (current != null) {
var max = 217;
var min = 5;
if (NN) {
current.left = e.pageX - dx;
// if (current.left<min) current.left=min;
// if (current.left>max) current.left=max;
var position=current.left;
}
if (IE) {
current.pixelLeft = window.event.clientX - dx;
// if (current.pixelLeft<min) current.pixelLeft=min;
// if (current.pixelLeft>max) current.pixelLeft=max;
var position=current.pixelLeft;
}
}
return false;
}
function endDrag(e) {
if (NN) document.releaseEvents(Event.MOUSEMOVE);
document.onmousemove = null;
current = null;
return false;
}
// -->
</script>
</head>
<body onload="init()">
<table border="1">
<tr>
<td>
Hallo
</td>
<td width="200">
<div id="slider" name="slider" style="HEIGHT: 0px; LEFT: 1px; POSITION: relative; TOP: 1px">
<img border="0" src="images/reiterlein/regler2.gif" width="30" height="25">
</div>
</td>
</tr>
</table>
</body>
Danke
Rol