HTML JavaScript DHTML

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/


Layer Clip

var origLayerWidth = 0
var origLayerHeight = 0
var currTop, currRight, currBottom, currLeft
function init() {
    origLayerWidth = parseInt(document.getElementById("display").style.width)
    origLayerHeight = parseInt(document.getElementById("display").style.height)
    currTop = 0
    currRight = origLayerWidth
    currBottom = origLayerHeight
    currLeft = 0
    showValues()
}
function setClip(field) {
    var val = parseInt(field.value)
    switch (field.name) {
        case "top" :
            currTop = val
break
        case "right" :
            currRight = val
            break
        case "bottom" :
            currBottom = val
            break
        case "left" :
            currLeft = val
            break
        case "width" :
            currRight = currLeft + val
            break
        case "height" :
            currBottom = currTop + val
            break
    }
    adjustClip()
    showValues()
}
function adjustClip() {
    document.getElementById("display").style.clip = "rect(" + currTop + "px " +
    currRight + "px " + currBottom + "px " + currLeft + "px)"
}
function showValues() {
    var form = document.forms[0]
    form.top.value = currTop
    form.right.value = currRight
    form.bottom.value = currBottom
    form.left.value = currLeft
    form.width.value = currRight - currLeft
    form.height.value = currBottom - currTop
}
var intervalID
function revealClip() {
    var midWidth = Math.round(origLayerWidth /2)
    var midHeight = Math.round(origLayerHeight /2)
    currTop = midHeight
    currBottom = midHeight
    currRight = midWidth
    currLeft = midWidth
    intervalID = setInterval("stepClip()",1)
}
function stepClip() {
    var widthDone = false
    var heightDone = false
    if (currLeft > 0) {
        currLeft += -2
        currRight += 2
    } else {
        widthDone = true
    }
    if (currTop > 0) {
        currTop += -1
        currBottom += 1
    } else {
        heightDone = true
    }
    adjustClip()
    showValues()
    if (widthDone && heightDone) {
        clearInterval(intervalID)
    }
}



Layer Clipping Properties (W3C)




Enter new clipping values to adjust the visible area of the layer.






    layer.style.clip (left):
    



    layer.style.clip (top):
    



    layer.style.clip (right):
    



    layer.style.clip (bottom):
    



    layer.style.clip (width):
    



    layer.style.clip (height):
    






 height:180; clip:rect(0px 360px 180px 0px); background-color:coral">

ARTICLE I



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.