STREETS IN TIME: Comments form

I spent some time trying to work out the way to display the comments and submit-comment form in terms of optimum User Experience.  Should I show the submit form first and then the comments below?  Should I prioritize seeing the comments available to read or the form encouraging users to submit their own memories / comments?

In the end, I decided to have a button titled “Submit Comment” at the top, with the comments below.  The button would link to an anchor on the submit-form at the bottom of the comments – this way I achieve the best of both options – comments immediately visible, as well a  call to action button for submitting a comment.

Image

 

I have added a smooth scroll plugin for fluid transition from the anchor points.

When a comment is submitted, javascript grabs the name of the html file that the comment has been sent from and adds it to the email that is produced so that as Moderator I know which page to add the comments to:

<script>document.write("<input type = 'hidden' name = 'page_ref' value = '"+cat_no+"' />");</script>

Also, javascript code allows the header of the comments box to automatically display the name of the location (rather than retyping each time a new page is created:

<p><label for="msg"> Please post your memories of <script>document.write(image_loc);</script></label><br/>

I have added a ‘reply to comment’ button on each comment.  If a user selects this to leave a comment, Javascript code will record which comment has been replied to a pass this to the PHP file that generates the email.  This way, I will know which comment to add the reply to.

I’m going to scrap the ‘report as spam’ buttons as I won’t need these, given that I’ll manually uploading any comments anyway.

 

Advertisements

STREETS IN TIME: Preparing the images for the site

I start off with the ‘then’ as these are much smaller images than the ‘now’ images and so set the dimensions of the final pieces:

Image#

Next I open the ‘now’ image and copy the ‘then’ image over the top:

Image

I then crop the ‘now’ image to exactly match the parameters/scope of the ‘then image’, and correct the perspective (this is usually necessary as the camera I use has a considerably wide-angles lens and tends to ‘fish-eye’ images in comparison to the ‘then’ images.

I now have two layers in one PSD file – ‘then’ and ‘now’.  I select the ‘now’ layer and use transform to reduce the scale of this image to match the ‘then’ image, and crop to size.  Then, with the ‘then’ image on top, I reduce the opacity so that the ‘now’ image starts to show behind.  I then finely adjust the image, lining up as closely as possible the landmarks and buildings.

Image

Once fully lined up, I crop if necessary, then increase the opacity of the ‘then’ image back to 100%, hide the ‘now’ image and Save As sitxxx_then.jpg.  I then hide the ‘then’ image, unhide the ‘now’ image and save as sitxxx_now.jpg.

With the two files now in place, I simply need to open up one of the previous html pages, then Save As a file name that matches the sequence number of the new images, and hey presto – a fully functioning page without any input / tweaking required*

*well, apart from that annoying issue where I have to re-input the image file name to set the height of the div container, but I hope to be able find a fix for that soon…..

STREETS IN TIME: Responsive navigation menu

I have used media queries set to max-width:720px so that on mobile devices the navigation png buttons are not displayed, but instead a fixed navigation bar is displayed (fixed) at the bottom of the screen.  Also the title menu items (home / locations / about) disappear and the logo moves to a central position:

Desktop:

Image

MOBILE:

Image

The main image is set to a % width (with a max-width in place) and is therefore fully responsive to viewing device.

For pages where the orientation of the main image is portrait, I have to add inline styling to the container div setting a max-width of 550px to stop the image becoming oversized.

 

STREETS IN TIME PROJECT: Nested menu bar

As the Streets In Time project grows, I initially intend to extend to include images for Swindon and Sisak (Croatia) – 2 places where I have the opportunity to collect “then and now” images.  Ideally I would love for users from other locations to submit images of their towns and cities also.  I therefore need to add a drop down menu from the navigation bar for multiple locations.

Until now, I had only created singlular <li>’s in a nav bar – I therefore needed to work out how to create the desired drop-down.  For this, I turned to my well thumbed XHTML / CSS for dummies book, and produced the following code:

HTML:

<ul>
    <a href = "sit001.html"> <li> Home </li> </a>
    <a href = #> <li> Locations 
        <ul>
          <li> Brighton </li>
          <li> Swindon </li>
          <li class = "last"> Sisak </li>
       </ul>
      </li> </a>
    <a href = #> <li> About </li> </a>
 </ul>

CSS:

header ul {
 position:relative;
 list-style-type:none;
 color:#CCC;
 margin-left:-40px;
}
header ul li {
 float:left;
 width:120px;
}
header ul li ul {
 margin-top:9px;
}
header ul li ul li {
 float:none;
 height:30px;
 background-color:#434343;
 padding-top:10px;
 border-top:#505050 solid 1px;
 display:none;
 font-size:12px;
}
header ul li ul li.last {
 border-radius:0px 0px 8px 8px;
}
header ul li:hover > ul li {
 display:inline-block;
}
header ul li:hover {
 color:white;
}
header ul li ul li:hover {
 background-color:#555555;
}

 

The nested <li>’s are hidden by default and are changed to be displayed when the parent <li> is hovered over.

You can see that I have added a class called ‘last’ to the final <li> – this enables ,me to add a border-radius to the bottom of the menu that drops down

 

STREETS IN TIME PROJECT: Javascript code for populating ‘alt’ tags for images

Javascript variables  in <head> section, to be populated each time a new page is created:

<script type = "text/javascript">
var image_loc = "The Booth Museum, Dyke Road, Hove"
var year_then = "1905"
var year_now = "2013"
</script>

Variables called within ‘alt’ tag for then and now images:

<script> document.write("<div id= 'slideshow'><img src = '"+image_now+"' alt = '"+image_loc+", "+year_now+"'/><img src = '"+image_then+"' alt = '"+image_loc+", "+year_then+"'/></div>") </script>

 

STREETS IN TIME DEVELOPMENT: Javascript coding of CMS

I have recently been developing my Javascript skills, and have decided to put them to some creative use on the Streets In Time site by creating a system whereby the site will automatically know which images to pick up, which url’s to direct to from the Nav buttons, which map to show on any given page, and which location narrative to show in the comments area.

For this to work, all pages will be named in sequence as SIT001.html, SIT002.html etc, and all images will be names SIT001_now.jpg, SIT001_then.jpg etc

Here is the code I developed to read the name of the current document and store as a variable to ‘SIT’ reference:

var file_loc = document.URL;
 var last_slash = file_loc.lastIndexOf("/");
 var cat_no = file_loc.slice(last_slash+1,last_slash+7);
 var file_path = file_loc.slice(0,last_slash);
 var seq_raw = cat_no.slice(3,6);
 var seq = parseInt(seq_raw);

Next are the Javascript variables that will be used for the ‘Prev’ and ‘Next’ navigation buttons:

var prev_seq_raw = (seq)-1;
 var next_seq_raw = (seq)+1;
 var prev_seq = ("00" + prev_seq_raw).substr(-3);
 var next_seq = ("00" + next_seq_raw).substr(-3);

And here is the html for said buttons, calling the Javascript variables to navigate to next page, previous page or map:

<div class = "side_tab" id = "button_map">
  <script>document.write("<a href = '"+cat_no+"map.html'><img src = 'images/tab_photo.png' alt = ''/>");</script>
 </a>
 </div>
 <div class = "arrow" id = "left">
  <script>document.write("<a href = 'sit"+prev_seq+".html' ><img src = 'images/button-left.png' alt = ''/> </a>")</script>
 </div>
 <div class = "arrow" id = "right">
  <script>document.write("<a href = 'sit"+next_seq+".html' ><img src = 'images/button-right.png' alt = ''/> </a>")</script>
 </div>

The following variables are used to call the images that correspond with the current page:

var image_then = "images/"+cat_no+"_then.jpg";
 var image_now = "images/"+cat_no+"_now.jpg";

Below is the HTML for displaying the images, with Javascript calling the above variables based on the document name:

<div id = "fader">
 <!--this first image here is used purely to set the height of the containing div -->
 <img src = 'images/sit001_now.jpg' alt = '2013'/>
 <script> document.write("<div id= 'slideshow'><img src = '"+image_now+"' alt = '2013'/><img src = '"+image_then+"' alt = '2013'/></div>") </script>
</div> <!-- end fader-->

I’m pretty annoyed for some reason, the inline-block container for the image won’t adapt to fit the height of the containing image when the image is being called from a Javascript variable – instead I have to first hard code the image url which kind of defeats the object of calling the images via Javascript variables.  I think I’ll fire this off as a question to the Stackoverflow community tomorrow and see if anybody can suggest why this is happening.

The above javascript has all been put onto a separate .js sheet, but the following is in the header of the html page, as the location description will be entered as the value for this variable on each page:

<script type = "text/javascript">
var image_loc = "The Booth Museum, Dyke Road, Hove"
</script>

This will be called as the title to the image, and as a reference in the comments section (to read as “Please leave you memories of <contents of variable>”

So now, apart from that one little annoying glitch described above, when I create a new page all I have to do it update the contents of the location description variable, and the Javascript will automatically work out which images and map to call and which pages to navigate to as prev & next.  All I need to do is ensure that the corresponding images have been created and saved in the images folder.  This means that it will be an incredibly fast process to add more pages,  so the site can grow as quickly as I can produce the before & after images.