CODEWITHSUNDEEP
javascriptjqueryhtml
Esakki
Esakki

Reputation: 53

How to integrate jscroll in html5 page

I have integrate jscroll in html page, but does not reflect anything

Header section 

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
    <script src="js/jquery.jscroll.min.js" />
    <script src="js/jquery.jscroll.js" />
</head>

<body>
    <div class=".scroll">
        <!-- html code tag -->
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.scroll').jscroll({
            autoTrigger: true
        })
    });
    </script>
</body>

I refer www.jscroll.com but doest not happen anything , can you help me anyone , what mistake i an doing here

Update :

 ![<html>

    <head>
    <meta charset="utf-8"/>
    <title>jQuery jScroll Plugin Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
    <script src="js/jquery.jscroll.js"/>

    <link type="text/css" rel="stylesheet" href="layout/css/styles.css" />

    </head>
    <body>

    <div class="scroll" style="margin-top:150px;" data-ui="jscroll-default">
    <h3>Page 1 of jScroll Example - jQuery Infinite Scrolling Plugin</h3>
    <p>
    This is the content of
    <strong>page 1</strong>
    in the jScroll example. Scroll to the bottom of this box to load the next set of content.
    </p>

    <p>This is example text for the jScroll demonstration. jScroll is a jQuery plugin for infinite scrolling, endless scrolling, lazy loading, auto-paging, or whatever you may call it.</p>
    <p>With jScroll, you can initialize the scroller on an element with a fixed height and overflow setting of "auto" or "scroll," or it can be set on a standard block-level element within the document and the scrolling will be initialized based on the brower window's scroll position.</p>
    <h3>Page 2</h3>
    <p>
    This is the content of
    <strong>page 2</strong>
    in the jScroll example. Scroll to the bottom of this box to load the next set of content.
    </p>
    <p>Fusce et nunc sed nibh eleifend posuere. Integer sodales, elit sit amet porta varius, augue elit consectetur tortor, vitae rhoncus diam ipsum sed quam. Nullam turpis magna, convallis ultrices auctor ut, gravida eu leo. Pellentesque ut risus nibh, in ultrices ante. Suspendisse potenti. Vestibulum dolor sapien, dapibus non fringilla at, fringilla sed ipsum. In adipiscing mi nec risus hendrerit sollicitudin. Nullam eget felis tellus. Quisque dapibus molestie scelerisque. Curabitur sit amet tortor erat, et pretium nisl. Phasellus posuere, nibh vel feugiat sagittis, ligula lorem porttitor sapien, quis aliquam nisl nulla vel nunc.</p>
    <h3>Page 3 - Final Page</h3>
    <p>
    This is the content of
    <strong>page 3</strong>
    in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
    </p>
    <p>
    This is the content of
    <strong>page 4</strong>
    in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
    </p>
    <p>
    This is the content of
    <strong>page 5</strong>
    in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
    </p>
    <p>
    This is the content of
    <strong>page 6</strong>
    in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
    </p>
    <p>
    This is the content of
    <strong>page 7</strong>
    in the jScroll example. This is the final page of content, and nothing more will be loaded when you scroll to the bottom of this page.
    </p>
    <p>Duis vel vestibulum tortor. Curabitur id nulla nec nunc porta blandit quis gravida eros. Proin dictum sagittis velit porta fringilla. Ut ac libero dui. Donec purus leo, semper condimentum porttitor vitae, feugiat vel elit. Etiam ut erat velit. Proin quis tortor lorem. Pellentesque ut lectus ligula. Donec ullamcorper, tellus at fringilla tristique, quam elit luctus felis, ut venenatis quam erat quis lacus. In consequat imperdiet magna posuere vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sodales, nisl eu accumsan molestie, mauris sem luctus sem, at volutpat turpis lorem non massa. Nulla erat turpis, auctor id congue ac, placerat et velit. Donec id ipsum erat, non pellentesque turpis. Nulla facilisi.</p>
    </div>
    <script type="text/javascript">
    $(document).ready(function() { 
    $('.scroll').jscroll({autoTrigger: true})});
    </script>
    </body>
    </html>]

I need below like Screen shots

Upvotes: 1

Views: 8015

Answers (2)

Vinit Patel
Vinit Patel

Reputation: 2464

see here example for lazy loading and jscroll

$('#product-grid').jscroll({  
        debug: true,
        autoTriggerUntil: 2,
        nextSelector: '.pager a:last',
        contentSelector: '.product-grid',
        callback:call()
    });

function call()
    {
        alert("hi");
        $("img.lazy").lazyload();
    }

here Product-Grid is div id which contains all other div which are same type for example it's product list.

.pager 'a:last' is paging attributes class like a:last means 1>2> next
so 'a:last' get link of next becasue when you trigger you need to load next content so you will get that

now when you get content so how to add and which content you need to add that decide by .product-grid

and callback means call function after trigger so you can add lazyload here

i hope now clear

Upvotes: 4

Sgt Oddball
Sgt Oddball

Reputation: 89

As mentioned your plugin is listed twice (you should only call it once to prevent issues).

Also the class you're attempting to call is .scroll on the div element. There shouldn't be a '.' in a class name.

However when calling it from jQuery the '.' is required as it's shorthand to call any element with the class 'scroll', if you where to call an id called 'scroll' then it would be a #, or if you wanted to address an element, no shorthand is required.

I've cleaned up your code for you and it should run as is now so long as the content is larger than the viewport. 

<body>
    <div class="scroll">
    <!-- html code tag -->
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.scroll').jscroll({
                autoTrigger: true
            })
        });
    </script>
</body>

Upvotes: 0

Related Questions