Using Libraries

JQuery

This unit has taken me more than 10 hours to complete. That's because I needed to learn JQuery and test what I have learned as I go along the tutorial from www.w3shools.com/jquery and www.jquery.com.

The first JQuery I've tried was to convert my three JavaScript files addarganoil.js, addexfoliatingsoap.js addlavaclay.js into one file. This task was possible to achieve using JavaScript but with JQuery was easier as there is less code to write. The problem I faced was to call a custom function from a JQuery function. What I found out is I needed to add my custom function to the JQuery library and that is possible by adding the function as follow:

$.fn.myFunctionName = function(argumentList) {

     // code here

});

and then to call this function within another function you can do the following:

$.fn.functionName(argumentList);

Using this method you can also extend the JQuery method to make your own functions and they would be called like any other JQuery function.

I had a problem using JQuery to manipulate a div that moves upwards when the user clicks on the add button. This div indicates that the item has been added. When I use Jquery the behavior is unpredictable and the animation is slow. But, when I use pure JavaScript the animation works like a charm. So, I decided to leave that section that deals with the animation controlled by JavaScript.

The second use of Jquery was to assign a CSS class to my main navigation links depending on the current page the user is on. I needed to know which page the user is on so I used the window object to retrieve the location variable that holds the pathname of the page. Then from that pathname, I retrieve the href of the page. Finally, I compare the href of the page with the navigation links and if they match I assign the desired class to that that link can have a different background indicating which page the user is on. This task was trivial other than finding a way to retrieve the href.

My last use of JQuery was to rewrite the mycart.js file with JQuery. And I did this so that I can practice more and hoping that I would learn more from it. I found out that it is easier to work with JQuery than JavaScript but never forget that learning JavaScript first helped me a lot. The code is less in terms of line counts when writing it in JQuery.

With Jquery we can chain together actions or methods, and run multiple jQuery methods on the same element within a single statement. For example:

$("#myDiv").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

this example chains together the css(), slide(), and slideDown() methods.

Using jQuery was not hard for me it actually made coding much easier.

Visit my my website by clicking this link.

This is my zipped version of my website: 

The files where I've used JQuery.