Al's TAFE Certificate IV I.T. (Website Design) Exercises

Client Side Script 4

Lesson 4 » Produce Client Side Script – Controlling Layers on your WebPages with JavaScript(Part 2) - Dynamic HTML (DHTML).

• DHTML or (Dynamic HTML) is a web technology that really means the use of CSS and JavaScript to control the appearance and even the movement of elements on your pages. It may also include the use of Active X filters and Netscape's JSS (JavaScript style sheets). These web page features produced by DHTML are examples of Client Side Scripting as they do not require any special scripting to be added to the server side of your website.

• To understand DHTML we need to revise something we covered previously; the DOM or Document Object Model. The DOM model we need for DHTML is Level 1 DOM and only browsers 4.0 and above understand Level 1 DOM. So these DHTML features will only work in browsers 4.0 and above.

  DOM

• To identify or control an item or element on your page with DHTML / JavaScript you need to be able to name that item using the DOM. For example if I want to call on a button field in a form on my web page I might use the following DOM model: -

  window.document.form.button1.value="checkout"

• This DOM will point to a button on my form and assign the value "checkout" to that button. Or by using: -

  window.document.specialsLayer.value="todaysSpecial.gif"

• points to a layer on my page where I will display product specials, and I can now control this layer because I can identify and call on it in JavaScript functions by using this DOM. I can say put this image in this layer when this or that happens on my webpage.

DOM Issues

• Unfortunately the DOM used by different browsers is not all the same. The one closest to the W3C conventions for DOM is Internet Explorer. Netscape is less sophisticated although Netscape 6 is a bit closer to the W3C standards. This means you need to consider the following when you use DHTML: -
  1. Design just for IE because it is closest to the W3C standards
  2. Try to use only the DHTML features that work in all browsers
  3. Use two sets of code in your pages each directed at different browsers
     
• In Dreamweaver the coding created for DHTML is solid and complies well with W3C standards so it is pretty safe in most browsers. You still will need to check it out in case there are some compatibility issues across browsers and platforms.

  Nested Content

• One of the simpler and more popular uses of DHTML is in controlling layer properties and especially the visibility of layers. The term nested content refers to having several layers of content on your page that is not visible all the time but becomes visible in response to user events. Nested content could include: -
  1. Drop-down or pop-out navigation menus
  2. Information that pops up when needed in response to user events like mouseover.
  3. Different sets of body content that displays in response to user events on the page

Showing and Hiding Layers

• Once a layer has been created on your page you can set the layer to show or hide using Show-Hide Layers on the behaviours panel.

Showing or Hiding Layers uses JavaScript and is not the same as assigning the layers initial visibility using HTML in the Layers Panel in Dreamweaver. But you can use both together to get some special effects such as a loading screen containing the word "Loading" that is visible as the page loads but disappears when the page is fully loaded (onLoad).

• When you are working with hidden (invisible) layers in design view, you can select the layer using the Layers panel so that the outline of the layer becomes temporarily visible while you work with it. .

 

Activity One

• Create a Drop-Down or Cascading Menu using the files in the s:\teachers\john\3756Web\Programming_Scripting folder.
  1. Open dropdown.html in Dreamweaver.
  2. Rename the layers appropriately ie. main, books, music & videos.
  3. Make books, music and videos layers to be invisible initially using the Layers Panel (F2)
  4. Select the Books image. Open the behaviours panel. Choose Show-Hide Layers from the actions list. Make sure “ Show events for IE 4.0” and above is selected.
  5. Set Books layer to show and click OK.
  6. Change the behaviour to (onMouseOver) if it is not that already.
  7. Preview in browser to see if it is working.
  8. Do the same for the other two images – Music & Videos.
  9. Now go back to each one and select its show-hide behaviour (double click). Then set the other two layers to hide.
  10. Do this for each layer.
  11. Now test in the browser.
  12. Now go back to Dreamweaver and draw another layer covering all the others and name it menubg.
  13. Drag it to the bottom of the other layers in the Layers Panel. This will send it to the back of the other layers.
  14. Now set an onMouseOver behaviour on this panel to hide all three menu layers (books, music and video)
  15. Insert a single pixel gif into this menubg layer. The file is trpix.gif. You need to insert this image inside the <div> tag, and give it height and width to match the bgmenu layer dimensions.
  16. You will need to use an onMouseOver rather than an (onMouseOver) event, as the one in parenthesis will produce a pointing finger in the browser. (Try events for IE 6.0 to bring this option up.)
  17. Now test in the browser.
      
• click here to see my example

To test your skills in a new example: Now create a cascading menu using the same layers and code principles just used, but you will need to make a vertical “main” layer using the images in the images folder for the three names.

• click here to see my example

Show-Hide Layers

• Some points to consider when working with Show-Hide layers
  1. Download times for Visible and Invisible layers – you may have several layers on your page and some may be invisible, but it all adds up when a visitor downloads your web page, so just consider the total file size. A simple looking page may become quite large if there is enough hidden content.
  2. Video, Audio, Flash and other media objects can be embedded in Layers, but the functionality may be limited. Check carefully in all browsers.
  3. Triggers hidden in invisible layers wont be visible to your page visitors so be careful where you place your triggering events, buttons etc.

The Set Text of Layer behaviour

Firstly, this will only work in IE4+, Netscape 4.x and 6.x, but not in Opera 5-6.

• This feature allows you to vary the content of a single layer, instead of showing and hiding many layers. It is controlled by: -

Behaviours / Set Text / Set Text of Layer

• Some critical features to consider when using this feature are: -
  1. You can set much more than text with Set Text of Layer as you can place HTML code directly into the Set Text of Layer dialog box. It has been said you could better call this feature "Set HTML content of layer".
  2. Dreamweaver will sometimes insert special characters into the code when you place HTML directly into Set Text of Layer. To make the code display more clearly go to Edit / Preferences / Code Rewriting and disable both Special Characters options. With these options deselected Dreamweaver will leave characters alone. However you need also then to do the following : -
  3. When you try entering HTML content into the Set Text of Layer box, instead of pure text, you will have to replace all double quote marks ("), with single quotes (').
     
• Avoid hand coding if you prefer, by creating the layer content in Design View, then cutting and pasting the resulting code from Code View into the Set Text of Layer box. But remove all the double quotes that Dreamweaver will have created, and replace with single quotes.

Activity Two

• Create a layer Content Rollover using the files in the s:\teachers\john\3756Web\Programming_Scripting folder.

• These are the steps to follow: -
  1. Open violin_write.html and check out the file. The file uses hotspots on an image. Check this out and see how the hotspots trigger text information to appear. You will learn how to do this, plus do it a bit better.
  2. With violin_write.html open in Dreamweaver, select the hotspot at the very top of the neck of the violin (The Scroll). With this selected go to Behaviours / Set Text / Set Text of Layer and select the layer "help" then type the word Scroll in the input field. Make sure the triggering event is onMouseOver.
  3. Now you will need to create a JavaScript event to switch off the help layer display when the mouse moves away from the top of the violin picture. So you need to create an onMouseOut event. To do this select the Scroll hotspot at the top of the violin again then select the Set Text of Layer behaviour (Behaviours / Set Text / Set Text of Layer) Choose the help layer from the pop-up menu again but this time leave the input field blank. When this is done set the triggering action to onMouseOut.
  4. Do the same two steps for the next hotspot of the violin, which is the neck, directly under the Scroll. Use the word Neck as the help layer text and give it an onMouseOver and an OnMouseOut event.
  5. Now we will make the scroll message a bit better looking by using the following code in the Set Text of Layer box. To do this you will need to double click the onMouseOver behaviour event for Scroll and insert the following HTML code: -
     <h1>Scroll</h1>
     <p>Scrolls are curly and brown, and have wooden pegs sticking out of both sides.</p>
  6. Check this in a browser to see it work, then go to Code and Design View in Dreamweaver and select the hotspot, and look at the code created by Dreamweaver for the onMouseOver event. Can you follow the code? If the code is full of strange characters then go to Edit / Preferences / Code Rewriting and disable both Special Characters options. Then reopen the Set Text of Layer dialog box and close it again. Now check the code that is produced. It should be clearer.
  7. Now do the same for the neck area, using the words: -
     Neck
     Violin necks are long and slim and carefully tuned.
  8. Now do this for all the other parts of the violin using the gif images found in the violin folder. Make up some suitable text for each area to follow the gif name. You will also need to use the hotspots created already for you which give you the names of the various parts of the violin.
  9. Now add CSS to this by creating a custom class to format the text that will go with each image displayed. All you need to do is: -
1. select the layer that will display the targeted behaviour
2. Create a new custom class using the CSS Styles panel, and include any formatting you like to the layer.
   
• Now in Design View select the layer and apply the CSS custom class to it. Now all text put into that layer will be automatically formatted according to your style information.
  
• click here to see my example
  
• click here to see another example where i used pictures & text in different layers showing at the same time

Activity Three

• Open the Code View for Activity One and Activity Two, and check out the JavaScript that has been created for both of these activities. Try to follow the code through and work out exactly what the code is doing. To complete this module you should be able to write your own JavaScript functions, so you really need to understand at least what Dreamweaver is doing in the JavaScript it creates. You will be assessed on your understanding of the JavaScript code.
  
• click here to see some of my JavaScript samples (not written by me, but free script which I changed to suit my needs)