The new for loop in jQuery 3

Love the fact that the for loops are now iterations in jQuery. The old way of doing loops like this:

var $elements = $(".myclass");
for (var x=0; x< $elements.length; x++){
       $elements[x].toggleClass("shadow);
}

Can now look like this in jQuery 3:

var $elements = $(".myclass");
for (var element of $elements){
       element.toggleClass("shadow);
}

Simulate a Press with jQuery Animate using JSFiddle

In this video I demonstrate how you can simulate a cursor press using jQueries animate API in JSFiddle. By cube mate Larry made some announcements in this video and since he often speaks I decided to include him in some of them and translate what he is saying. He for some reason just keeps saying the word “four”…

So, I digress, I ended up having a double call to animate, where once the cursor is shrunk, we call the click action and then do an additional animate to restore the cursor to its original size. You can mess with the 500 millisecond delay to have a slower press or a faster press. Make sure you check out the JSFiddle!

 

Animating a Cursor with jQuery and JSON

A followup to the last video, I take the same concepts as before but now I generalize the steps into a JSON array. The JSFiddle code then executes those actions in the array.

In the code I show how to use a recursive function with the window.setTimeout call and ending the animation once the entire array is processed.

 

Animating a Cursor with jQuery

This video is about using jQuery and the animate API to move a graphic (cursor) from one location to a DIV, then simulating a click event on that DIV. This allows you to instrument tutorials within your web applications. Stay tuned for more on that!

You can see the JSFiddle code below:

Click here for the JSFiddle!

Toggling Classes in jQuery

This video is about toggling classes using jQuery. Here I show how you can make a collapsable DIV by simply toggling a class using the jQuery API.

You can see the JSFiddle code below:

Continue reading “Toggling Classes in jQuery”