Category Archives: Javascript

What is a Javascript Callback Function?

When I was asked what a callback function was, I immediately thought of jQuery; as we so often pass a function as a parameter to a jQuery method. Most of the time, a passed in function will execute after the initial method’s code is complete.

jQuery’s onClick Function; a Callback method.

Examine the sample below of a pretty typical function call to jQuery’s onClick event, whereby you pass a function() as a parameter… The example below includes another call to the jQuery hide function which also passes in an anonymous function which will activate when the hide function has completed.


$( "#clickme" ).click(function() {
 
  //This call, passes a function to alert when the "hide" part is finished.
  $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
   });

});

We can conclude that the Callback pattern is ideal for responding to html events, like the onClick event of an html button. But, this isn’t the only use-case for when to use a Callback Javascript pattern. In addition, the setTimeout() and setInterval() are examples of built-in javascript methods which follow the Callback pattern. But additionally, we may want to take advantage of the Callback pattern in our our code, specifically when we find ourselves reusing a particular piece of code, over and over. Let me provide an example.

A simple callback function

function concatenateName(firstName, lastName, callback){

    //We alert the user's full name.         
    var fullname = firstName + " " + lastName;
    alert(fullname);

    //if the user passes in a function, and it is a function - fire it here.
    if (callback && typeof(callback) === "function") {
        callback(lastName);
    }

}
var greeting = function(lastName){
  console.log('Welcome Ms. ' + lastName);
};

//Call the function and pass in the "greeting" function which will log the person's name to the console.
//
fullName("Jerry", "Seinfeld", greeting);


Official Definition of Callback Function

A callback function, also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction.

When I’m coding I like to think of it as, passing in a piece of code that I would like to execute immediately after the function is complete.

revolution slider

Revolution Slider Generator

Simple, Easy to Use Revolution Slider Builder

Just about every website has a slider these days.

And, if you’re hosting a wordpress website — you’re probably using a Revolution Slider. And if you’re using the revolution slider, then you’re familiar with the Revolution Slider plugin for wordpress. And, if you’ve ever configured your own Revolution Slider, you know that — it’s not a simple task; especially not for a client.

Because building a slider can be a bit of a challenge, I built a simple, “less is more”, interface that clients can use with ease. Sadly, it’s not for WordPress — it is designed to work with straight html websites, but it could be used as a “cut-and-paste” implementation.

Check out demo : Revolution Banner Creator.

You’ll notice that the user is presented with a number of presets. This was done one purpose. The idea after all, is to make it fast and easy for the client, and not to overwhelm with the full list of features Revolution Slider provides.

PLEASE NOTE: The save feature does not work at this time. Includes only a subset of features.

popup

JQuery Plugin for Customer Service Call Center Dialogs

jQuery Plugin for Customer Service Built Better!

Ideal for building Call Center scripts for customer service reps to utlize while taking customer calls.

This small library for building a nested set of dialogs based off of a nested html ul list. Imagine having a series of dialogs with yes/no branches for each. Each button (yes, or no) when pressed, opens the appropriate (yes/no) dialog box, which in turn offers another set of yes/no options… and so on, and so on.

Click the link to view demo: Customer Sales Script Builder

The script is written by simply using plain html, as a nested ul list which represents the series of dialogs and its branches. We’ll let jQuery do the heavy lifting, and create all the dialogs for us.