JQuery: Finding Object in the Room

This is a simple application of "addClass", "removeClass", "show" and "hide" in JQuery.
Here's the demo showing it:

The trick is position the arrow on the object as shown in the demo then on click, display it. 
Here's the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Find Object</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
div#room{ background-image: url(room.jpg); margin: 0 auto; width:794px; height:510px; position:relative}
#bear{  width: 25px; height:29px; position:absolute;top:160px;right:405px}
#panda{  width: 25px; height:29px; position:absolute;top:60px;right:280px}
#ball1{ width: 25px; height:29px; position:absolute;top:365px;left:0}
#ball2{  width: 25px; height:29px; position:absolute;top:300px;left:150px}
#clock1{  width: 25px; height:29px; position:absolute;top:90px;right:5px}
#clock2{  width: 25px; height:29px; position:absolute;top:70px;left:295px}
.show{ background-image:url(here.gif); height:29px; width: 25px}
a{ cursor:help}
p{display:none; font-family:Arial, Helvetica, sans-serif}
</style>

</head>

<body>
<div id="room">
<a href="#" class="animals" id="bear"></a>
<a href="#" class="animals" id="panda"></a>
<a href="#" class="balls" id="ball1"></a>
<a href="#" class="balls" id="ball2"></a>
<a href="#" class="clocks" id="clock1"></a>
<a href="#" class="clocks" id="clock2"></a>
</div>
<center>
<button id="showanimal">Bears </button>
<button id="showball">Balls </button>
<button id="showclock">Clocks </button><br/>
<p id="animal">Showing Bears</p>
<p id="ball">Showing Balls</p>
<p id="clock">Showing Clocks</p>
</center>


<script type="text/javascript">
$(document).ready(function() {
    $('#showanimal').click(function() {
        $("a.animals").addClass('show');
  $("p#animal").show();
  $("p#ball").hide();
  $("p#clock").hide();
  $("a.balls").removeClass('show');
  $("a.clocks").removeClass('show');
    });
 $('#showball').click(function() {
        $("a.balls").addClass('show');
  $("p#ball").show();
  $("p#clock").hide();
  $("p#animal").hide();
  $("a.animals").removeClass('show');
  $("a.clocks").removeClass('show');
 });
 $('#showclock').click(function() {
        $("a.clocks").addClass('show');
  $("p#clock").show();
  $("p#ball").hide();
  $("p#animal").hide();
  $("a.animals").removeClass('show');
  $("a.balls").removeClass('show');
 });
});
</script>
</body>
</html>

Popular posts from this blog

Set table width to 100% on PDF export in Datatables

Add/Subtract Single Digit Number in Assembly Language