Spy View

Simple start

destroy init

$(function(){
    $('.simple').spyview();
});

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et odio sed libero convallis lacinia sit amet et tortor. Mauris eget tempus orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc commodo laoreet orci vitae vulputate. Duis viverra lectus non diam pulvinar feugiat. Vivamus eget nisi pharetra, dictum justo sit amet, consectetur diam. Donec mauris orci, mollis non efficitur vehicula, vestibulum nec lacus. Cras finibus blandit turpis, eu placerat tellus ullamcorper vitae.

Sed sit amet odio id ex imperdiet tincidunt eget non justo. Nulla ultrices orci nunc, at lobortis massa sollicitudin vel. Donec vel orci id tortor tincidunt suscipit. Etiam tincidunt mauris sed egestas ornare. Suspendisse placerat erat ipsum, eu feugiat leo volutpat quis. Aliquam in turpis eu felis tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec sit amet nulla ac orci dignissim condimentum ac vel nisi. Maecenas enim enim, porta a mi in, dignissim tempor ligula. Pellentesque euismod et quam at vulputate. Nullam ornare, lacus et cursus congue, neque erat tincidunt lacus, eu sodales diam arcu vel massa. Curabitur elementum dui sapien, eu mattis est aliquet nec. Suspendisse ut elementum eros.

Single action


    $(function(){
        $('.simpleSingle').spyview({
            showmarkers : true,
            action : [{
                percent: 15,
                height : 500,
                type : 'single',
                action:
                    function (e) {
                        console.log(e.Percent+'%');
                    }
             }]
        });
    });

Console log:

Multi action with pattern


    $(function(){
        $('.simpleMulti').spyview({
            showmarkers : true,
            action : [{
                percent: '25*k+1',
                height : 500,
                type : 'multi',
                action:
                    function (e) {
                        console.log(e.Percent+'%');
                    }
             }]
        });
    });

Console log:

Options

                    
            showmarkers : false,                // show action maker
            precision : 0.2,                    //
            dynamicPrecision : false,           //
            height : 200,                       // height scroll box
            heightUnit : 'px',                  // unit height
            action : {actionJson}               // default - {}

actionJson

                    
             {
                percent: 15,                                // position in percent, value: 0 - 100
                type : 'single',                            // type of action, value: single / multi
                action:                                     // function called
                    function (e) {
                        console.log(e.Percent+'%');
                    }
             }, ....

Methods

                    
            init()
            destroy()

Licence

The MIT License

Copyright 2018 VeoLab.me

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Download

spyview.veo.zip 250