Daniel Nitsikopoulos

Category Archives: tutorial

Getting started with AJAX.

Getting started with AJAX.

Posted on

When it comes to building an interactive web application, creating a seamless interaction between the client-side and the server-side can be very important depending on the experience you want to give your user. The trouble is, however, that most server-side languages can’t access client-side code, and therefore can’t relay that information back to the server to execute or save it and vice versa – without a page refresh anyway, and that’s what we’re aiming to avoid here.  For most people, getting started with AJAX can be a daunting thing which is why I’m writing this post as an introduction. I won’t be presenting any code, but rather providing a walkthrough of the steps you will need to take to complete an AJAX request.

So let’s get started!

    1. Trigger and Listen
      To start things off we’ll need to tell our browser when to send a request . This can be as simple as adding a listener that listens for a button’s click event.
    2. Collect our data
      Most of the time, AJAX is used to submit a form so at this point, it’s a good time to collect each field’s value and prepare something to send to the server. This can take many forms, depending on how your server handles  incoming requests. The most common way however is just to build a query string and …

Infinite loop – looping jQuery functions.

Posted on

I discovered this method when building my tweets bubble in the header of this page, getting the div to move was one thing, and easy enough, but getting it to loop and look like it was bobbing was another. However, the trick here is very simple. The trick here is to use callbacks

Writing the function

The first step is to write your function as it would be after one cycle. In this case, mine is:

jQuery.fn.moveUpDown = function(){

$(this).animate({ "top": "-=10px" }, 1500 });

}

Then add the callback for it to move back up:

jQuery.fn.moveUpDown = function(){

$(this).animate({ "top": "-=10px" }, 1500,

function(){$(this).animate({"top":"+=10px"},1500 });

});

}

Finally call the function again

This last step calls the function we defined as moveUpDown:

jQuery.fn.moveUpDown = function(){

$(this).animate({

"top": "-=10px"

}, 1500, function(){

$(this).animate({"top":"+=10px"},1500, function(){

$(this).moveUpDown();

});

});

}

Don’t forget to call your function to get the loop started:

$("#header_image").moveUpDown();