I really surprised on the power of Jquery , when I started to work with it. There are a lot of usable, user-friendly plugins , which are free, and you can use your own site.
Before you start to work you have to insert the jQuery library in your header of your webpage.
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
I strongly recommend to use a newest minimized version. Why? Because many new features are implemented in it, otherwise the minimized version is smaller, so browsers download it faster.
My first JQuery plugin was very simple, I just created a popup button which is went away a few secs later:
$.fn.clickPopup = function(optionclass){
$(this).append("<div class='"+optionclass+"'></div>");
$("."+optionclass+"").delay(1100).fadeOut(800,function() { $(this).remove(); });
};
If you have written JQuery codes previously, you know that you need to use one of the following before you start your code:
*$(document).ready(handler) * $().ready(handler) (this is not recommended) * $(handler)
In a HTML code I put only one line :
$("body").clickPopup("saved")
If you want a customized button please create it first and then use in your css.
Insert the following code in your css :
.saved{
background-image:url('save.png');
width:160px;
height:50px;
position :absolute;
margin-top:50%;
margin-left:50%;
}YOu can download the source code and see the demo mode later.
