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 »
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 »
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 »
Every year at Halloween, my company offers prizes to the best dressed employees. For the past two years I have one as well as my co-worker that partakes in our crazy costumes. You may be wondering what this has to do with drag and drop, don’t worry I’m getting there.
This years prize happened to be a monkey slingshot. Basically you place your index and middle fingers in pockets attached to the monkey’s arms. You then proceed to pull back and let fly. Well, as you can imagine, we had a lot of fun with this guy, so much fun in fact we broke it 
So one day after work I was messing around with drag and drop and some jquery animations. I was quickly able to get a “mock slingshot” shooting at a target and this is what I want to share today. Read more »
Recently on a project I was working on, I was tasked with fixing drag and drop that was terribly slow. The drag and drop was implemented with scriptaculous on a calendar system. When you clicked an event to drag it it took about 5 seconds before the page would actually let you drag it! This was clearly unacceptable and it has to be possible because Google Calendar is lightening fast.
The first thing I did was download and setup jquery to see if it was related to how scriptaculous was created. After setting up jquery, it was just as slow. This lead me to believe that it was a fundamental problem with how the drag and drop was set up in both libraries. Read more »