Home arrow HTML arrow Page 4 - How to Create a Dynamic HTML Navigation Page
HTML

How to Create a Dynamic HTML Navigation Page


Learn how to devote an entire page to an image-driven, DHTML navigation system. This code from Dan Wellman will result in a fully functioning, interactive navigation page that loads a new page whenever a specified location of the window is passed over by the central image.

Author Info:
By: Dan Wellman
Rating: 4 stars4 stars4 stars4 stars4 stars / 59
September 07, 2004
TABLE OF CONTENTS:
  1. · How to Create a Dynamic HTML Navigation Page
  2. · Web Animation Doesn't Always Mean Flash
  3. · Subroutines
  4. · The Remaining Subroutines
  5. · Wrap'n it Up
  6. · Images to Use

print this article
SEARCH DEVARTICLES

How to Create a Dynamic HTML Navigation Page - The Remaining Subroutines
(Page 4 of 6 )

The remaining subroutines all contribute to the movement of your central image; there are four subroutines, one for each direction, and a master subroutine that actually moves the image. The directional sub's can be constructed as follows:

sub flyLeft
 if leftButtonDown=1 then
  call moveImage(saucer,-1,0)
  if window.saucer.style.left="75px" then
   window.location="info.htm"
  end if
 else
  exit sub
 end if
End sub

The first IF statement checks whether the appropriate switch is on, and if so, calls the moveImage subroutine and passes the image name and the amount of pixels to move the image left and up to it as parameters. The properties LeftMovementAmount and TopMovementAmount (which are explained in more detail below and can be found residing in the moveImage subroutine), move the element in question either forward (to the right), and down (obviously, this can only mean down), which is why we supply it with minus figures to move left or up. Only moving the image by one pixel at a time, combined with the interval repeater, the movement of the image is kept as smooth as possible. If the switch is not on, the subroutine ends.

The second IF statement checks to see whether the central image has reached a specified location, and if it has, it uses the location property of the window object to open a new page.

You'll need four of the subroutines in total, one for each direction you wish the central image to move in, so your page should end up containing the following code segment:

sub flyLeft
 if leftButtonDown=1 then
  call moveImage(saucer,-1,0)
  if window.saucer.style.left="75px" then
   window.location="info.htm"
  end if
 else
  exit sub
 end if
End sub
sub flyUp
 if upButtonDown=1 then
  call moveImage(saucer,0,-1)
  if window.saucer.style.top="75px" then
   window.location="shop.htm"
  end if
 else
  exit sub
 end if
End sub
sub flyRight
 if rightButtonDown=1 then
  call moveImage(saucer,1,0)
  if window.saucer.style.left="450px" then
   window.location="help.htm"
  end if
 else
  exit sub
 end if
End sub
sub flyDown
 if downButtonDown=1 then
  call moveImage(saucer,0,1)
 else
  exit sub
 end if
End sub

Lastly, we create the master subroutine that ultimately moves your image.

sub moveImage(ElementID,LeftMovementAmount,TopMovementAmount)
 pPositionLeft=InStr(ElementID.style.left,"px")
 pPositionTop=InStr(ElementID.style.top,"px")
 ElementID.style.left=CInt(Left(ElementID.style.left,pPositionLeft-1))+LeftMovementAmount
 ElementID.style.Top=CInt(Left(ElementID.style.top,pPositionTop-1))+TopMovementAmount
End sub

This subroutine makes use of several of VB Scripts built-in functions; InStr, which searches for a specified string within another string; Cint, which converts a string into an integer; and Left, which reads and returns a specified number of characters from a string. The moveImage subroutine accepts the arguments passed to it by each of the previously examined flydirection subroutines. The sub' then searches for the position of the string 'px' within the string containing the location of the left edge of the specified element, and assigns this to the variable pPositionLeft. It does this for the locations of both the left edge and top edge of the central image. The remaining lines of code then read the specified string from the left to the character position of 'px' minus 1, so it stops the character before 'p', and then converts the remaining string to an integer, to which it adds the value supplied in the movementAmount call, and sets as the new figure for the elementID.style.left or top properties. It's complicated, but it works.


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials