Tuesday, August 24, 2010

How to jQExtensions

UPDATE: jqextensions and the jQTouch photo gallery have been discontinued.

Recently I have received a few questions on how to perform certain tasks using jQExtensions and I thought it would be a good idea to highlight a few of them here in hopes that it will help more people out.

Setup

For the purpose of these examples #myphoto will reference a jQTouch Photo Gallery created by the following call

jQT.generateGallery("myphoto", [/*images*/], {/*options*/});

and #myscroll will reference a div with a vertical-scroll class like:

<div id="myscroll" class="vertical-scroll">

Hopefully that makes sense, let me know if it doesn't.

jQTouch Photo Gallery


Changing options after the gallery has been created


It's pretty simple really:

var options = $("#myphoto").data("jqt-photo-options");
options.slideDelay = 10000;

The options object will now be a reference to the options in use by the script, so any changes that you might make to this object take affect immediately in the execution of the gallery handlers.


jQT Scrolling


How to reset the scrolled element


$("#myscroll > div").trigger("reset");
That's it! Now the scrolled div will be returned to the initial position.


Add dynamic page with scrolling

If your application requires you to create "pages" dynamically in jQTouch, and you would like to still use the scroll extension on that dynamic page, just notify the extension that you have inserted a page like so:
$("body").trigger("pageInserted", {page: $("#my-new-page")});

More Questions

I will make every attempt to keep updating this list, if you have questions like this, feel free to leave a comment, and I will try to help if I can, thanks, hope you find it useful.

14 comments:

  1. I appreciate your extension - great work! Is there a way to bind a click event outside the scrolling area that will scroll to a particular item in a horizontal-scroll area? Can't seem to get it working. Thanks!

    ReplyDelete
  2. @Clint,

    You can scroll to a position in a scrollable area with something like:

    $("#myscroll > div").trigger("scrollTo", [offset, duration]);

    ReplyDelete
  3. Hi, very nice extension. Can i trigger the bottom toolbar to go down to its original position? I added some content below the botttom bar, and i write "Drag up to Search" And i added some search critera in that area. When i click Search i would like the bottom bar to go back to its original pos.

    ReplyDelete
  4. @sam
    Thanks! That was just what I needed - it works.

    ReplyDelete
  5. @andreas
    Information below the bottom toolbar? This tool probably isn't what you are looking for, there isn't really a good way to accomplish that, that I can think of.

    ReplyDelete
  6. These extensions have been a life saver. Especially these functions above. However, after I use the reset function, and then try to swipe to scroll, it does not go to the next slide and rather scrolls just past the slide that was visible before the reset. Am I doing something wrong? Same happens with the scrollto function above.

    ReplyDelete
  7. @mascarimotion,

    Sounds like a bug. Could you create a bug report at http://code.google.com/p/jqextensions/issues/list? An example would be awesome as well, so that I don't have to try to emulate the problem.

    ReplyDelete
  8. Sorry it took me a bit, but I posted on the bug report. I tried to delete a lot of unnecessary code from what I was working on. I didn't get a chance to comment in the code, but hopefully it helps.

    ReplyDelete
  9. I love this extension of jqtouch! thanks a lot! - I have a question.. How can i retrieve the position of the scroller div? I need this to check if the user is scrolling the div or is reading something at the top so i can tell jqtouch don't scroll the div automatically with scrollTo.

    Thanks in advance ;)

    p.s.: sorry my bad english :)

    ReplyDelete
  10. @Quotoman,

    The best way to retrieve the current position is using WebKitCSSMatrix. Example:

    new WebKitCSSMatrix($("#my-scroll-container > div").css("webkitTransform")).m42;

    the m42 property describes vertical position, while m41 describes horizontal position of the transform matrix

    ReplyDelete
  11. Hey Sam - i'm using the horizontal scrolling/slider and I have some pretty big sized buttons inside my scroll container which fire on touchstart.

    While trying to slide to the next pane the touchstart events on these buttons fire - any suggestions on how to bypass that during a swipe?

    ReplyDelete
  12. @michael,

    If the buttons fire on touchstart, they cannot be overridden, because the event would not bubble up, you would have to use on click, which is faux-fired by the scroll handler if there is no touchmove event fired on the Touch handlers.

    ReplyDelete
  13. Hey Sam, I have a container that is setup to vertically scroll when the app is launched. During use, extra info is appended to the container via ajax. However all of the data is not viewable in the scroller. Some is cut out. Is there a way to resize the scroller to include the newly loaded data?

    ReplyDelete
  14. Hi Sam, i have a form select box inside the scroll div. i'm having a problem which is can't scroll back to the top of the page when after i clicked on the form select box.

    May i know that, is there any solution for that?

    ReplyDelete