Our Company History

Rollover an Event

Timeline

We've designed Timeline to be a flexible and easy to use widget for any web enthusiast to incorporate into their web projects. Timeline is very customizable and can be tweaked to your specific preferences.

Installation

Download your copy of Timeline, decompress the zipped file (unzip it) and upload the files to your server or local directory. Remember that it is very important to keep all of your files in the same location.

Setup

To setup Timeline simply include the JavaScript and CSS files in the of your HTML document. Like this:

		
<link rel="stylesheet" href="shadowbox.css">
<!--Attach our CSS -->
<!-- Attach necessary JS -->
<script src="http://code.jquery.com/jquery-latest.js"></script>

To add your own text simply hightlight the Lorum Ipsum text and add your own. Like this: 

			
<div id="pin01" class="handle">
	<div class="handleicon"><img src="images/handle.png"></div>
	<div class="handleinfo">
		<h3>Lorem Ipsum</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus euismod metus, 
 nec mollis tellus porttitor ut. Nam id accumsan ante. Proin varius ultricies sem et tincidunt.</p>
	</div>
</div>

Change to:

			
<div id="pin01" class="handle">
	<div class="handleicon"><img src="images/handle.png"></div>
	<div class="handleinfo">
		<h3>Your text here</h3>
		<p>Your text here</p>
	</div>
</div>

To control the locations of the pins, target the div id "pin" and adjust the "top" and "left" positioning coordinates. Don't worry, the lines connecting the pins to the timeline graphic will remain connected, so feel free to move them around wherever you please. 

			
#pin01 {position:absolute; top:60px; left:80px;}

Change to:

			
#pin01 {position:absolute; top:80px; left:65px;}

Follow us on Twitter