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.
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.
