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.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s