Skip to Navigation

For the Javascript Library – Movement

After a friday spent researching alternative interfaces (after being challenged by James) I've developed a nice little Javascript object which allows you to re-create a popular shifting effect as seen at One Digital. I've created an example of the script in action showing the London tube map being shifted around.

Install the Javascript object using the following code. The parameters passed are the name of the DIV you wish to shift and the number of horizontal/vertical stops in the grid. The Javascript deals with moving the target DIV into the middle of the page so alternative styling can be used if Javascript is not available. It also divides the page up into a grid of ‘stops’ for navigating around.

  1. <script type="text/javascript" src="includes/js/prototype.js">
  2. </script>
  3. <script type="text/javascript" src="includes/js/movement.js">
  4. </script>
  5. <script type="text/javascript">
  6. movement = new Movement("shiftMe", 9, 6);
  7. </script>

The CSS is fairly self-explanatory. The target DIV needs to be given a width and height to be divided up but the navigation can be styled however you want.

  1. background: transparent url("../images/bg-content.gif") 0 0 no-repeat;
  2. width: 3074px;
  3. height: 2048px;
  4. position: absolute;
  5. order: solid 3px #27B1E6;

The script uses prototype, (as all good Javascripts do), and has been tested and works in IE 6, IE 7 Beta 2, Firefox and Safari. Download it and have a play.

Leave A Comment

Some HTML is allowed, (general text-formatting and linking). Images and complex HTML is not. Abide by the rule ‘I shall think before I speak’ and you’ll be fine.

More About This Entry

The entry ‘For the Javascript Library – Movement’ was posted in the ‘long’ category on the 2nd April, 2006.

There are no comments on this entry.

You Might Like This

A randomly selected something that you might enjoy. I may have been involved with some of them.

Flickrshow

Stay Up To Date

There are a number of RSS feeds that you can subscribe to if you want to stay up to date with this site.