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 Typing Text using jQuery with Larry my parrot

This was the first time I recorded Larry at the same time I recorded myself doing a lesson. Let’s just say he didn’t say what I wanted him to say. Too many F-U’s in this one. The good thing is he doesn’t say the word, he actually says the letter F then the letter U. Either way, its pretty cool how easy this was to do and I am sure Larry will be saying a lot more as he gets comfortable in his new setting.

On to coding and the video!

Continue reading “Simulate Typing Text using jQuery with Larry my parrot”

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”

Using jQuery Selectors

This video is about jQuery selectors and how you can use them to manipulate other DOM elements in the HTML. Watch this video to get to understand three different ways of selecting elements.

Click here to see the JSFiddle!