0% found this document useful (0 votes)
63 views13 pages

Dynamic HTML (DHTML) Dynamic HTML (DHTML) : Web Programming Web Programming

This document discusses Dynamic HTML (DHTML) and provides examples of using JavaScript to add dynamic interactivity to web pages. DHTML allows modifying web page content and style on the client-side using HTML, CSS, and JavaScript after page load. The examples demonstrate using JavaScript functions to display tooltip messages on mouse events by changing HTML element styles and content. Later examples show parameterizing the tooltip functions to make them reusable for different page elements.

Uploaded by

splokbov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
63 views13 pages

Dynamic HTML (DHTML) Dynamic HTML (DHTML) : Web Programming Web Programming

This document discusses Dynamic HTML (DHTML) and provides examples of using JavaScript to add dynamic interactivity to web pages. DHTML allows modifying web page content and style on the client-side using HTML, CSS, and JavaScript after page load. The examples demonstrate using JavaScript functions to display tooltip messages on mouse events by changing HTML element styles and content. Later examples show parameterizing the tooltip functions to make them reusable for different page elements.

Uploaded by

splokbov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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

You might also like