Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org
#

Q881 Is there a way to tell the browser to resize a DHTML element based on the size of the browser window?

You are here: irt.org | FAQ | DHTML | Q881 [ previous next ]

Yes - using clipping:

<span id="sphere" style="position:absolute; width:100; height:100;">
<img src="sphere.gif" width="100" height="100">
</span>

<script type="text/javascript" language="JavaScript">

<!--
if (document.all) {
    document.all('sphere').style.posLeft = 110;
    document.all('sphere').style.posTop = 114;
}
else if (document.layers) {
    document.layers['sphere'].left = 106;
    document.layers['sphere'].top = 102;
}

function changeit() {
    if (document.all)
        document.all('sphere').style.clip =
        'rect(' + t + ' ' + r + ' ' + b + ' ' + l + ')';
    else if (document.layers) {
        document.layers['sphere'].clip.top = t;
        document.layers['sphere'].clip.right = r;
        document.layers['sphere'].clip.bottom = b;
        document.layers['sphere'].clip.left = l;
    }
    document.forms[0].top.value = t;
    document.forms[0].right.value = r;
    document.forms[0].left.value = l;
    document.forms[0].bottom.value = b;
}

var t=0, r=100, b=100, l=0;
//-->

</script>

<form>
<table height="300" width="300">
<tr height="100" width="100">
<td valign="middle" align="center">
top<br><input type="text" name="top" size="3">
</td>
<td valign="middle" align="center">
<input type="button" value=" /\ " onClick="t-=10;changeit()">
<br>
<input type="button" value=" \/ " onClick="t+=10;changeit()">
</td>
<td valign="middle" align="center">
right<br><input type="text" name="right" size="3">
</td>
</tr>
<tr height="100" width="100">
<td valign="middle" align="center">
<input type="button" value=" < " onClick="l-=10;changeit()">
<input type="button" value=" > " onClick="l+=10;changeit()">
</td>
<td>
</td>
<td valign="middle" align="center">
<input type="button" value=" < " onClick="r-=10;changeit()">
<input type="button" value=" > " onClick="r+=10;changeit()">
</td>
</tr>
<tr height="100" width="100">
<td valign="middle" align="center">
left<br><input type="text" name="left" size="3">
</td>
<td valign="middle" align="center">
<input type="button" value=" /\ " onClick="b-=10;changeit()">
<br>
<input type="button" value=" \/ " onClick="b+=10;changeit()">
</td>
<td valign="middle" align="center">
bottom<br><input type="text" name="bottom" size="3">
</td>
</tr>
</table>
</form>

Feedback on 'Q881 Is there a way to tell the browser to resize a DHTML element based on the size of the browser window?'

©2018 Martin Webb