World Wide Web Programming 18 - Dynamic HTML For IE
What is DHTML? Dynamic HTML is a “high-techlooking” name to define the possibility of changing a loaded page… We’ll change text, positions, anything basically…
Positioning Elements DHTML relies strongly on positioning elements in the right position In the following example we’ll position a paragraph in a colored box at a specific location in screen
Easy positioning example
.DivStyle1 {background-color: blue; position : absolute; width: 200px; height: 200px;} .PStyle1 {color: white; position : relative;}
Accessing Tags
We saw it’s possible to access forms, links, inputs, images, … How to make a specific tag accessible? Put the attribute ID in the tag •
A paragraph
• You can access the paragraph doing myPara.innerText;
You can also access elements doing document.all[“myPara”]; It is possible to change any attribute of the tag
Doing a text rollover
<SCRIPT LANGUAGE=JavaScript> function myPara_onmouseout() { myPara.innerText = "Roll your mouse over my text"; myPara.style.color = "Black“ } function myPara_onmouseover() { myPara.innerText = "Wow that feels good!!!"; myPara.style.color = "Red“ }
Roll your mouse over my text
Positioning and moving content
Once you have defined two paragraphs or zones with their ID, it is possible to change the position… How to do it… • Basically we’ll change the left attribute of the paragraph style • We’ll have a var to know the direction, that should change when we reach the borders and that would tell us if we have to increase or decrease the position
You can find the code in the site…
Changing, Adding, and Deleting Content
Para 1
Using innerHTML and outerHTML When you have defined a specific zone, you can access it contents (including all HTML tags on it) or the whole zone including the its opening and closing tags We use innerHTML and outerHTML Check the example that you’ll find online
Using insertAdjacentText and insertAdjacentHTML
It can be used to insert text or text+HTML in any of 4 possible positions: • • • •
beforeBegin afterBegin beforeEnd afterEnd
Ex: div1.insertAdjacentText(“afterBegin”, “
”);
The event object in IE
It is possible to know the exact position of the mouse as well as what button triggered any event We use the object event • event.screenX • event.screenY • event.button Returns a number from 0 to 7
0 1 2 3 4 5 6 7
No button pressed Left button pressed Right button Left and right Middle Left and middle Right and middle All three buttons
• event.fromElement • event.srcElement • event.toElement
Dynamic Menus in IE
The idea is to have a set of images that will represent the main options of the menu “Hidden” somewhere will be all the submenus, as a div On roll over an image we bring the appropriate sub-menu div next to the image If we get out of the menu we hide the div Hiding basically means that we set its coordinate to negative values, so that it’s outside the screen
