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.isInView 1.0.3, demo (AMD)</title>
    <meta name="description" content="jQuery.isInView 1.0.3, 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.2/css/normalize.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
​
    <link rel="stylesheet" href="https://cdn.rawgit.com/hashchange/jquery.isinview/1.0.3/demo/amd/amd.css">
​
    <!-- Fix HTML5 tags in oldIE and other lacking legacy browsers -->
    <script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
</head>
<body>
​
    <section id="header">
        <h1 class="row text-center">jQuery.isInView, demo (AMD)</h1>
    </section>
​
    <div class="container"></div>
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
    <script src="https://cdn.rawgit.com/hashchange/jquery.isinview/1.0.3/demo/amd/jsbin/require-config.js"></script>
​
</body>
</html>
​
 
​
 
// amd.js
​
require( [
​
    'jquery',
    'underscore',
    'jquery.isinview'
​
], function ( $, _ ) {
​
    var $scrollable = $( ".container" ),
        $items,
​
        $markedFull = $(),
        $markedFullContent = $(),
        $markedPartialContent = $(),
        $markedPartial = $(),
​
        setStatus = function () {
​
            var $partial = $items.inView( $scrollable, { partially: true } ),
                $partialContent = $partial.inView( $scrollable, { partially: true, box: "content-box" } ),
                $fullContent = $partialContent.inView( $scrollable, { box: "content-box" } ),
                $full = $fullContent.inView( $scrollable );
​
            $partial = $partial.not( $partialContent );
            $partialContent = $partialContent.not( $fullContent );
            $fullContent = $fullContent.not( $full );
​
            $full.addClass( "full" );
            $markedFull.not( $full ).removeClass( "full" );
​
            $fullContent.addClass( "fullContent" );
            $markedFullContent.not( $fullContent ).removeClass( "fullContent" );
​
            $partialContent.addClass( "partialContent" );
            $markedPartialContent.not( $partialContent ).removeClass( "partialContent" );
​
            $partial.addClass( "partial" );
            $markedPartial.not( $partial ).removeClass( "partial" );
​
            $markedFull = $full;
            $markedFullContent = $fullContent;
            $markedPartialContent = $partialContent;
            $markedPartial = $partial;
​
        };
​
    createItems( 500, $scrollable );
    $items = $( ".item" );
​
    $scrollable.scroll( _.throttle( setStatus, 100 ) );
    setStatus();
​
    function createItems ( count, $container ) {
        var i, elem, inner,
            container = $container[0],
            doc = container.ownerDocument,
            fragment = doc.createDocumentFragment();
​
        for ( i = 0; i < count; i++ ) {
            inner = doc.createElement( "div" );
            inner.setAttribute( "class", "inner" );
            inner.appendChild( doc.createTextNode( String ( i + 1 ) ) );
​
            elem = doc.createElement( "div" );
            elem.setAttribute( "class", "item" );
            elem.appendChild( inner );
​
            fragment.appendChild( elem );
        }
​
        container.appendChild( fragment );
    }
​
} );
​
Output

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

Dismiss x
public
Bin info
hashchangepro
0viewers