Comparison of Layer and Clip Location Properties (W3C) : Layer « HTML « JavaScript DHTML

Comparison of Layer and Clip Location Properties (W3C)

JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001

<TITLE>Layer vs. Clip</TITLE>
var currClipTop = 0
var currClipLeft = 0
var currClipRight = 360
var currClipBottom = 180
function setClip(field) {
    var val = parseInt(field.value)
    switch ( {
        case "clipBottom" :
            currClipBottom = val
        case "clipRight" :
            currClipRight = val
function adjustClip() {
    document.getElementById("display").style.clip = "rect(" + currClipTop + 
    "px " + currClipRight + "px " + currClipBottom + "px " + currClipLeft + 
function setLayer(field) {
    var val = parseInt(field.value)
    switch ( {
        case "width" :
            document.getElementById("display").style.width = val + "px"
        case "height" :
            document.getElementById("display").style.height = val + "px"
function showValues() {
    var form = document.forms[0]
    var elem = document.getElementById("display")
    var clipRect = getClipRect(elem)
    form.width.value = parseInt(
    form.height.value = parseInt(
    form.clipRight.value = clipRect.right
    form.clipBottom.value = clipRect.bottom
// convert clip property string to an object
function getClipRect(elem) {
    var clipString =
    // 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
<BODY onLoad="showValues()">
<H1>Layer vs. Clip Dimension Properties (W3C)</H1>
Enter new layer and clipping values to adjust the layer.<P>
<DIV STYLE="position:absolute; top:130">
    <TD ALIGN="right"></TD>
    <TD><INPUT TYPE="text" NAME="width" SIZE=3 onChange="setLayer(this)"></TD>
    <TD ALIGN="right"></TD>
    <TD><INPUT TYPE="text" NAME="height" SIZE=3 onChange="setLayer(this)"></TD>
    <TD ALIGN="right"> (right):</TD>
    <TD><INPUT TYPE="text" NAME="clipRight" SIZE=3 onChange="setClip(this)"></TD>
    <TD ALIGN="right"> (bottom):</TD>
    <TD><INPUT TYPE="text" NAME="clipBottom" SIZE=3 onChange="setClip(this)"></TD>
<DIV ID="display" STYLE="position:absolute; top:130; left:250; width:360; 
height:180; clip:rect(0px, 360px, 180px, 0px); background-color:coral">
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.


Related examples in the same category

1.Layer 'srcFilter' Example
2.Monitors divisions (or layers) on dynamic Web pages (DHTML)
3.Hide and show layer
4. Layer Background Colors (W3C)
5.Setting Layer Backgrounds (W3C)
6.The layer while rolling over the link.
7.Accessing Layers with JavaScript
8.'layer' and 'ilayer' Tag Properties
9.Detecting Navigator and Internet Explorer
10. Adjusting Layer clip Properties (W3C)
11. Testing Nested Layer Coordinate Systems (W3C)
12.Nested Layer Visibility Relationships (W3C)
13.Relationships Among zIndex Values (W3C)
14.Dragging a Layer (W3C)
15.Resizing a Layer (W3C)
16.Methods and Properties of the Layer Object
17.Layer seek