Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
​
    <title>jQuery.documentSize 1.2.4, Zepto demo (AMD)</title>
    <meta name="description" content="jQuery.documentSize 1.2.4, Zepto demo (AMD)">
​
    <!-- ATTN Foundation loaded without JS - stay clear of JS-driven widgets, or add the JS setup -->
    <!--
        ATTN jQuery 1.x is used here, making the demo compatible with oldIE. As a side effect,
        Foundation 5 JS can't be used reliably (requires jQuery 2.x). Stay clear, or switch to
        jQuery 2.x.
    -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/normalize.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css">
​
    <link rel="stylesheet" href="https://cdn.rawgit.com/hashchange/jquery.documentsize/1.2.4/demo/amd/amd.css">
</head>
<body>
​
    <section class="content">
        <h1 id="header" class="row">jQuery.documentSize, Zepto demo (AMD)</h1>
    </section>
​
    <section class="message content">
        <p class="row panel callout">On mobile, swipe down to enter minimal UI</p>
    </section>
​
    <section class="info content">
        <p class="row spacious">The page demonstrates the use of Zepto, instead of jQuery, with the AMD build of jQuery.documentSize. See <code>require-config.js</code> for the setup. This page won't work in IE8 and other legacy browsers.</p>
    </section>
​
    <section class="log">
​
        <dl class="document">
            <dt>Document height:</dt>
            <dd class="height"></dd>
        </dl>
​
        <dl class="document">
            <dt>Document width:</dt>
            <dd class="width"></dd>
        </dl>
​
        <hr>
​
        <dl class="visualViewport">
            <dt>Visual viewport height:</dt>
            <dd class="height"></dd>
        </dl>
​
        <dl class="visualViewport">
            <dt>Visual viewport width:</dt>
            <dd class="width"></dd>
        </dl>
​
        <dl class="layoutViewport">
            <dt>Layout viewport height:</dt>
            <dd class="height"></dd>
        </dl>
​
        <dl class="layoutViewport">
            <dt>Layout viewport width:</dt>
            <dd class="width"></dd>
        </dl>
​
        <dl class="dde">
            <dt>d.dE.clientHeight:</dt>
            <dd class="clientHeight"></dd>
        </dl>
​
        <dl class="dde">
            <dt>d.dE.clientWidth:</dt>
            <dd class="clientWidth"></dd>
        </dl>
​
        <hr>
​
        <dl class="zoom">
            <dt>Pinch zoom factor:</dt>
            <dd class="pinch"></dd>
        </dl>
​
        <dl class="zoom nativeZoom">
            <dt>visualViewport.scale:</dt>
            <dd class="nativePinch"></dd>
        </dl>
​
        <hr class="gBCR">
​
        <dl class="gBCR">
            <dt>body.gBCR().top:</dt>
            <dd class="top"></dd>
        </dl>
​
        <dl class="gBCR">
            <dt>body.gBCR().left:</dt>
            <dd class="_left"></dd>
        </dl>
​
        <dl class="gBCR">
            <dt>body.gBCR().bottom:</dt>
            <dd class="bottom"></dd>
        </dl>
​
        <dl class="gBCR">
            <dt>body.gBCR().right:</dt>
            <dd class="_right"></dd>
        </dl>
​
    </section>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>
    <script src="https://cdn.rawgit.com/hashchange/jquery.documentsize/1.2.4/demo/amd/jsbin/require-config.js"></script>
​
</body>
</html>
 
​
 
