WebDevLab6 JavascriptExercises

67-317: Mobile Web Development and Usability Testing
Download today's lab and unzip to a folder on your machine.
Practice Exercise 1: Create a simple slider based on the following.

1. Start with this document containing three images only one of which is displayed.
<html>
<head>
<style>
img {display: none;}
#first { display: block;}
</style>
</head>
<body>
<div id="slider">
<img id="first" src="images/1.jpg" alt="first image" />
<img src="images/2.jpg" alt="2=second image"/>
<img src="images/3.jpg" alt="third image"/></div>
</body>
</html>
2. Add this script to the header
<script>
var i = 1;
var noOfImages = 3;
var imgs = document.getElementsByTagName("img");
</script>
3. Add this script above the closing body tag.
<script type= text/javascript>
function displayImage() {
if (i == 0) { prev = noOfImages - 1; } else { prev = i - 1; }
imgs[i].style["display"]="block";
imgs[prev].style["display"]="none";
if (i == (noOfImages - 1)) i = 0; else i++;
}
</script>
4. Invoke the script by adding a onclick event for the <div id="slider" ..> element.
<div id="slider">
5. Add a button element:
<button onclick="displayImage();">Press</button>
6. Complete the above steps and test the solution. Does the image slide when you click the
button?
7. Now create two new events:
a. Every time you click on the slider image let it slide.
b. When the mouse enters an image let it slide.
Submission: The compiled HTML from above and screenshots of the result
Practice Exercise 2: Create text animation

• How do we create text animation similar to what we did for the slider?
1. Create a paragraph with a certain fontsize – say 14px
<html>
<head>
<title>Text Animation</title>
<style>
p { font-size:14px; width:500px; height:40px; margin:auto;}
</style>
</head>
<body>
<p> I am an animated text <br />
Touch me !!!! I will yell <br /></p>
</body>
</html>
2. Initialize variables by placing this script in the <head>
<script>
var min=14;
var max = 30;
var sz = min;
var reverse = false;
</script>
3. Write JavaScript code to increase font upto a max and decrease upto a min
<script>
function changeFontSize() {
var paras = document.getElementsByTagName("p");
if (sz >= max) { reverse = true; }
if (sz <= 14) { reverse = false; }
if (reverse) { sz--; } else { sz++; }
paras[0].style.fontSize = sz + "px";
new Audio("chime.mp3").play(); //plays an audio chime everytime
}
</script>
4. Define the event onmouseover

<p onmouseover="changeFontSize();">
5. You will hear a chiming sound everytime the font changes. Please change it to a funny
sound downloaded from the net (for this exercise only). We have given you a file called
haha.mp3 if you are unable to find another sound.
Practice Exercise 3: Learn to use jQuery plugins from external sources

1. Create this HTML template
<html>
<head>
<title>JQzoom 2 Demo</title>
</head>
<body>
</body>
</html>
2. Specify the javascript libraries (note we use 1.6 version):

<script src="js/jquery-1.6.js" type="text/javascript"></script>
<script src="js/jquery.jqzoom-core.js" type="text/javascript"></script>
(You can download jquery files (plugins)

http://www.myjqueryplugins.com/jquery-plugin/jqzoom - Already provided for you under the js
folder)
3. Add the image code

<div style="height:500px;width:500px;" >
<div>
<a href="images/highresolution.jpg" class="jqzoom">
<img src="images/lowresolution.jpg">
</a>
</div>
</div>
4. Add the javascript action within the <head> so the initialization of jqZoom is done..
<script type="text/javascript">
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'innerzoom',
preloadImages: false,
alwaysOn:false
});
});
</script>
5. Specify the CSS:
<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">
6. Test your page
7. Now go to this page http://www.elevateweb.co.uk/image-zoom and implement the
Lens Zoom with the same two images in this example.
a. Download the code (available here)
b. Change the file demo.html such that the basic zoom function is changed to lens
zoom (Check out the code under lens zoom- http://www.elevateweb.co.uk/image-
zoom/examples#lens-zoom).
c. Copy the high and low resolution images to the large and small folders
respectively.
d. Test your page.

WebDevLab6 JavascriptExercises

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WebDevLab6 JavascriptExercises

Uploaded by

Copyright:

Available Formats

67-317: Mobile Web Development and Usability Testing

Download today's lab and unzip to a folder on your machine.

Practice Exercise 1: Create a simple slider based on the following.

Practice Exercise 2: Create text animation

4. Define the event onmouseover

Practice Exercise 3: Learn to use jQuery plugins from external sources

2. Specify the javascript libraries (note we use 1.6 version):

(You can download jquery files (plugins)

3. Add the image code

You might also like