Advanced Web
Authoring
Steven Graham – B00444855
Assignment One
Table of Contents
Introduction ............................................................................................................................................ 2
jQuery Examples ..................................................................................................................................... 2
Example 1 – Accordions ...................................................................................................................... 2
Example 2 – Bouncing Letters ............................................................................................................. 3
1
Introduction
For this assignment I have been given a copy of the module website and asked to alter the website
to include jQuery examples. I have also been asked to alter the look of the website by altering the
websites CSS.
In this report I will point out the jQuery examples I have placed in the website and also snippets of
the jQuery code used.
jQuery Examples
Example 1 – Accordions
The accordion function s is built into the jQuery library. When placing accordions into the website I
placed a simple function at the top of the page. I then called the accordion function within the first
tab. Within the accordions I placed text and pictures. Below are a couple of screen shots
2
Example 2 – Bouncing Letters
This example uses two jQuery function animation up and animation down. I have alter this example
as it originally it was a bouncing ball and I have changed it to bouncing text. To alter the text I
changed the wording within the ball div. Below are some screen shots
Below is screen shot showing the text I changed
3
Example 3 – Clock
The clock features uses a separate jQuery file locate on the server called “jquery.tzineClock.js” this
file contains the jQuery in which make the clock operate. The clock also has its own css. The code
adjust the angle of the images to reveal more of the colour as the time increases. The time is taken
from the local server timestamp. Below are a couple of screen shots
4
Example 4 – Resize
This jQuery function comes from the jQuery library. I have decided to use the animated resize
feature for this example. The example simply extends a text are on the screen by pulling on the
bottom right hand triangle of the header bar. Below are a couple of screen shots of the code
5
Example 5 – jCarousel
This piece of jQuery was of the hardest pieces to implement within the website. Not only is there a
jQuery carousel but the pictures loaded into the carousel are loaded dynamically into the jQuery
area from an external website namely Flickr. The carousel also calls its own minimised jQuery library.
Below are a few snippets and screen shots
6
Example 6 – Switch Class
The switch class allows the user to click a button and increase the size of the text. The function uses
the switch class function built into the jQuery library. With this example I used a separate css style
which is embedded into the index page of the website. Within the css you are able to adjust the size
of the text area and the size of text both before the animation and after. Below are a few screen
shots
7
Example 7 – Date Picker
The data picker allows the user to click inside the text box and select a date from the pop up
calendar. The data picker is a feature that is built within the jQuery library. The box in which is used
to display the chosen date is a simple form text field. Below are a couple of screen shot
8
Example 8 – Colour Picker
The colour pickers use the RGB colour screen to produce a mixed colour within the box. Within the
function the limits are default are set out. For example the positions for the start positions of each
colour are set within the function, see screen shot below
To get the colour within the swatch area (the colour area the users sees) to change when the users
adjusts the sliders, the function takes the hex RGB colour and converts it with the css to produce the
colour within the box. Below are some screen shots of code
9
Example 9 – Progress Bar
The progress bar is a facility built into the jQuery library. Within this website it is simply animation
and is set at 59% complete. The animation is created through the use of images and css. Below are a
couple screenshots
10
CSS & Format Changes
The first change I made was to the contacts section of the website. I changed the details of Terry
Anderson to myself (see screen shot below)
Other changes to the css included header styling’s, text colours etc. I also changed the colour of the
top navigation bar and the footer bar. Below are a couple of screen shots
Also I changed the html to fit into the html5 standard below is an example
Changed to
11