Can you give more examples? Special for events.

Make sure you have updated to the latest version. There was a bug in the iScroll

examples (events) about jquery-mobile-iscrollview HOT 6 CLOSED

watusi commented on July 26, 2024

examples (events)

from jquery-mobile-iscrollview.

Comments (6)

jtara commented on July 26, 2024

Can you be more specific about what you are looking for? Are you looking for examples in the documentation, or in the demo? Any particular event(s)?

from jquery-mobile-iscrollview.

commented on July 26, 2024

It will be good if will be added more examples with using events/methods/properties. For my case, I can not listen any event.

My code:

<!DOCTYPE html>

<html>
    <head>      
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />

        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

        <link rel="stylesheet" href="css/jquery.mobile.iscrollview.css" />

        <script src="js-libs/jquery.actual.min.js"></script>
        <script src="js-libs/iscroll.js"></script>
        <script src="js-libs/jquery.mobile.iscrollview.js"></script>

        <script>
            $(document).bind('pageinit', function() {
                console.log('pageinit');

                var $sa = $('#srollarea');

                $sa.live("iscroll_onscrollstart", function(e) {
                    console.log('live');
                });

                $sa.bind("iscroll_onscrollstart", function(e) {
                    console.log('bind');
                });

                $sa.on("iscroll_onscrollstart", function(e) {
                    console.log('on');
                });

                $('.iscroll-view').bind('iscroll_onscrollstart', function(e) {
                    console.log('live2');
                });

                $('.iscroll-view').bind('iscroll_onscrollstart', function(e) {
                    console.log('bind2');
                });

                $(document).delegate('.iscroll-view', 'iscroll_onscrollstart', function(e, d) {
                    console.log('delegate');
                });
            });
        </script>
    </head>

    <body>
        <div data-role='header'><p>Header</p></div>
        <div data-role="page" data-dom-cache="true">
            <div id="srollarea" data-iscroll>
                <div>
                    <ul data-role="none">
                        <li> 1 </li>
                        <li> 2 </li>
                        <li> 3 </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

thnx for help

from jquery-mobile-iscrollview.

jtara commented on July 26, 2024

See pull-example.hs for an example of binding to an iscrollview event.

If you're binding from JS code embedded in the page itself, don't wrap it in a pageinit callback. That code will never run, because pageinit has already occurred when the JS code in the page is defined. Also, you need to insure that the JS code is at the end of the page.

I prefer to do all my binding/delegating from JS code called from <head>. Then I can delegate looking for the creation of a specific page and bind to elements on that page, or else just delegate elements to the document. (The latter is somewhat less efficient, since the events have to bubble all the way up.)

By the way, you no longer need to include jquery.actual in your <head>. It is no longer used as of 1.2.

from jquery-mobile-iscrollview.

commented on July 26, 2024

Hmm...
Sorry but I can not binding to any events. I just add to examples code(pull-example.js) my code and I don't retrieve events:

  function onScrollStart(event, data) {
    console.log('iscroll_onscrollstart occured');
  }

  $(document).delegate("div.short-pull-demo-page", "iscroll_onscrollstart", function(event, data) {
        var v = data.iscrollview;  // In case we need to reference the iscrollview
        console.write("iscroll_onscrollstart occured");
        });

  $(document).delegate("div.short-pull-demo-page", "pageinit", 
    function bindShortPullPagePullCallbacks(event) {
      $(".iscroll-wrapper", this).bind( {
      iscroll_onpulldown : onPullDown,
      iscroll_onpullup   : onPullUp,
      iscroll_onscrollstart : onScrollStart
      } );
    });

from jquery-mobile-iscrollview.

jtara commented on July 26, 2024

Make sure you have updated to the latest version. There was a bug in the iScroll events. (Not the widget events like iscroll_onpulldown, but events generated by iScroll itself, like iscroll_onscrollstart).
Where did you put the code shown above? As I pointed-out earlier, this will not work if it is in the HTML file.

If you put this in the HTML file itself, make sure it is the last thing in <body> (not <head>) and just call .bind(). The delegation code above will not work in the HTML file itself because when the code is executed, the pageinit event has already occurred.

$(".iscroll-wrapper", $.mobile.activePage).bind(...)

If your code is executed from <head>, (like pull-example.js is) then the way you have done it will work. The second way (like in pull-example.js) is more efficient, because the event doesn't have to bubble-up to the document. (i.e. just bound directly to the wrapper, the same as the code I show above for executing the code in the HTML file.)

from jquery-mobile-iscrollview.

jtara commented on July 26, 2024

I've added several examples of how to bind to events in the documentation.

from jquery-mobile-iscrollview.

examples (events) about jquery-mobile-iscrollview HOT 6 CLOSED

Comments (6)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent