Now that you have a basic understanding of the Document Object Model and know how to create layers, we can look at some useful examples to get you started on your own DHTML sites.
Rollover Style Changes
Here's the script again, to refresh your memory:You can adapt this script for your own site by changing the color and textDecoration values, shown in bold. You can also modify the turnOn( ) and turnOff( ) functions to set additional properties the same way. For example, you can set the background of the links to a light yellow color when rolled over, simply by adding this line to turnOn( ):
currentLink.style.backgroundColor = "#FFFFCC";And here's the corresponding line for turnOff( ), to reset the background color when the mouse exits the link:currentLink.style.backgroundColor = "#FFFFFF";
One of the most common interface elements in desktop applications is the menubar with drop-down menus. You can make the same kind of menus with DHTML by showing and hiding positioned layers, as shown in Figure. When the user clicks on "Resources" or "Links", a layer with links is displayed below it, just like a normal menu. When the user double-clicks on the link, the layer is hidden again.
Figure: A drop-down menu with DHTML
Example: Drop-down menus with DHTML
(A): The showLayer( ) function references the layer object for our menu with a document method, document.getElementById( ), and sets a variable named layer to be able to refer to that object again. The ID for the correct layer object is passed into the function as an argument, layerid. The showLayer( ) function is triggered by the onClick event handler for the "Resources" and "Links" links.
(B): This line of the function sets the layer's visibility property (through the style property), which is a CSS property that controls the visibility of a layer. When the layer is created, it is hidden, so the showLayer( ) function sets visibility to "visible" to make the menu appear.
(C): The hideLayer( ) function works just like the showLayer( ) function, except that it hides the menu by setting visibility to "hidden". The hideLayer( ) function is triggered by the onDblClick event handler.
(D): This <div> tag creates the layer for the "Resources" menu. Note that the layer is given a specific id, so that we can refer to it later. Various CSS properties are set using the style attribute. These properties set the size and position of the layer precisely, so that it appears at the appropriate location for a drop-down menu. The one CSS property we haven't seen yet is visibility; this property is set to hidden so that menu is invisible until the user clicks on the "Resources" link to activate it.
(E): This link is created to control the menu. The onClick event handler calls showLayer( ) to display the menu, and the onDblClick event handler calls hideLayer( ) to remove it. Each function is passed the argument 'ResMenu', which tells the function which layer to display and hide.
It is pretty easy to adapt this script for your own site: most of the work is in figuring out the layout for your menu links and then determining the exact size and location for each menu layer. In other words, you'll need to adjust the top, left, width, and height properties for the actual content and layout of your page. You can also adjust the various color styles to suit your purposes. The two properties you need to leave as is are position and visibility. Give each menu layer a unique id attribute, and then pass that ID to the showLayer( ) and hideLayer( ) functions via the onClick and onDblClick event handlers for your menu link. You don't need to change the showLayer( ) and hideLayer( ) functions at all.
Maki ng an object move in DHTML is like making any other style change. All you are doing is changing one of two properties -- style.left or style.top -- to get an object from one place to another. The illusion of motion happens when you change the object's position incrementally and quickly.
In this example, we're creating a tab on the left-hand side of the browser that is 75 pixels off the left edge of the screen, so that the main content of the tab is not visible. When the user clicks on "show>>", the tab moves right 5 pixels every millisecond until it is completely onscreen, as shown in Figure. Clicking on the "<<hide" link returns the tab to its original position.
Figure: A sliding tab with DHTML
Example shows the DHTML code for the sliding tab. As with the drop-down menu, we are creating a positioned layer and manipulating it with the DOM. What's new in this example is the code for moving the layer. Just by changing the style.left property, we've created the illusion of motion.
Example: A sliding tab with DHTML
(A): This line references the layer object for our tab and stores it in the variable named layer. Since the showLayer( ) function only needs to work on one layer, we don't get the layer ID as an argument but instead refer specifically to 'TabLayer' in the call to getElementById( ).
With this method, we can call showLayer( ) repeatedly, where each call moves the layer a few pixels until it is in its final position. Each repetition of the function is equivalent to one frame of animation, so the amount of time setTimeout( ) waits before executing showLayer( ) is, in effect, your frame rate. The second argument to setTimeout( ) (shown in bold) controls how often showLayer( ) is called. We're using a value of 20, which refers to 20 milliseconds. To make the animation go more slowly, increase this value.
(D): The hideLayer( ) function simply moves the tab layer back to its original position, so that the content of the tab is not visible.
(E): This <div> tag creates the layer for the sliding tab. Note that left is set to -75px, which is what pushes the content of the tab out of the visible region of the browser window. Also, because the layer is in fact visible, we don't need to set the visibility property.
Web Designing Related Interview Questions
|HTML Interview Questions||HTML 5 Interview Questions|
|Flash Interview Questions||Graphic Design Interview Questions|
|Illustrator Interview Questions||Dreamweaver Interview Questions|
|UI Developer Interview Questions||Dreamweaver CS3 Interview Questions|
|CSS Advanced Interview Questions||Web Developer Guide Interview Questions|
|Log Shipping Interview Questions||Spring Boot Interview Questions|
|UI Designer Interview Questions||Bootstrap 4 Interview Questions|
Web Designing Related Practice Tests
|HTML Practice Tests||HTML 5 Practice Tests|
|Flash Practice Tests||Graphic Design Practice Tests|
|Illustrator Practice Tests||Dreamweaver Practice Tests|
|UI Developer Practice Tests||Dreamweaver CS3 Practice Tests|
|Web Developer Guide Practice Tests||Advanced jQuery Practice Tests|
Web Designing Tutorial
Designing For A Variety Of Browsers
Designing For A Variety Of Displays
Web Design Principles For Print Designers
A Beginners Guide To The Server
Printing From The Web
Structural Html Tags
Adding Images And Other Page Elements
Specifying Color In Html
Cascading Style Sheets
Server Side Includes
Designing Graphics With The Web Palette
Audio On The Web
Video On The Web
Flash And Shockwave
Introduction To Smil
Introduction To Dhtml
Introduction To Xml
Wap And Wml
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.