Web Programming
Final report
This will be the final report regarding Ca2, including examinations of code snippets of
features, credits for material found elsewhere and a look at responsiveness.
Assets
This site contains pictures, videos and a video player which were found online , the videos from youtube & the hardcoded video player both rely on online functionality to operate.
The logo image was found through Google Image Search and edited slightly with the brush tool in Photoshop to make the edges less sharp and blend with the background.
CODE
For my social icons on the site I employed a simple javascript image swap to change the colour of the icons on rollover, for emphasis and to provide user feedback.The below example is the code for the facebook icon .
<!-- This is the static link to the desired page-->
<a href="https://www.facebook.com/SlowBilly"
<!--This line tells the browser to display the image "facebook2" when the cursor rolls over the link-->
onMouseOver="document.facebook.src='img/facebook2.png';"
<!-- This switches back to the original "facebook.jpg" when the cursor moves away-->
onMouseOut="document.facebook.src='img/facebook.png';">
<!--"name" attribute, essential for the above"document.facebook.src"-->
<img alt= "facebook" src="img/facebook.png" name="facebook"/>
I also used javascript validation for the contact page as shown below, first we will look at the script for the name field.
<!-- function name-->
function validateForm1()
{
<!-- this declares a variable to contain the value input into the name field-->
var name=document.forms["form1"]["fname"].value;
<!-- If there is nothing in the name field or it is blank on submit-->
if (name==null || name=="")
{
<!-- an alert appears "name must be filled"-->
alert("Name must be filled.");
return false;
}
}
Next we will look at the slightly more complex email validation script.
function validateForm2()
{
var mail=document.forms["form2"]["email"].value;
<!--variable which contains the index(position within the string) of the character @-->
var atpos=mail.indexOf("@");
<!-- as above, with the index of the .-->
var dotpos=mail.lastIndexOf(".");
<!-- As in the name form script , returns an alert on blank submit-->
if (mail==null || mail=="")
{
alert("Email must be filled");
return false;
}
<!-- the index of @ is <1 OR . index is less than @ index+2 OR . index+2 is greater than the length of the input-->
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=mail.length)
{
alert("Not a valid e-mail address");
return false;
}
}
The dropdown chords menu was made using simple css, essentially not displaying the list while the cursor is not over the link by using the display:none; css attribute in the regular list, as below,
#top #headercont #headerright #dropdown li ul
{
display:none;
}
and then using the hover tag to display the list on mouse-over,as below,
#top #headercont #headerright #dropdown li:hover u
{
display: inline;
position: absolute;
}
I tried to avoid giving divs or elements absolute sizes or positions, except where neccesary, instead using percentage values, to allow for easier and more fluid responsiveness for the site.
.png)