Dynamic HTML (DHTML)

Dynamic HTML (DHTML)

Week 8

Web Programming
Web Programming
• We have discussed Web Programming to be made up of:
– Static
– Server Side programming only
– Client and Server side programming
p g g
– AJAX

• One example of client side programming

– JavasSript

• So far,
far we considered JavaScript to allow browsers to
process client side scripts:
– Write content to a page at the client
– Validate form contents

2
 What is DHTML?
What is DHTML?
• DHTML stands for Dynamic Hypertext Mark
Mark‐
Up Language.

• Combination of HTML, Style Sheets,

J S i etc…
JavaScript,

• Popular way of making a static web page look

attractive and interactive.
3

What is DHTML?
What is DHTML?
• Once
O ce a Web eb Se
Server
e pprocesses
ocesses a web
eb page aand
d
sends it to the Client, it cannot get any more data
from the server unless a new request is made.

• To move around this drawback, we use DHTML

that runs on the Client's browser to bring special
effects to static pages.
– SSome JavaScript
J S i t function
f ti i called
is ll d to
t execute
t the
th
required effect when events like MouseOver,
MouseOut, Click, Load etc… occur

4
 Example 1
Example 1
• We will highlight how JavaScript can be used to
change the appearance and style of different objects
to include tooltips in the html form below.

Example 2
Screenshot
h

6
 Example 2 (Contd)
Example 2 (Contd)
• The objective
j is to add a tooltip
p for the Username.

• We start by adding two <div>:

– div_tooltip_username, that will contain an image that will
cause the tooltip to pop up
– div_display_tooltip,
div display tooltip that will be used to contain the text
for the tooltip

• We also define two JavaScript functions:

– displayTipUsername()
– closeToolTipUsername()

Example 2 (Contd)
Example 2 (Contd)
<div id=
<div id="div
div_display_tooltip
display tooltip" 
style="position:absolute; 
left:520;top:240;background color:yellow >
left:520;top:240;background‐color:yellow">
</div>
<div id="div_tooltip_username" style="display:inline" 
onclick="displayTipUsername()">
<img src="images/question.png" height="20" 
width="20">
</div>
8
 Example 2 (Contd)
F
Function
ti displayTipUsername()
di l Ti U ()
function displayTipUsername()
p y p ()
{
//Function to display the tooltip and hide the button
var tips="Please enter your Username";
document.getElementById("div_display_tooltip")
.innerHTML="<font
i HTML "<f t size=3;
i 3 color=blue>"
l bl >"
+tips +"</font><br><button
onclick closeTooltipUsername()>X</button> ;
onclick=closeTooltipUsername()>X</button>";
div_tooltip_username.style.display="none";
} //end function displayTip()
p y p()

Example 2 (Contd)
F
Function
ti closeTooltipUsername()
l T lti U ()
function closeTooltipUsername()
function closeTooltipUsername()
{
d
document.getElementById("div_display_toolti
l d("di di l li
p").innerHTML="";
document.getElementById("div_tooltip_user
name").style.display="inline";
}//end function closeTooltip()

10
 Example 2 (Contd)
Notes
• We apply style attributes to the <div> div_display_tooltip
so it displays at an appropriate location.

• displayTipUsername() function is called on the onclick

event for the <div> div_tooltip_username.

• The displayTipUsername() function adds text to

div_display_tooltip using the innerHTML attribute.

• W
We include
i l d a button
b tt to
t be
b displayed
di l d along
l with
ith the
th tooltip,
t lti
and associate the function closeToolTipUsername() to its
onclick event

11

Example 2 (Contd)
Notes
• We also hide the <div> div_tooltip_username,
_ p_ , byy
setting its style.display property to none.

• closeToolTipUsername()
() clears the text in
div_display_tooltip using the innerHTML
attribute.

• closeToolTipUsername()
p () also restores
div_tooltip_username by setting its style.display
to inline.

12
 Exercise 1
Exercise 1
We now want to add a
tool tip for the Password

Write the HTML &

JavaScript functions
required for this tooltip

13

Exercise 1 ‐ Answer
Exercise 1 
• We define yet another <div>
– div_tooltip_password, that will contain an image
that will cause the tooltip for the password to pop
up

• We also need to define two JavaScript

functions:
– displayTipPassword()
– closeToolTipPassword()

14
 Exercise 1 – Answer (Contd)
Function displayTipPassword() 
d l d()
function displayTipPassword()
{
var tips="Please enter your Password";
document.getElementById("div_display_tooltip").innerHTML="<font 
size=3; color=blue>"
l bl "
+tips + "</font><br> <button 
onclick=closeTooltipPassword()>X</button>";

document.getElementById("div_tooltip_password").style.display="
none";

}//end function displayTipPassword()

15

Exercise 1 – Answer (Contd)
Function closeTooltipPassword()
l l d()
function closeTooltipPassword()
function closeTooltipPassword()
{

document.getElementById("div_display_toolti
p ).innerHTML ;
p").innerHTML="";

document.getElementById( div_tooltip_pass
document.getElementById("div tooltip pass
word").style.display="inline";
}//end function closeTooltipPassword()
}//end function closeTooltipPassword()
16
 Exercise 1 – Answer (Contd)
Exercise 1  Answer (Contd)
• Notes:
– We notice that the logic for our different functions are the same
in Example 1

– They can be considered for parameterisation 17

Example 3
Example 3
• Parameterisation:
– Th
The objective
bj i is i to use a single
i l JavaScript
J S i function
f i to
display the tooltips.
– This can be achieved by passing parameters to the
JavaScript functions.

• Question: What parameters should be passed to

the displayTip(….) and closeTooltip(….) functions?
–O
One option
i isi to pass the
h following
f ll i as parameters for
f
Username:

18
 Example 3 (Contd)
f
function displayTip(param1,param2,param3)
i di l Ti ( 1 2 3)
function displayTip(param1,param2,param3)
{
//Function to display the tooltip and hide the button
var tips=param3;

document.getElementById(param2).innerHTML="<font 
size=3; color=blue>"
i 3 l bl "
+tips +"</font><br><button 
onclick=closeTooltip('"+param1+"','"+param2+"')>X</butto
n>";
"
document.getElementById(param1).style.display="none";
} //
} //end function displayTip()
p y p()

19

Example 3 (Contd)
Function closeTooltip(param1,param2)
i l li ( )
function closeTooltip(param1,param2)
function closeTooltip(param1 param2)
{
d
document.getElementById(param2). 
l d( 2)
innerHTML="";
document.getElementById(param1).style.displ
ay="inline";
}//end function closeTooltip()

20
 Example 4
Example 4
• On considering g our examples
p though,
g we find that the
tooltips are being displayed way too far from the
textboxes for which they were intended.

• We can pass a reference to the <div> calling the function

so we can position our tooltip close to it.
21

Example 4 (Contd)
Screenshot
h

22
 Example 4 (Contd)
Functions to find x,y
f d coordinates
d

23

Example 4 (Contd)
U d t d f ti di l Ti (
Updated function displayTip(param1,param2,param3)
1 2 3)
function displayTip(param1,param2,param3)
{
//Function to display the tooltip and hide the button
var tips=param3;

var obj = document.getElementById(param1);

document.getElementById(param2).style.left=findPosX(obj)+25;
document getElementById(param2) style top=findPosY(obj);
document.getElementById(param2).style.top=findPosY(obj);

document.getElementById(param2).innerHTML="<font size=3; 
color=blue>"
+tips +"</font><br><button 
onclick=closeTooltip('"+param1+"','"+param2+"')>X</button>";
document.getElementById(param1).style.display="none";
} //end function displayTip()
} //end function displayTip()

24
 Example 4 (Contd)
Example 4 (Contd)
• Notes:
- We set the left and top style properties of the div
element so it is displayed close to the desired text
box.

- W
We callll the
th fi dP X( bj) and
findPosX(obj) d findPosY(obj)
fi dP Y( bj)
functions to get the x and y coordinates of the object
p
parameter

25

References
• CSE 1041 – Previous lecture notes

26