Comparison of Layer and Clip Location Properties (W3C)
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Layer vs. Clip</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var currClipTop = 0
var currClipLeft = 0
var currClipRight = 360
var currClipBottom = 180
function setClip(field) {
var val = parseInt(field.value)
switch (field.name) {
case "clipBottom" :
currClipBottom = val
break
case "clipRight" :
currClipRight = val
break
}
adjustClip()
showValues()
}
function adjustClip() {
document.getElementById("display").style.clip = "rect(" + currClipTop +
"px " + currClipRight + "px " + currClipBottom + "px " + currClipLeft +
"px)"
}
function setLayer(field) {
var val = parseInt(field.value)
switch (field.name) {
case "width" :
document.getElementById("display").style.width = val + "px"
break
case "height" :
document.getElementById("display").style.height = val + "px"
break
}
showValues()
}
function showValues() {
var form = document.forms[0]
var elem = document.getElementById("display")
var clipRect = getClipRect(elem)
form.width.value = parseInt(elem.style.width)
form.height.value = parseInt(elem.style.height)
form.clipRight.value = clipRect.right
form.clipBottom.value = clipRect.bottom
}
// convert clip property string to an object
function getClipRect(elem) {
var clipString = elem.style.clip
// assumes "rect(npx, npx, npx, npx)" form
// get rid of "rect("
clipString = clipString.replace(/rect\(/,"")
// get rid of "px)"
clipString = clipString.replace(/px\)/,"")
// get rid of remaining "px" strings
clipString = clipString.replace(/px/g,",")
// turn remaining string into an array
clipArray = clipString.split(",")
// make object out of array values
var clipRect = {top:parseInt(clipArray[0]), right:parseInt(clipArray[1]),
bottom:parseInt(clipArray[2]), left:parseInt(clipArray[3])}
return clipRect
}
</SCRIPT>
</HEAD>
<BODY onLoad="showValues()">
<H1>Layer vs. Clip Dimension Properties (W3C)</H1>
<HR>
Enter new layer and clipping values to adjust the layer.<P>
<DIV STYLE="position:absolute; top:130">
<FORM>
<TABLE>
<TR>
<TD ALIGN="right">layer.style.width:</TD>
<TD><INPUT TYPE="text" NAME="width" SIZE=3 onChange="setLayer(this)"></TD>
</TR>
<TR>
<TD ALIGN="right">layer.style.height:</TD>
<TD><INPUT TYPE="text" NAME="height" SIZE=3 onChange="setLayer(this)"></TD>
</TR>
<TR>
<TD ALIGN="right">layer.style.clip (right):</TD>
<TD><INPUT TYPE="text" NAME="clipRight" SIZE=3 onChange="setClip(this)"></TD>
</TR>
<TR>
<TD ALIGN="right">layer.style.clip (bottom):</TD>
<TD><INPUT TYPE="text" NAME="clipBottom" SIZE=3 onChange="setClip(this)"></TD>
</TR>
</TABLE>
</FORM>
</DIV>
<DIV ID="display" STYLE="position:absolute; top:130; left:250; width:360;
height:180; clip:rect(0px, 360px, 180px, 0px); background-color:coral">
<H2>ARTICLE I</H2>
<P>
Congress shall make no law respecting an establishment of religion, or
prohibiting the free exercise thereof; or abridging the freedom of speech, or of
the press; or the right of the people peaceably to assemble, and to petition the
government for a redress of grievances.
</P>
</DIV>
</BODY>
</HTML>
Related examples in the same category