C
Csaba Gabor
The simple code below (I hope there hasn't been wrapping)
showing how a viewport might work is what I put together
using the extremely helpful .js functions at
http://www.walterzorn.com/dragdrop/dragdrop_e.htm
Though the drags are quite processor intensive, it
works well on Firefox 1.0.1 but there is a slight
problem with IE 6 - you can't abut the viewport to the
top of the window because dTop refuses to get short
enough. Is there a straightforward way to overcome
this annoyance?
Thanks,
Csaba Gabor from Vienna
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><BASE>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Canvas</title>
<style type='text/css'>
..blocker { background: beige; position: absolute; }
#viewport { position: absolute; background-repeat: repeat;
background-image: url(http://www.walterzorn.com/images/transparentpixel.gif);
height: 300; width: 400; border: 1px solid green; }
</style>
<script type='text/javascript'>
function init() {
ADD_DHTML("viewport"+CURSOR_MOVE+RESIZABLE);
for (var name in {dRight:0,dLeft:1,dTop:2,dBottom:3})
ADD_DHTML(name+NO_DRAG);
adjustDivs(); }
function pick (pattern, dflt, target, val1, etc) {
var i=3; var aRg = arguments;
for (;i<aRg.length;i+=2) if (aRg[i-1]==pattern) return aRg;
return dflt; }
function adjustDivs() {
var wndW = dd.getWndW();
var wndH = dd.getWndH();
var v = dd.elements.viewport;
for (var name in {dRight:0,dLeft:1,dTop:2,dBottom:3}) {
dd.elements[name].moveTo (pick(name, v.x, 'dRight', v.x+v.w, 'dLeft', 0),
pick(name, 0, 'dBottom', v.y+v.h))
dd.elements[name].resizeTo (pick(name, v.w, 'dRight', wndW - v.w - v.x,
'dLeft', v.x),
pick(name, wndH, 'dTop', v.y,
'dBottom', wndH - v.y - v.h)); }}
</script></head>
<body background="http://bugzilla.mozilla.org/mozilla-banner.gif"
style="margin:0" onLoad="init()">
<script type='text/javascript'
src="http://www.walterzorn.com/scripts/wz_dragdrop.js"></script>
<div id=viewport></div>
<div id=dTop class=blocker style="background:tan"></div>
<div id=dRight class=blocker></div>
<div id=dLeft class=blocker></div>
<div id=dBottom class=blocker></div>
<script type='text/javascript'>
SET_DHTML();
function my_DropFunc() { adjustDivs(); }
function my_DragFunc() { adjustDivs(); }
function my_ResizeFunc() { adjustDivs(); }
</script>
</body></html>
PS. I've used tranparentimage.gif instead of opacity/filters because
IE's mouse won't change to indicate dragability if it's convinced it's
transparent. With the gif, it eventually figures out it's being tricked,
but by then it's too late.
ADD_DHTML, SET_DHTML, CURSOR_MOVE, RESIZABLE, dd (which is the array of
all divs that the .js APIs know about), .moveTo(), .resizeTo(),
..getWndW(), and .getWndH() are, of course, all defined in wz_dragdrop.js
I only put in the tan color and the green border to illustrate where
the divs are for this problem.
showing how a viewport might work is what I put together
using the extremely helpful .js functions at
http://www.walterzorn.com/dragdrop/dragdrop_e.htm
Though the drags are quite processor intensive, it
works well on Firefox 1.0.1 but there is a slight
problem with IE 6 - you can't abut the viewport to the
top of the window because dTop refuses to get short
enough. Is there a straightforward way to overcome
this annoyance?
Thanks,
Csaba Gabor from Vienna
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><BASE>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Canvas</title>
<style type='text/css'>
..blocker { background: beige; position: absolute; }
#viewport { position: absolute; background-repeat: repeat;
background-image: url(http://www.walterzorn.com/images/transparentpixel.gif);
height: 300; width: 400; border: 1px solid green; }
</style>
<script type='text/javascript'>
function init() {
ADD_DHTML("viewport"+CURSOR_MOVE+RESIZABLE);
for (var name in {dRight:0,dLeft:1,dTop:2,dBottom:3})
ADD_DHTML(name+NO_DRAG);
adjustDivs(); }
function pick (pattern, dflt, target, val1, etc) {
var i=3; var aRg = arguments;
for (;i<aRg.length;i+=2) if (aRg[i-1]==pattern) return aRg;
return dflt; }
function adjustDivs() {
var wndW = dd.getWndW();
var wndH = dd.getWndH();
var v = dd.elements.viewport;
for (var name in {dRight:0,dLeft:1,dTop:2,dBottom:3}) {
dd.elements[name].moveTo (pick(name, v.x, 'dRight', v.x+v.w, 'dLeft', 0),
pick(name, 0, 'dBottom', v.y+v.h))
dd.elements[name].resizeTo (pick(name, v.w, 'dRight', wndW - v.w - v.x,
'dLeft', v.x),
pick(name, wndH, 'dTop', v.y,
'dBottom', wndH - v.y - v.h)); }}
</script></head>
<body background="http://bugzilla.mozilla.org/mozilla-banner.gif"
style="margin:0" onLoad="init()">
<script type='text/javascript'
src="http://www.walterzorn.com/scripts/wz_dragdrop.js"></script>
<div id=viewport></div>
<div id=dTop class=blocker style="background:tan"></div>
<div id=dRight class=blocker></div>
<div id=dLeft class=blocker></div>
<div id=dBottom class=blocker></div>
<script type='text/javascript'>
SET_DHTML();
function my_DropFunc() { adjustDivs(); }
function my_DragFunc() { adjustDivs(); }
function my_ResizeFunc() { adjustDivs(); }
</script>
</body></html>
PS. I've used tranparentimage.gif instead of opacity/filters because
IE's mouse won't change to indicate dragability if it's convinced it's
transparent. With the gif, it eventually figures out it's being tricked,
but by then it's too late.
ADD_DHTML, SET_DHTML, CURSOR_MOVE, RESIZABLE, dd (which is the array of
all divs that the .js APIs know about), .moveTo(), .resizeTo(),
..getWndW(), and .getWndH() are, of course, all defined in wz_dragdrop.js
I only put in the tan color and the green border to illustrate where
the divs are for this problem.