Browse by Tags

JQuery: full control with the $.ajax function
Wed, Aug 19 2009 15:17

In the previous posts, we’ve met several helper methods which simplify the code needed to perform remote out-of-band requests. In this post, we’ll be introducing the all mighty $.ajax method. This method is used by all the other methods we’ve seen until now and gives you complete control over the request. Currently, you’re supposed to use an anonymous object... Read More...

by luisabreu | 2 comment(s)

Filed under: JQuery

JQuery: deferred script loading
Wed, Aug 19 2009 12:18

Deferred script loading is a technique which can be used to reduce the initial loading time of any page. The idea is to load only the basic JavaScript code that is necessary for the initial loading operations of the page and then perform additional downloads for features that the user *might* use after initial rendering. This is a fairly known and common technique... Read More...

by luisabreu | 1 comment(s)

Filed under: JQuery

JQuery: the $.getJson method
Wed, Aug 19 2009 11:44

In the previous post , we’ve met the $.get and $.post methods. At the time, we’ve seen how we could easily load a JSON payload returned from the server. If you know that you’ll be getting JSON and that the request will be an HTTP GET, then you can use the $.getJson utility function instead of the $.get function. To illustrate its use, we’re going to reuse the... Read More...

by luisabreu | with no comments

Filed under: JQuery

JQuery: the $.get and $.post methods
Wed, Aug 19 2009 11:27