// amd.js
​
require( [
​
    'jquery',
    'underscore',
    'jquery.documentsize'
​
], function ( $ ) {
​
    $( function () {
​
        var $documentHeight = $( ".document .height" ),
            $documentWidth = $( ".document .width" ),
​
            $ddeClientHeight = $( ".dde .clientHeight" ),
            $ddeClientWidth = $( ".dde .clientWidth" ),
​
            $visualViewportHeight = $( ".visualViewport .height" ),
            $visualViewportWidth = $( ".visualViewport .width" ),
​
            $layoutViewportHeight = $( ".layoutViewport .height" ),
            $layoutViewportWidth = $( ".layoutViewport .width" ),
​
            $pinchZoomFactor = $( ".zoom .pinch" ),
            $nativePinchZoomFactor = $( ".zoom .nativePinch" ),
​
            $gBCRTop = $( ".gBCR .top" ),
            $gBCRLeft = $( ".gBCR ._left" ),
            $gBCRBottom = $( ".gBCR .bottom" ),
            $gBCRRight = $( ".gBCR ._right" ),
​
            $logPane = $( ".log" ),
            initialLogProps = {
                top: parseFloat( $logPane.css( "top" ) ),
                left: parseFloat( $logPane.css( "left" ) ),
​
                paddingTop: parseFloat( $logPane.css( "padding-top" ) ),
                paddingLeft: parseFloat( $logPane.css( "padding-left" ) ),
                paddingBottom: parseFloat( $logPane.css( "padding-bottom" ) ),
                paddingRight: parseFloat( $logPane.css( "padding-right" ) ),
​
                minWidth: parseFloat( $logPane.css( "min-width" ) ),
                maxWidth: parseFloat( $logPane.css( "max-width" ) ),
​
                dtFontSize: parseFloat( $( "dt", $logPane ).css( "font-size" ) ),
                dtLineHeight: parseFloat( $( "dt", $logPane ).css( "line-height" ) ),
                dtMinWidth: parseFloat( $( "dt", $logPane ).css( "min-width" ) ),
​
                ddFontSize: parseFloat( $( "dd", $logPane ).css( "font-size" ) ),
                ddLineHeight: parseFloat( $( "dd", $logPane ).css( "line-height" ) ),
​
                dlFontSize: parseFloat( $( "dl", $logPane ).css( "font-size" ) ),
                dlLineHeight: parseFloat( $( "dl", $logPane ).css( "line-height" ) ),
                dlMarginBottom: parseFloat( $( "dl", $logPane ).css( "margin-bottom" ) ),
​
                hrMarginTop: parseFloat( $( "hr", $logPane ).css( "margin-top" ) ),
                hrMarginBottom: parseFloat( $( "hr", $logPane ).css( "margin-bottom" ) )
            },
​
            $content = $( ".content" ),
​
            dde = document.documentElement,
            body = document.body,
​
            $window = $( window );
​
​
        if ( window.visualViewport ) {
            window.visualViewport.addEventListener( "scroll", _.throttle( update, 100 ) );
            window.visualViewport.addEventListener( "resize", _.throttle( update, 100 ) );
        }
        $window.on( "scroll", _.throttle( update, 100 ) );
        $window.on( "resize", _.throttle( update, 100 ) );
        $window.on( "orientationchange", update );
        update();
​
        showLog();
​
        function update () {
​
            var zoomFactor = $.pinchZoomFactor(),
                logOffset = {
                    top:  initialLogProps.top / zoomFactor,
                    left: initialLogProps.left / zoomFactor
                };
​
            logValues();
            scaleLog();
            resizeContent();
            fixPosition( $logPane, logOffset );
​
        }
​
        // Makes sure the log always keeps the same size, visually, as the user zooms in and out
        function scaleLog () {
​
            var zoomFactor = $.pinchZoomFactor(),
                logProps = {
​
                    top:           ( initialLogProps.top / zoomFactor ) + "px",
                    left:          ( initialLogProps.left / zoomFactor ) + "px",
                    paddingTop:    ( initialLogProps.paddingTop / zoomFactor ) + "px",
                    paddingLeft:   ( initialLogProps.paddingLeft / zoomFactor ) + "px",
                    paddingBottom: ( initialLogProps.paddingBottom / zoomFactor ) + "px",
                    paddingRight:  ( initialLogProps.paddingRight / zoomFactor ) + "px",
                    minWidth:      ( initialLogProps.minWidth / zoomFactor ) + "px",
                    maxWidth:      ( initialLogProps.maxWidth / zoomFactor ) + "px"
​
                },
                dtProps = {
                    fontSize:   ( initialLogProps.dtFontSize / zoomFactor ) + "px",
                    lineHeight: ( initialLogProps.dtLineHeight / zoomFactor ) + "px",
                    minWidth:   ( initialLogProps.dtMinWidth / zoomFactor ) + "px"
                },
                ddProps = {
                    fontSize:   ( initialLogProps.ddFontSize / zoomFactor ) + "px",
                    lineHeight: ( initialLogProps.ddLineHeight / zoomFactor ) + "px"
                },
                dlProps = {
                    fontSize:     ( initialLogProps.dlFontSize / zoomFactor ) + "px",
                    lineHeight:   ( initialLogProps.dlLineHeight / zoomFactor ) + "px",
                    marginBottom: ( initialLogProps.dlMarginBottom / zoomFactor ) + "px"
                },
                hrProps = {
                    marginTop:    ( initialLogProps.hrMarginTop / zoomFactor ) + "px",
                    marginBottom: ( initialLogProps.hrMarginBottom / zoomFactor ) + "px"
                };
​
            $logPane.css( logProps );
            $( "dt", $logPane ).css( dtProps );
            $( "dd", $logPane ).css( ddProps );
            $( "dl", $logPane ).css( dlProps );
            $( "hr", $logPane ).css( hrProps );
        }
​
        function logValues () {
​
            var zoomFactor, nativeZoomFactor, gBCR,
                supportsVisualViewportAPI = !!window.visualViewport;
​
            $documentHeight.text( $.documentHeight() );
            $documentWidth.text( $.documentWidth() );
​
            $ddeClientHeight.text( dde.clientHeight );
            $ddeClientWidth.text( dde.clientWidth );
​
            $visualViewportHeight.text( $.windowHeight() );
            $visualViewportWidth.text( $.windowWidth() );
​
            $layoutViewportHeight.text( $.windowHeight( { viewport: "layout" } ) );
            $layoutViewportWidth.text( $.windowWidth( { viewport: "layout" } ) );
​
            zoomFactor = $.pinchZoomFactor();
            $pinchZoomFactor.text( Math.round( zoomFactor * 10000 ) / 10000 );
​
            nativeZoomFactor = supportsVisualViewportAPI && window.visualViewport.scale;
            $nativePinchZoomFactor.text( supportsVisualViewportAPI ? Math.round( nativeZoomFactor * 10000 ) / 10000 : "n/a" );
​
            gBCR = body.getBoundingClientRect();
            $gBCRTop.text( gBCR.top );
            $gBCRLeft.text( gBCR.left );
            $gBCRBottom.text( gBCR.bottom );
            $gBCRRight.text( gBCR.right );
​
        }
​
        // Makes the content fit into the layout viewport, width-wise, even though the body is much wider.
        function resizeContent () {
            $content.css( { maxWidth: $.windowWidth( { viewport: "layout" } ) } );
        }
​
        // Faking "position: fixed" with Javascript. position:fixed didn't work as intended in Chrome on Android, hence
        // the hack.
        function fixPosition ( $elem, cssOffset ) {
            var visualTop = window.visualViewport ? window.visualViewport.pageTop : Math.max( dde.scrollTop, body.scrollTop ),
                visualLeft = window.visualViewport ? window.visualViewport.pageLeft : Math.max( dde.scrollLeft, body.scrollLeft );
​
            $elem.css( {
                top: visualTop + cssOffset.top,
                left: visualLeft + cssOffset.left
            } );
        }
​
        function showLog () {
            setTimeout( function () {
                $logPane.show();
                update();
            }, 2000 );
        }
​
    } );
} );
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hashchangepro
0viewers