hi folks.
I haven't written anything on programming for a long time. So here I come with something interesting as well as funny. In this very article I'll gonna show you to write a simple CLICK ME prank with Jquery. I got amazed when I saw first time something like this and decided to write it by myself and like always it seems I did ;-) Guys who are not familiar with JQuery don't worry, I'll make it simple for you like a cake walk, just keep reading. :)
JQuery is set of libraries of Java Script which is popularly known as an scripting language. We'll gonna create a simple HTML page with some additional code of JQuery to spice the things up. And Yeah, people who are not aware with Click Me prank just keep reading and get amazed with the result :P
Go Ahead,
1) Open Notepad.
2) Copy the below code into it
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#b1").hover(function(){
$("#b1").hide();
$("#b2").show();
});
$("#b2").hover(function(){
$("#b2").hide();
$("#b1").show();
});
});
</script>
</head>
<body>
<br><br><br><br><br><br><br>
<center><table cellpadding="10px"><tr><td>
<input type="button" id="b1" value="Click Me"></td></tr><tr></tr><tr></tr><tr><td>
<input type="button" id="b2" value="Click Me" hidden="hidden"></td></tr></table>
</center>
</body>
</html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#b1").hover(function(){
$("#b1").hide();
$("#b2").show();
});
$("#b2").hover(function(){
$("#b2").hide();
$("#b1").show();
});
});
</script>
</head>
<body>
<br><br><br><br><br><br><br>
<center><table cellpadding="10px"><tr><td>
<input type="button" id="b1" value="Click Me"></td></tr><tr></tr><tr></tr><tr><td>
<input type="button" id="b2" value="Click Me" hidden="hidden"></td></tr></table>
</center>
</body>
</html>
4) Double click on the file to open it in your browser and enjoy. You're free to amaze your friends with this cool script.
Exaplanation:
We use the jQuery inside the script tags. Since all the used events are crystal clear. We actually used two button inside the table out of them one is hidden by default. When any user takes the cursor of mouse on the existing button then it'll get disappear and the other one will show up. This same thing keep going by times & times and at the end user will get frustrated :P
If you're having troubles in executing this script on your system then here is an alternative,
1) Download the jQuery file from here
2) Extract the downloaded file and rename it as jquery.js
3) Now put that file in the same directory as your clickme.html and replace the 4th line in the code as
<script src="jquery.js"></script>
Have fun with your self created CLICK ME prank.
For any reference on JQuery > go here
Feel free to drop your comments and queries.
No comments:
Post a Comment