In this post we’ll keep looking at JQuery ’s helper methods for remote calls and we’ll see how we can use the get and post functions for performing HTTP GET and POST requests. Both functions (notice that these are utility functions and not JQuery object methods!) expect several parameters: $.get( url, [data], [callback], [type] ) $.post( url, [data], [callback... Read More...

by luisabreu | 2 comment(s)

Filed under: JQuery

JQuery: getting started with AJAX
Mon, Aug 17 2009 14:34

Today marks the beginning of using JQuery for handling AJAX requests. This is going to be a short post and we’ll be talking about the load method. The load method is able to perform get or post requests to replace the contents of the elements contained in the wrapped set with the response returned from the server side. As you’ve probably guessed, this method... Read More...

by luisabreu | 5 comment(s)

Filed under: JQuery

JQuery: running custom animations
Fri, Aug 14 2009 14:45

In the previous posts , we’ve met several methods which run some predefined animations. Instead of trying to add methods for all possible animations, JQuery has decided to introduce a helper function which you can reuse for animating several css properties (notice that you can only animate properties which expect numeric values). Currently, there are two “overloads... Read More...

by luisabreu | 1 comment(s)

Filed under: JQuery

JQuery: sliding
Thu, Aug 13 2009 9:59

In this post, we’ll take a look at the JQuery methods used for sliding animations. We’ve got 3 methods for executing sliding animations: slideDown: shows all the hidden elements contained in the wrapped set of the JQuery object. slideUp: hides all visible elements defined in the wrapped set. slideToggle: toggles the elements between hidden and visible. The methods... Read More...

by luisabreu | 1 comment(s)

Filed under: JQuery

JQuery: fading elements
Wed, Aug 12 2009 11:29

In this post we’ll keep looking at the animations and we’ll see how to add fading effects to an element. Unlike showing and hiding, which affect several css properties of the element, fading will only affect the opacity (alpha filters if you’re running IE) and display of an element. Currently, JQuery offers 3 methods: fadeIn, fadeOut and fadeTo. Here’s a small... Read More...

by luisabreu | 1 comment(s)

Filed under: JQuery

JQuery: getting started with effects
Tue, Aug 11 2009 11:00

JQuery offers support for basic effects, like showing, hiding, fading and sliding. Besides that, it also facilitates the construction of new animations by introducing some custom methods which you can reuse to produce some basic animations. Today we’ll be concentrating on two methods: show and hide. Both these methods have two “overloads”: one takes no parameters... Read More...

by luisabreu | with no comments

Filed under: JQuery

JQuery: utility functions X – extending objects
Mon, Aug 10 2009 15:06

This is the last post of the day on JQuery and we’re going to talk about extending objects with the extend utility function. The idea is simple: how can you add properties from an object to another and get a new object? For instance, suppose you’ve got these two anonymous objects: var student = { name: "Luis" , age: 20 }; var address = { street: "some... Read More...

by luisabreu | 1 comment(s)

Filed under: JQuery

JQuery: utility functions IX – transforming arrays
Mon, Aug 10 2009 14:51

The map utility function can be used to translate all the elements contained in the array into other set of items. You’ll find this method useful when you need to transform a collection of items A into items. The function expects two parameters: an array of items that is going to be translated; a callback function which will be called for each item and is responsible... Read More...

by luisabreu | 3 comment(s)

Filed under: JQuery

JQuery: utility functions VIII – creating arrays from other objects
Mon, Aug 10 2009 14:30

The utility function makeArray is a helper which is used internally by JQuery to transform collections of nodes into arrays. Even though this function is “public”, you’re not expected to use it much. Here’s its current internal implementation: makeArray: function ( array ) { var ret = []; if ( array != null ){ var i = array.length; // The window, strings (and... Read More...

by luisabreu | 3 comment(s)

Filed under: JQuery

JQuery: utility functions VII – concatenating arrays
Mon, Aug 10 2009 11:23

In this post we’re going to take a look at the merge utility function. This function expects two arrays that will be merged. The method returns a reference to the first array augmented with the elements contained on the second (which remains unchanged). Here’s a small snippet that shows how to use this function: var arr = [0, 1, 2]; var anotherArr = [-1, -2,... Read More...

by luisabreu | 1 comment(s)

Filed under: JQuery

JQuery: utility functions VI – checking if an item is in an array
Mon, Aug 10 2009 10:34

In the last post we’ve seen how to get all the items that comply with a specific filter. In this post, we’re going to see how to see if an item is in an array. The easiest way to do that is to use the inArray function. Take a look at the following snippet: var arr = [0, -2, 4, 6, - 9]; var positives = $.inArray(4,arr); The inArray method expects two parameters... Read More...

by luisabreu | 1 comment(s)

Filed under: JQuery

JQuery: utility functions IV – interacting through arrays
Fri, Aug 7 2009 15:07

In this post, we’re going to look at the each utility function. This function expects two parameters: an object which is going to be enumerated and a callback function reference which is going to be called for each item in the enumerated set. It’s important to understand that this is different from the each jQuery method (which is used for interacting over each... Read More...

by luisabreu | 1 comment(s)

Filed under: JQuery

JQuery: utility functions – testing helpers
Fri, Aug 7 2009 14:32

One of the things you might need to do is check if a reference is an array or a function. JQuery introduces two simple utility functions for performing these checks: the isArray and the isFunction methods. Both of them expect a single parameter which is used to perform the adequate test. Here’s a really dumb example that shows how to use the isFunction function... Read More...

by luisabreu | 1 comment(s)

Filed under: JQuery

JQuery: utility functions II – trimming strings
Fri, Aug 7 2009 14:21

In this post we’re going to talk about the helper trim method. This is really a simple function which removes any leading or trailing whitespaces from the passed string. Notice that the method uses regular expressions and considers white spaces as any char that matches spaces, form feed, new line, return, tab and vertical tab characters. Using the function is... Read More...

by luisabreu | 1 comment(s)

Filed under: JQuery

JQuery: utilities functions I – browser detection
Fri, Aug 7 2009 11:54

Today we’re going to start looking at the JQuery utilities function. The utilities function include several low level helper methods used on JQuery ’s core. The good news is that you can also reuse them in your own code. In this post we’re going to take a look at the browser detection helper functions. Before v1.3, JQuery had several helper objects for getting... Read More...

by luisabreu | 3 comment(s)

Filed under: JQuery

JQuery: common “event pairs” helpers
Wed, Aug 5 2009 10:48

There are certain scenarios where you handle events in “pairs”. For instance, I guess we’ve all written JavaScript code for handling mouse over and mouse out events (which, btw, is also commonly known as hovering). Take a look at the following snippet: < div > Mouse over turns green! Mouse out turns black... </ div > < script type ="text/javascript">... Read More...

by luisabreu | 1 comment(s)

Filed under: JQuery

JQuery: more on the triggerHandler method
Wed, Aug 5 2009 10:14

In the previous post I’ve shown you some code on how to use the triggerHandler method. At the time, I said that events would bubble even though the docs say that they won’t. I based my conclusions on a small simple test I’ve written. ingmar added more information on a comment saying that if you have a more complex tree, you won’t get the “correct” bubbling. For... Read More...

by luisabreu | 2 comment(s)

Filed under: JQuery