0. Today’s featured website:
Today’s goals:
– Practice more jQuery and JavaScript by modifying our current character and adding a surprise character
1. Continuing with jQuery and our animated character
Let’s make this more interesting:
a. Add a background image by inserting the following code in your <style> section above .container at the beginning
body
{
background-color: #000000;
background-image: url(http://www.turiscandurra.com/wp-content/uploads/2012/08/turi-scandurra-golf2112-winter.png);
background-repeat: repeat;
background-position: center;
}
b. Make sure your <body> section looks like this:
<body>
<div id=”container”>
<div id=”my-div”>
</div>
</div>
<script>
// Your jQuery is in here, just leave it alone for now
</script>
</body>
You are adding the container div around the other div. Also, there was a mistake with a body tag on Tuesday.
c. Let’s move him. Add the following code to #my-div in your <style> section:
margin-top: 400px;
margin-left: 350px;
So altogether you should have:
#my-div
{
display: inline-block;
float: left;
margin-top: 400px;
margin-left: 350px;
}
d. Add the following code to the <script> section at the end of all of your code and see what happens to your character:
$( ‘#my-div’ ).click(function() {
$( ‘#my-div img’ ).fadeToggle( ‘fast’, function() {
$( ‘#my-div’ ).html( ‘<img src=”http://i.imgur.com/90Mmdcm.png”>’ );
});
});
What is going on?
e. Let’s add another character to this scene.
Add the following code below <div id=”my-div”></div>
<div class=”ghost-container”>
<img class=ghost src=”http://www.thinkful.com/learn/static/guides/halloween-programming-tutorial/ghost_pic.png” />
</div>
f. Add the following code to your <style> section below demo-hadouken:
.ghost-container {
width: 100%;
position: absolute;
text-align: center;
visibility: hidden;
}
.ghost {
z-index: 10;
display: block;
width: 550px;
position: relative;
margin: auto;
}
g. Now it’s time for some more JavaScript. Make new <script> tags below your others and insert the following:
<script>
var ghost = document.getElementsByClassName(‘ghost-container’)[0];
var sound = new Audio(‘http://www.thinkful.com/learn/static/guides/halloween-programming-tutorial/file.wav’);
//Shows ghost and plays sound after five seconds
setTimeout(function () {
sound.load();
sound.play();
ghost.style.visibility = ‘visible’;
}, 5000);
//Hides ghost one second after appears
setTimeout(function () {
ghost.style.visibility = ‘hidden’;
}, 6000);
</script>
Just in case- here’s what all of the code should look like
h. Change it up! Change the amount of time it takes for the ghost to appear to something else (change 5000 to another number). Try also changing the amount of time it takes for it to disappear to something else (change 6000; this number should be bigger than whatever number you have for it to appear).
i. Change the ghost image to something else- simply find another image, get its link, and change it from the above link.
j. Try changing the ghost’s visibility. Maybe have it start out appearing on the page and then have it disappear and come back again. Change it’s visibility in the style sheet from hidden to visible and in the JavaScript switch up visible and hidden by changing one for the other.
k. Add another sound by downloading a sound effect from this free library. Just download it, save it in the same place as your webpage, and change the source file in your JavaScript from ‘scream.wav’ to the name of your new sound file.