Enclose TDG

by Bacher

HTML

<div id="wnd">
    <img id="content" src="http://qrok.net/uploads/posts/2010-03/thumbs/1268376577_man036.jpg" />
</div>

CSS

.enclosure {
    border: 1px solid black;
    overflow: hidden;
    box-sizing: border-box;
}

JavaScript

function enclose(content, framewidth, frameheight, contentX, contentY) {
    framewidth = Math.max(framewidth, 50);
    frameheight = Math.max(frameheight, 50);
    contentX = Math.min(contentX, 0) || 0;
    contentY = Math.min(contentY, 0) || 0;

    var frame = document.createElement("div");
    frame.className = "enclosure";
    frame.style.width = framewidth + "px";
    frame.style.height = frameheight + "px"; 

    content.parentNode.insertBefore(frame, content);
    frame.appendChild(content);

    content.style.position = "relative";
    content.style.left = contentX + "px";
    content.style.top = contentY + "px";

    var isMacWebkit = (navigator.userAgent.indexOf("Macintosh") !== -1 &&
                       navigator.userAgent.indexOf("WebKit") !== -1);
    var isFirefox = (navigator.userAgent.indexOf("Gecko") !== -1);

    frame.onwheel = wheelHandler;
    frame.onmousewheel = wheelHandler;
    if (isFirefox)                    
        frame.addEventListener("DOMMouseScroll", wheelHandler, false);

    function wheelHandler(event) {
        var e = event || window.event;

        var deltaX = e.deltaX * -30 || e.wheelDeltaX / 4 || 0;   
        var deltaY = e.deltaY * -30 || e.wheelDeltaY / 4 ||
            (e.wheelDeltaY===undefined && e.wheelDelta/4) || e.detail * -10 || 0;     

        if (isMacWebkit) {
            deltaX /= 30;
            deltaY /= 30;
        }

        if (isFirefox && e.type !== "DOMMouseScroll")
            frame.removeEventListener("DOMMouseScroll", wheelHandler, false);

        var contentbox = content.getBoundingClientRect();
        var contentwidth = contentbox.right - contentbox.left;
        var contentheight = contentbox.bottom - contentbox.top;

        if (e.altKey) {
            if (deltaX) {
                framewidth -= deltaX;
                framewidth = Math.min(framwidth, contentwidth);
                framewidth = Math.max(framewidth,50);   
                frame.style.width = framewidth + "px";
        ...