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

 

Advertisements

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.

 

 

STREETS IN TIME PROJECT: Navigation / Map button development in Illustrator

I used the YouTube tutorial https://www.youtube.com/watch?v=2SYsB06vHRI to develop the skills required to creat glass-style buttons in illustrator.

Below are the buttons I created:

Image

Image

These will be used as my ‘dashboard’ buttons and will sit behind the main image container with only half of the button showing

 

STREETS IN TIME PROJECT: logo development

I have bought the domain name streetsintime.co.uk, and next I needed to create a logo for the site.  Below is some of the development work:

Image

I decided to go with the idea for the site name below a silhouette of a tree.  First I took a copyright free image of a tree from the internet, then adjusted the levels to create a silhouette and added the site name in an upright sans serif font (Sakaal Majalla):

Image

 

Image

Linear version:

Image