Fejl i scroller
HejJeg har fundet mig et scroll-script, men har lige et lille problem når teksten på siden, ikke er lang nok til min div scroller..
se
http://ny.rtbyg.dk/default.asp?s=Page&ID=38&RID=38
klik på scrolleren til højre (den grå bjælke) og se at teksten så hopper ned. (bemærk det ikke er alle steder hvor der klikkes at teksten hopper ned)
Nå, men er der nogle der kan se fejlen ?
Jeg går ud fra fejlen ligger i CSS et sted.
-- på siden--
<table border="0" cellpadding="0" cellspacing="0" width="535" height="326">
<tr>
<td valign="top">
<div id="container" style="width:517px;height:326px;">
<div id="content">
<div class="overskrift"><%=rs("titel")%></div>
<%=rs("indhold")%> </div>
</div>
</td>
<td width="10"> </td>
<td width="8"><div id="scrollArea" style="height:326px;"><div id="scroller"></div></div></td>
</tr>
</table>
-- min css fil --
#container {
position : relative;
overflow : hidden;
}
#content {
position : relative;
}
#scrollArea {
position : relative;
width : 8px;
border : 1px solid #666;
overflow : hidden;
}
#scroller {
position : absolute;
top : -1px;
width : 15px;
background : #AAA;
border-top : 1px solid #666;
border-bottom : 1px solid #666;
}
-- min js fil --
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
**************************************************
* 10.28.2001 - fixed minor bug where events
* sometimes fired off the handle, not the root.
**************************************************/
var Drag = {
obj : null,
init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
o.onmousedown = Drag.start;
o.hmode = bSwapHorzRef ? false : true ;
o.vmode = bSwapVertRef ? false : true ;
o.root = oRoot && oRoot != null ? oRoot : o ;
if (o.hmode && isNaN(parseInt(o.root.style.left ))) o.root.style.left = "0px";
if (o.vmode && isNaN(parseInt(o.root.style.top ))) o.root.style.top = "0px";
if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right = "0px";
if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
o.minX = typeof minX != 'undefined' ? minX : null;
o.minY = typeof minY != 'undefined' ? minY : null;
o.maxX = typeof maxX != 'undefined' ? maxX : null;
o.maxY = typeof maxY != 'undefined' ? maxY : null;
o.xMapper = fXMapper ? fXMapper : null;
o.yMapper = fYMapper ? fYMapper : null;
o.root.onDragStart = new Function();
o.root.onDragEnd = new Function();
o.root.onDrag = new Function();
},
start : function(e)
{
var o = Drag.obj = this;
e = Drag.fixE(e);
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
o.root.onDragStart(x, y);
o.lastMouseX = e.clientX;
o.lastMouseY = e.clientY;
if (o.hmode) {
if (o.minX != null) o.minMouseX = e.clientX - x + o.minX;
if (o.maxX != null) o.maxMouseX = o.minMouseX + o.maxX - o.minX;
} else {
if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
}
if (o.vmode) {
if (o.minY != null) o.minMouseY = e.clientY - y + o.minY;
if (o.maxY != null) o.maxMouseY = o.minMouseY + o.maxY - o.minY;
} else {
if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
}
document.onmousemove = Drag.drag;
document.onmouseup = Drag.end;
return false;
},
drag : function(e)
{
e = Drag.fixE(e);
var o = Drag.obj;
var ey = e.clientY;
var ex = e.clientX;
var y = parseInt(o.vmode ? o.root.style.top : o.root.style.bottom);
var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
var nx, ny;
if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
if (o.xMapper) nx = o.xMapper(y)
else if (o.yMapper) ny = o.yMapper(x)
Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
Drag.obj.root.onDrag(nx, ny);
return false;
},
end : function()
{
document.onmousemove = null;
document.onmouseup = null;
Drag.obj.root.onDragEnd( parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]),
parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
Drag.obj = null;
},
fixE : function(e)
{
if (typeof e == 'undefined') e = window.event;
if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
return e;
}
};
//We wrap all the code in an object so that it doesn't interfere with any other code
var scroller = {
init: function() {
//collect the variables
scroller.docH = document.getElementById("content").offsetHeight;
scroller.contH = document.getElementById("container").offsetHeight;
scroller.scrollAreaH = document.getElementById("scrollArea").offsetHeight;
//calculate height of scroller and resize the scroller div
//(however, we make sure that it isn't to small for long pages)
scroller.scrollH = (scroller.contH * scroller.scrollAreaH) / scroller.docH;
//if(scroller.scrollH < 15) scroller.scrollH = 15;
document.getElementById("scroller").style.height = Math.round(scroller.scrollH) + "px";
//what is the effective scroll distance once the scoller's height has been taken into account
scroller.scrollDist = Math.round(scroller.scrollAreaH-scroller.scrollH);
//make the scroller div draggable
Drag.init(document.getElementById("scroller"),null,0,0,-1,scroller.scrollDist);
//add ondrag function
document.getElementById("scroller").onDrag = function (x,y) {
var scrollY = parseInt(document.getElementById("scroller").style.top);
var docY = 0 - (scrollY * (scroller.docH - scroller.contH) / scroller.scrollDist);
document.getElementById("content").style.top = docY + "px";
}
}
}
onload = scroller.init;
