tums
%Europe/Berlin %646 %2006, 15:30
Hallo,
Is het mogelijk om de inhoud van een iframe te scrollen met scrollbar in een div layer.
Ik heb al wel wat gevonden op internet maar daarbij staat de te scrollen content in een div layer. http://www.dynamicdrive.com/dynamicindex11/domdrag/example3.htm
Nu heb ik al een beetje zitten knutselen maar wanneer ik de scrollbar gebruik verplaatst het hele iframe en niet de inhoud ervan.
Wie kan mij helpen.
Dit is de code die ik gebruik
<html>
<head>
<title></title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="http://www.momac.net/favicon.ico" type="image/x-icon">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var timer_id;
function scroll_iframe(frm,inc,dir) {
if (timer_id) clearTimeout(timer_id);
if (window.frames[frm]) {
if (dir == "v") window.frames[frm].scrollBy(0, inc);
else window.frames[frm].scrollBy(inc, 0);
timer_id = setTimeout("scroll_iframe('" + frm + "'," + inc + ",'" + dir + "')", 20);
}
}
function stopScroll() { if (timer_id) clearTimeout(timer_id); }
</script>
<script type="text/javascript" src="dom-drag.js"></script>
<style type="text/css">
#thumb {
position:relative;
height:38px;
width:6px;
background-color:#1050B2;
border:1px outset #1050B2;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div style='position:absolute; top:0px; left:0; width:301px; height:552px; background:transparent; margin:0px; padding:0px;'>
<table border='0' cellspacing='0' cellpadding='0'>
<tr>
<td colspan="3"><img src="boven.jpg" width="301" height="125"></td>
</tr>
<tr>
<td width="14"><img src="zij_links.jpg" width="65" height="180"></td>
<td>
<div style='height:180; width:177; background-image:url(scrollbar.jpg)'></div>
</td>
<td width="14"><img src="zij_rechts.jpg" width="59" height="180"></td>
</tr>
<tr>
<td colspan="3"><img src="middle.jpg" width="301" height="37"></td>
</tr>
<tr>
<td colspan="3"><img src="keys.jpg" width="301" height="77" border="0" usemap="#keys"></td>
</tr>
<tr>
<td colspan="3"><img src="keypad.jpg" width="301" height="133"></td>
</tr>
</table>
<div style='position:absolute; top:125px; left:65px; width:170px; height:180px; border:0 solid;'>
<iframe style='position:relative;' width=170 height=180 src='http://www.van-rooijen.com/scrollen/inhoud.html' id='siteframe' name='siteframe' scrolling='no' frameborder='0'></iframe>
</div>
<div style='position:absolute; top:125px; left:235px; width:8px; height:180px; border:0 solid;'>
<div id="thumb"></div>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var aThumb = document.getElementById("thumb");
var scrolldiv = document.getElementById("siteframe");
Drag.init(aThumb, null, 0, 0, 0, 140);
aThumb.onDrag = function(x, y) {
scrolldiv.style.top=y * (-1) +"px";
}
</script>
</div>
</div>
<map name="keys">
<area shape="poly" coords="118,63,118,11,67,10,69,40" title="Menu">
<area shape="poly" coords="187,63,188,12,237,12,237,41" title="Back" onClick="javascript:history. back(-1)">
<area shape="poly" coords="123,12,150,4,185,12,186,42,121,42" title="Up" onMouseDown="scroll_iframe('siteframe', -2, 'v');" onMouseUp="stopScroll();">
<area shape="poly" coords="121,63,151,76,186,63,187,42,122,42" title="Down" onMouseDown="scroll_iframe('siteframe', 2, 'v');" onMouseUp="stopScroll();">
</map>
</body>
</html>
Dit staat erin dom-drag.js
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
* Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005
**************************************************
* 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;
}
};
Is het mogelijk om de inhoud van een iframe te scrollen met scrollbar in een div layer.
Ik heb al wel wat gevonden op internet maar daarbij staat de te scrollen content in een div layer. http://www.dynamicdrive.com/dynamicindex11/domdrag/example3.htm
Nu heb ik al een beetje zitten knutselen maar wanneer ik de scrollbar gebruik verplaatst het hele iframe en niet de inhoud ervan.
Wie kan mij helpen.
Dit is de code die ik gebruik
<html>
<head>
<title></title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="http://www.momac.net/favicon.ico" type="image/x-icon">
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var timer_id;
function scroll_iframe(frm,inc,dir) {
if (timer_id) clearTimeout(timer_id);
if (window.frames[frm]) {
if (dir == "v") window.frames[frm].scrollBy(0, inc);
else window.frames[frm].scrollBy(inc, 0);
timer_id = setTimeout("scroll_iframe('" + frm + "'," + inc + ",'" + dir + "')", 20);
}
}
function stopScroll() { if (timer_id) clearTimeout(timer_id); }
</script>
<script type="text/javascript" src="dom-drag.js"></script>
<style type="text/css">
#thumb {
position:relative;
height:38px;
width:6px;
background-color:#1050B2;
border:1px outset #1050B2;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div style='position:absolute; top:0px; left:0; width:301px; height:552px; background:transparent; margin:0px; padding:0px;'>
<table border='0' cellspacing='0' cellpadding='0'>
<tr>
<td colspan="3"><img src="boven.jpg" width="301" height="125"></td>
</tr>
<tr>
<td width="14"><img src="zij_links.jpg" width="65" height="180"></td>
<td>
<div style='height:180; width:177; background-image:url(scrollbar.jpg)'></div>
</td>
<td width="14"><img src="zij_rechts.jpg" width="59" height="180"></td>
</tr>
<tr>
<td colspan="3"><img src="middle.jpg" width="301" height="37"></td>
</tr>
<tr>
<td colspan="3"><img src="keys.jpg" width="301" height="77" border="0" usemap="#keys"></td>
</tr>
<tr>
<td colspan="3"><img src="keypad.jpg" width="301" height="133"></td>
</tr>
</table>
<div style='position:absolute; top:125px; left:65px; width:170px; height:180px; border:0 solid;'>
<iframe style='position:relative;' width=170 height=180 src='http://www.van-rooijen.com/scrollen/inhoud.html' id='siteframe' name='siteframe' scrolling='no' frameborder='0'></iframe>
</div>
<div style='position:absolute; top:125px; left:235px; width:8px; height:180px; border:0 solid;'>
<div id="thumb"></div>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var aThumb = document.getElementById("thumb");
var scrolldiv = document.getElementById("siteframe");
Drag.init(aThumb, null, 0, 0, 0, 140);
aThumb.onDrag = function(x, y) {
scrolldiv.style.top=y * (-1) +"px";
}
</script>
</div>
</div>
<map name="keys">
<area shape="poly" coords="118,63,118,11,67,10,69,40" title="Menu">
<area shape="poly" coords="187,63,188,12,237,12,237,41" title="Back" onClick="javascript:history. back(-1)">
<area shape="poly" coords="123,12,150,4,185,12,186,42,121,42" title="Up" onMouseDown="scroll_iframe('siteframe', -2, 'v');" onMouseUp="stopScroll();">
<area shape="poly" coords="121,63,151,76,186,63,187,42,122,42" title="Down" onMouseDown="scroll_iframe('siteframe', 2, 'v');" onMouseUp="stopScroll();">
</map>
</body>
</html>
Dit staat erin dom-drag.js
/**************************************************
* dom-drag.js
* 09.25.2001
* www.youngpup.net
* Script featured on Dynamic Drive (http://www.dynamicdrive.com) 12.08.2005
**************************************************
* 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;
}
};