In today’s article on Webistrate I explore Transitioning AJAX Content into view with $.animate() using some basic jQuery. Please note, it doesn’t look overly pretty because I’m not a designer, but the functionality is there and it can be prettied with relative ease.
Today a new article was released on Webistrate that discusses how to use jQuery Templates to speed up your websites AJAX queries by return back JSON data and then doing the visual enhancements on the client-side with the use of a predefined jQuery template.
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.
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. 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. Read more »
Last week 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! I’ve put together a quick example of how to do this. Read more »
At my work, whenever we have a link to delete records, we always have a simple Javascript confirm dialog pop-up. The confirm dialog just does the standard, “Are you sure you wish to delete this record?” with an OK and Cancel button. If the user clicks cancel, the record is not deleted, if they click OK, the record will be deleted.
If you’ve done some Facebook development, you will notice quickly that the alert() and confirm() functions do not work. I’ve found this slightly annoying, so I’ve written a very simple Javascript function that let’s me use the nifty dialogs that Facebook provides us. Read more »
Recently at work, we’ve started diving into Google Gadgets. They are quite fun and really extremely easy to build. In this article, I’m going to get you started creating your very own Google Gadget.
Sit back and reserve a few minutes of your time and you will be well on your way in no time! Read more »
It feels like it has been a lifetime since my last blog! I must apologize for the long delay, but between finding the time and finding a good topic to blog about, it’s being difficult.
In today’s article, it’s been a while since I’ve needed to use either the setTimeout or setInterval functions and it seems many people are not familiar with the setInterval function.
Let’s start by describing the two. Read more »
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. Read more »
One of my first articles discussed YSlow. An excellent Mozilla add-on to help you understand why your web page may be loading slowly.
In that article, I describe the importance of gzip, minify, and grouping your Javascript and CSS code into one file each.
Just recently I was surfing CakePHP’s bakery and found a nice add-on to simplify the process and make it super easy. Read more »
CakePHP offers a really nice built-in tree management. In fact, at a bare minimum you simply need to create a table with 2 extra columns, tell your model to act like a “tree” and rather than doing a find(‘all’) you do a generatetreelist() or a find(‘threaded’) and CakePHP takes care of the rest.
After doing a quick test, I was quite impressed with what CakePHP did for me, but I was not satisified. I wanted to create a really slick category management system that I can re-use and show off. Well, in this tutorial I go about 90% of the way. The only thing I didn’t have time to finish was, rather than redrawing my tree through AJAX, use DHTML and dynamically update my tree after dragging and dropping. Don’t worry, I plan to finish this with a part two soon. Read more »