{jQuery Added} New Interface

As you can see, there's a weird button float at the left of the main content. This button will output some post details. Example, date & author.

Before

After

This button was officially launched at 4:50pm today. I used " jQuery " to create the animated sliding up/down content. A snippet from the code that I used,

$(document).ready(function() {
        $("#add_noti").click(function() {
$(this).hide();
$("#remove_noti").show();
            $("#detail_lo").slideDown("fast");
return false;
        });
$("#remove_noti").click(function() {
$(this).hide();
$("#add_noti").show();
            $("#detail_lo").slideUp("fast");
return false;
        });
    });

For a Professional Web Designer, this is not the first time they heard this. They often used this to make their design more animated & accurate with customer sense. For those who doesn't know what is " jQuery " yet, please read details below.


jQuery - Introduction

jQuery is a lightweight, " write less, do more ", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. So in a short way, jQuery is compressed code from JavaScript. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code and also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

How to start working with jQuery ?
jQuery usually comes as a single JavaScript file containing everything comes out of the box with jQuery. It can be included within a web page using the following mark-up:

Load jQuery : <script type="text/javascript" src="jQuery file location"></script>
For an Example : <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
NOTE : Without this, jQuery can't functionally.
_________________________________________________________________________________


As a developer, the decision of where and how to write jQuery code lies on you. I prefer to use the second method as it ensures that my complete page is loaded in the browser and I am ready to play with any element available on the page.

The video of this chapter is available here.