Resizing a Layer (W3C)



/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>Layer Resizing</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var engaged = false
var offsetX = 0
var offsetY = 0
function resizeIt(evt) {
    evt = (evt) ? evt : (window.event) ? window.event : ""
    var targElem = (evt.target) ? evt.target : evt.srcElement
    if (targElem.className == "draggable") {
        if (engaged) {
            if (evt.pageX) {
                targElem.style.width = (evt.pageX - targElem.offsetLeft - offsetX) + "px"
                targElem.style.height = (evt.pageY - targElem.offsetTop - offsetY) + "px"

} else {
                var elemWidth = evt.clientX - targElem.offsetLeft - offsetX - 
                    (parseInt(targElem.style.left) - parseInt(targElem.offsetLeft))
                var elemHeight = evt.clientY - targElem.offsetTop - offsetY - 
                    (parseInt(targElem.style.top) - parseInt(targElem.offsetTop))
                targElem.style.width = elemWidth + "px"
                targElem.style.height = elemHeight + "px"
            }
        }
    }
}
function engage(evt) {
    evt = (evt) ? evt : (window.event) ? window.event : ""
    var targElem = (evt.target) ? evt.target : evt.srcElement
    if (targElem.className == "draggable") {
       while (targElem.id != "myLayer" && targElem.parentNode) {
           targElem = targElem.parentNode
        }
        if (targElem.id == "myLayer") {
            if (evt.pageX && (evt.pageX > ((parseInt(targElem.style.width) - 20) + 
            targElem.offsetLeft)) && (evt.pageY > 
            ((parseInt(targElem.style.height) - 20) + targElem.offsetTop))) {
                offsetX = evt.pageX - parseInt(targElem.style.width) - targElem.offsetLeft
                offsetY = evt.pageY - parseInt(targElem.style.height) - targElem.offsetTop
                engaged = true
            } else if ((evt.offsetX > parseInt(targElem.style.width) - 20) && (evt.offsetY > 
                parseInt(targElem.style.height) - 20)) {
                offsetX = evt.offsetX - parseInt(targElem.style.width) - document.body.scrollLeft
                offsetY = evt.offsetY - parseInt(targElem.style.height) - document.body.scrollTop
                engaged = true
                if (navigator.userAgent.indexOf("Win") == -1) {
                    offsetX += document.body.scrollLeft
                    offsetY += document.body.scrollTop
                   }
            }
            return false
        }
    }
}
function release(evt) {
    evt = (evt) ? evt : (window.event) ? window.event : ""
    var targElem = (evt.target) ? evt.target : evt.srcElement
    if (targElem.className == "draggable") {
        while (targElem.id != "myLayer" && targElem.parentNode) {
            targElem = targElem.parentNode
        }
        if (engaged && targElem.id == "myLayer") {
            engaged = false
        }
    }
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Resizing a Layer (W3C)</H1>
<HR>
<DIV ID="myLayer" CLASS="draggable" STYLE="position:absolute; top:170; left:100;
 width:300; height:190; background-color:lightblue">
<SPAN>Here is some content inside the layer. See what happens to it as you
 resize the layer via the bottom-right 20-pixel handle.</SPAN>
</DIV>
<SCRIPT LANGUAGE="JavaScript">
document.onmousedown = engage
document.onmouseup = release
document.onmousemove = resizeIt
document.onmouseout = release
</SCRIPT>
</BODY>
</HTML>
Resizing a Layer (W3C) : Layer : HTML JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » HTML » Layer »

Resizing a Layer (W3C)

Leave a Comment / Note

JAVASCRIPT DHTML TUTORIALS
