Category: jQuery

  • PhoneGap and Jquery Mobile – A Truly Winning Combination

    Any regular readers of jQuery tutorial may have noticed that I finally got around to updating and adding a new book under “My Books” on the right-hand side of the screen.  Yes, I not-so recently published my third book (and second with O’Reilly) earlier this year.

    The book is called 20 Recipes for Programming PhoneGap – Cross-Platform Mobile Development for Android and iPhone.  Throughout this book, I get you up and running quickly using the PhoneGap API along with the Jquery Mobile API to take care of the pesky mobile design issues. On occasion you may get errors like How to check for undefined in JavaScript so hopefully this will help.

    Much like I did when I released my MVC 3.NET book, I provided a free chapter from the book for my readers.  Well here is an excellent recipe sample from my PhoneGap book.  The goal of this recipe is to provide a standard approach to automatically fire (or trigger) a JavaScript function when a PhoneGap page has loaded – either on initial launch or after the user has navigated within the application.

    (more…)

  • CakePHP 2-0 Ajax Pagination WITHOUT The Pages

    As I promised in Creating AJAX Pagination WITHOUT The Pages, I have created a full CakePHP example of performing AJAX pagination without the pages.  The goal of this article is to display news articles to a user.  As the user scrolls down, we will dynamically load in additional content so they can continue to scroll and read. This example focuses on PHP but if you’re looking for Node.js tutorial I’ve also implemented this exact feature with Node.js as the server-side code.

    One of our challenges is to not load too much or too little content.  For more details on this, please review the Creating AJAX Pagination WITHOUT The Pages.  Let’s begin. (more…)

  • Creating AJAX Pagination WITHOUT The Pages

    You may have noticed some changes in the way a few websites work.  For example, if you go to Google Images and do a search, there is no pagination (1, 2, 3, Next, Previous) anymore.  Instead Google loads the images as you need them, e.g. when you scroll down. If you’re looking for more Node.js tutorial I’ve compiled an incredible list that will take you from a Node.js beginner to expert.

    Another example is Facebook’s newsfeed.  I read an excellent article a few months back on their developer blog about this design decision.  By default, Facebook will only load a “full screen” of information with minimal scrolling which triggers a Javascript event.  However, as soon as you start scrolling they begin to fetch and display more content.  In the article, Facebook described this decision as a bandwidth saver.  They found that a lot of people would navigate away from the newsfeed before ever scrolling down or only looking at the top content.  By only showing 10-15 posts, they can keep the size of their newsfeed down oppose to loading 30+ posts that are never going to be read!  File size can easily go down 100s of KBs per page view and when you’re talking about millions of page views per second, that’s a significant number. (more…)

  • Maintaining the back button with AJAX

    When I blogged about whether or not you can use too much AJAX on your website.  The short answer was no; with one caveat being that you must not lose the user interaction experience.  In this scenario I’m referring to the back button.  If the user has “felt” like the content changed, they are likely to click the back button to return.  If they do this, it’s important for them to “go back” to where they “think” they were and not the last page that was loaded without AJAX and simply relying on Javascript events!  I’ve put together a quick example of how to do this. (more…)

  • Jquery vs Prototype/Scriptaculous

    About two years ago I started learning AJAX and drag and drop.  The first project I applied it to was an existing project that was using Prototype and Scriptaculous.  So, I didn’t really have a choice as to what library I was going to use.

    Two years later, I do not know Jquery all that well, but I am absolutely falling in love with.  Doing things with Jquery seem to be 10 times easier to me.

    I always struggled with the each() function that I seemed to be constantly using with Prototype.  Jquery seems to understand this and simplify things for us.

    In this article, I’m going to describe my top reasons why I am becoming a Jquery lover over Prototype. (more…)