JQuery: Finding Object in the Room

Posted on
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

Auto-calculate your Splinterlands Assets/Income

Posted on Post a Comment
Image
  Keep track of your Splinterlands assets or income by using this tool: http://kagkaghair.herokuapp.com/spl/calculate All you have to do is key in your username in Splinterlands.  The values are rough estimates only, exchange rates are fetch from coingecko and your DEC, CREDITS and CARDS are from Splinterlands API. The values are in PHP and computed using the following method: DEC value is computed by multiplying your DEC to its rate in peso. CARDS value is calculated by adding all your cards using the last price from the market (which is in dollar) then it is multiplied to dollar to peso exchange rate. SPS value is computed by multiplying your SPS to its rate in peso. CREDITS is computed by dividing it in 1000 and multiplying to dollar to peso exchange rate.
Read more

Creating a Simple Button for Demo

Posted on Post a Comment
This is the result: Live Demo And the code for this is: For CSS Mark-Up, Paste is before  ]]></b:skin> a.demo{   background:skyblue;   padding:5px 20px 5px 20px;   text-align:center;   font-family: Arial;   font-size:18px;   border:#e1e1e1 1px solid;   -webkit-box-shadow: 0 8px 6px -6px black;   -moz-box-shadow: 0 8px 6px -6px black;   box-shadow: 0 8px 6px -6px black;   color:#e1e1e1; } a:link.demo,a:visited.demo{   text-decoration:none;   } a:active.demo {text-decoration: none;color:gray;padding:4px 20px 4px 20px;} a:hover.demo {text-decoration: none;box-shadow:none; } and this is how we use it. For HTML Mark-Up  <a class="demo" href=" LINK OF THE PAGE HERE " title="see it live">Live Demo</a> Every time we use this button just define the link by putting " class="demo" " just like the above example. You can customize the background, font and color ...
Read more

Splinterlands: Water Deck for Beginners

Posted on Post a Comment
Image
Splinterlands has been fun for me!  I love strategy games, coming from NarutoArena way back 2000s, this NFT game is enjoyable. Being a beginner, to get your rank up from Bronze III to Bronze II is hard compared to Bronze II to I. I guess because in B3 the only ruleset is Standard (no restrictions except mana costs) making it hard to select/build your splinter in battle.  In this post, I'll be sharing my water deck. I rented the cards below. Summoner : Alric Stormbringer +1 Magic to splinters and just 3 mana cost. This makes this summoner great. Tank :  Lobstradamus   For its hit points at 9 and ability to reduce damage from melee and range attacker, and just 6 mana cost this is a great tank although it is slow. Adding the +1 magic from Alric, you have 2 direct damage per attack. Support: Venari Wavesmith   This card adds armor to friendly monsters (plus +2 direct damage per turn), although it has 5 mana cost having this gives your low HP splinters protection fr...
Read more