ckportfolio.com - jQuery on jsFiddle

jQuery on jsFiddle

jQuery on jsFiddle

Now, it is time to move onto using JavaScript and jQuery. In order to test out the jQuery integration, let us write the following statement:

$("#content").hide();

Please note that each jQuery command consists of three parts: dollar sign ($), selector ("#content"), and a specific function. Dollar sign denotes that this statement is a jQuery-exclusive command (will not run if the page detects no jQuery library), and selector works just like CSS: hashtag for unique ID items, and period (.) for class items.

Upon pressing "Run," you should notice that your content pane has disappeared along with its child <div> tags. Feel free to replace "hide" with "slideUp," and you will notice that the content pane slides up instead of immediately hiding away.

You also might be wondering where I am getting all these functions from. Please refer to the extensive documentation offered on jQuery official website: http://api.jquery.com/

If you can confirm that jQuery works well, comment that statement out. it is time for us to "control" when these actions exactly kick in -- by using "triggers."

All jQuery commands can be classified as "effects" or "triggers (events)." Effects, as you can tell from the name, cause a certain change to the selected elements. Triggers, on the other hand, attach a "listener" to the selected elements -- and when those selected elements are "triggered," each listener is expected to perform a series of predefined effects. For instance, compare the following statements:

$("#content").slideUp();

$("#logo").click(function(){
    $("#content").slideUp();
});

The first statement allows us to simply slide up our #content element. The second one, however, attaches a listener that knows when #logo has been clicked -- and slides up #content element upon detecting that click.

A phrase wrapped around by $("#content").slideUp() in the second example is called "anonymous function" -- that allow us to declare a function without putting a name to it. We will further explore this concept next week, but please make sure that each anonymous function follows the following format:

function() {
// jQuery code goes here.
}

You should notice that each HTML element is equipped with unique ID attributes. While there are ways for us to select HTML elements without using hashtag, let us focus on attaching triggers to one element at a time.

Our "About" menu item has an identifier "menu_about," so let us write the following statements:

$("#menu_about").click(function(){
    $(this).addClass("highlight");
    $(this).siblings().removeClass("highlight");
});

"This" is a selector that can only be used in triggers, and it simply refers to the clicked item itself. Upon selecting itself, it adds class "highlight" -- turning this item to red. After, it selects all its siblings (other elements that are sitting in the same hierarchy level) and removes class name "highlight." Let us create two clones of the above statement and change the selector accordingly:

$("#menu_about").click(function(){
    $(this).addClass("highlight");
    $(this).siblings().removeClass("highlight");
});

$("#menu_clients").click(function(){
    $(this).addClass("highlight");
    $(this).siblings().removeClass("highlight");
});

$("#menu_contact").click(function(){
    $(this).addClass("highlight");
    $(this).siblings().removeClass("highlight");
});

While the code may seem a little redundant (in the future, we should definitely be able to rewrite this so that we take up less than four lines to achieve the same goal), you should be able to see that the menu items light up in red (and others turning to black) upon click.

Now, we can move onto manipulating "content" pane upon clicking a navigation item:

$("#menu_about").click(function() {
    $(this).addClass("highlight");
    $(this).siblings().removeClass("highlight");
    $("#content_about").slideDown();
    $("#content_about").siblings().slideUp();
});

The first of the additional lines should be self-explanatory: Upon clicking #menu_about, #content_about will slide down. The other statement is responsible for selecting all the "siblings" of #content_about and slide them up. We can proceed with applying the same logic to the other two triggers:

$("#menu_clients").click(function() {
    $(this).addClass("highlight");
    $(this).siblings().removeClass("highlight");
    $("#content_clients").slideDown();
    $("#content_clients").siblings().slideUp();
});

$("#menu_contact").click(function() {
    $(this).addClass("highlight");
    $(this).siblings().removeClass("highlight");
    $("#content_contact").slideDown();
    $("#content_contact").siblings().slideUp();
});

We need to make sure that the selectors have been correctly changed so that navigation items display correct items upon click. At this point, all three navigation items will display and hide relevant content panes. If we would like the first item (About) to be selected upon loading the page, we can embed the following statement in the code (anywhere, but bottom is preferred):

$("#menu_about").click();

Now you should be able to see that "About" is automatically clicked upon load. We can change the selector to have "Contact" load first as well. Below is the screenshot of the completed fiddle (available at http://jsfiddle.net/riskun/64eCh/):

Screencast Recording

https://www.dropbox.com/scl/fi/k3c3ypelvjz33g70yw91x/Page-2.mov?rlkey=eyp1vfwfbwdfiovasec14migz&dl=0

Fin