13/03/2013

13/03/2013

On the Alternatives page I've put my first Javascript for the CA. The objective of this is to warn the user that when they click the picture links, they will be redirected to a different site. A pop-up should happen giving the user the options 'OK' and 'Cancel'. Clicking 'OK' lets the script run and they will be directed to a different site, and click 'Cancel' will keep the user on the Alternatives page.

Here is an image of what pops up when one of the links are clicked:

Below is the code for the onClick javascript. I have 3 of them (picLink1, picLink2 and picLink3) and each one is only different regarding the link in 'window.location'. I also had to change the 'a href' in the original code to just be an image and to have the style to change the cursor to a pointer.

(Javascript in header):

<script type="text/javascript">
function picLink1() {
var answer = confirm ("You are about to leave this site. Press 'Ok' to leave, or 'Cancel' to stay.")

if (answer){
window.location="http://www.dublincity.ie/WaterWasteEnvironment/Waste/Documents/Ringsend%20DL.pdf";
return true;
}
else{
return false;
}
}
</script>

(Script in Image):

<img src="../images/ringsend.png" alt="temp pic" class="linkpic" style="cursor:pointer" onclick="picLink1();"/>

I began working on the final 3 pages that needed to be made responsive. 

Below is the Tips Page. Nothing particularly difficult here, the same as the other pages apart from the 2 floated pictures. Just altering the sizes of them until they slotted under each other was all it took .

Tips page Full:

 Tips page 980px:

 Tips page 650px:

 Tips page 480px:

On the Facts page, I thought it looked a little dull with all the text, so I decided to add an info graph about recycling. The source is from http://www.loveinfographics.com/wp-content/uploads/2012/03/Recycling-facts-infographics-600x600.jpg and is also stated in the code. The main issue I had at making at making this page responsive was the video. On the transition from 980px to 650px the page cuts out about half the video, I won't worry about it now and i'll sort it out at the end if I've got the time.

Facts Page Full:

Facts Page 980px:

Facts Page 650px:

Facts Page 480px: As you can see the video gets slightly cut off at both sides.

On the Contacts page, I had the same issue as I did with the video on the previous page. The Google map wouldn't re size appropriately and (same as the video) would get cut off by the edge of the screen. As I stated before, I will go back and sort it out at the end along with the video. Noting, the layout of the page I wanted was TEXT, IMAGE, TEXT, IMAGE, TEXT, so atleast that turned out the way I wanted :)


Contacts Pages Full:

Contacts Pages 980px:

Contacts Pages 650px:

Contacts Pages 480px: Same as the Facts Page, The map gets cut off on both sides.

So things left to do before Friday:

1. One more Javascript
2. Tidy up pages