Module-5: Dynamic documents with JavaScript
Introduction:
DHTML or Dynamic HTML, is a collection of technologies used together to
create interactive and animated web sites by using a combination of a static
markup language(such as HTML) , a client–side scripting language (such as
JavaScript), a presentation definition language(such as CSS), and
the Document Object Model (DOM) It is a collection of technologies that
allows dynamic changes to documents defined with XHTML.
Positioning Elements:
The position property sets or returns the type of positioning method used
for an element (static,relative, absolute or fixed)
Syntax: Return the position property:
[Link] Set the position property:
[Link]="static|absolute|fixed|relative"
Types of Positioning:
i. Static: This is the normal positioning scheme in which elements are
positioned as they occur in the normal document flow
ii. Relative: Relative positioning moves the box relative to its original
position in the flow.
iii. Absolute: Absolutely positioned elements are removed from the
document flow entirely and positioned relative to a containing element.
iv. Fixed: The element stays in one position in thewindow even when the
document scrolls.
Absolute positioning:
Absolute positioning places an element in a specific location on the page
without regard to the position of other elements The positions specified
can be top, bottom, right, left By default the top left corner of the window is
positioned at 0,0 and bottom right corner (depending on resolution) is
positioned at coordinates 800, 600.
<head>
<title> Absolute Position </title>
<style type ="text/css">
#second
{
position: absolute;
top:100px;
left:150px;
backgroundcolor: yellow;
}
#third
{
position: absolute;
top:150px;
left:300px;
background-color:yellow;
}
</style>
</head>
<body>
<p id="first"> This is first para </p>
<p id="second"> This is second para </p>
<p id="third"> This is third para </p>
<p id="fourth"> This is fourth para </p>
</body>
Relative Positioning:
Relative positioning places the element in a position relative to the element
where it is defined within the document.
The second and third paragraph is moved little down when compared to
absolute positioning.
This is because, top offset is calculated from the original position of the
paragraph in the document flow. The top offset is not calculated from the
edges of the window.
This type of positioning is used to control the way elements appear, in
relation to other elements in the document
static positioning:
static is the default value. An element with position: static; is not positioned
in any special way.
Static positioned elements are not affected by top, bottom, left and right
properties The elements with static position are simply laid out in the
order they occur in the markup and take up as much room as they need.
This is the default behavior we get when we don’t apply any CSS at all to th
XHTML elements.
<head>
<style>
h2
{
position: static;
}
</style>
</head>
<body>
<h2>This is a heading with a static position</h2>
</body>
fixed position:
In Fixed Positioning, the element is positioned relative to the browser
window A fixed element is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled As with
relative,
the top, right, bottom, and left properties are used.
<html>
<head>
<style>
h2
{
position:fixed;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>This is a heading with a fixed position</h2>
</html>
Moving Elements:
An XHTML element whose position property is set to either absolute or
relative can be moved
Moving an element is simple: Changing the top or left property values
causes the element to move on the display.
Element Visibility:
Document elements can be specified to be visible or hidden using the
visibility property in the CSS style
The two possible values for visibility are, visible and hidden
If the visibility is set to visible, then the element will be displayed in the
document If the visibility is set to hidden, then the element will not be
displayed in the document.
Changing Fonts:
<!DOCTYPE html>
<head>
<script type="text/javascript">
function makeBigFont()
{
var parafont=[Link]("para").style;
[Link]="bold 25pt Times";
}
function makeSmallFont()
{
var parafont=[Link]("para").style;
[Link]="normal 8pt Times";
}
</script>
</head>
<body>
<p id="para" onmouseover="makeBigFont()"
onmouseout="makeSmallFont()">
Web Programming By Jackson
</body>
</html>
Slow movement elements:
<!DOCTYPE html>
<html>
<style>
#container {
width: 4000px;
height: 4000px;
position: relative;
background:skyblue;
}
#animate {
width: 600px;
height: 500px;
position: absolute;
background-image: url('[Link]');
}
h2
{
color:red;
position:fixed;
left:100px;
top:150px;
}
</style>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
function myMove() {
let id = null;
const elem = [Link]("animate");
let pos = 0;
clearInterval(id);
id = setInterval(frame, 5);
function frame() {
if (pos == 3500) {
clearInterval(id);
} else {
pos++;
[Link] = pos + "px";
[Link] = pos + "px";
}
}
}
</script>
<h2> Ohh......My God Save me..............</h2>
</body>
</html>
Stacking of elements:
<html>
<head>
<title></title>
<style type="text/css">
.layer1Style
{
border: solid thick black;
padding: 1em;
width: 300px;
background-color: Blue;
position: absolute;
top: 100px;
left: 400px;
z-index :1;
}
.layer2Style
{
border: solid thick blue;
padding: 1em;
width: 300px;
background-color: green;
position: absolute;
top: 120px;
left: 420px;
z-index :2;
.layer3Style
{
border: solid thick brown;
padding: 1em;
width: 300px;
background-color:red;
position: absolute;
top: 140px;
left: 440px;
z-index :3;
}
</style>
<script type="text/javascript">
var topLayer="layer3";
var origPos;
function mover(toTop,pos)
{
var newTop=[Link](toTop).style;
[Link]="10";
var topLayer=[Link](toTop).id;
origPos=pos;
}
function moveBack()
{
[Link](toLayer).[Link]=origPos;
}
</script>
</head>
<body><body style="background-color:orange">
<h2 style="text-align:center;color:red">prog includes XHTML </h2>
<div style="z-index: 10;" class="layer1Style" id="layer1"
onmouseover="mover('layer1')">
thelives of inhabitants of industrializedcountries,has well as some
unindustrialized contries,have been changed forever by the advent of
WWW.
</div>
<div style="z-index: 2;" class="layer2Style" id="layer2"
onmouseover="mover('layer2')">
the WWW may seem like mageic, untill you understand how it works. the
web is
accessed through a browser.
</div>
<div style="z-index: 0;"class="layer3Style" id="layer3"
onmouseover="mover('layer3')">
Windows XP provides many ways for you to communicate with friends,
co-workers,
and I with the rest of the world.
</div>
</body>
</html>
changing background color:
<!DOCTYPE html>
<html>
<head>
<title>COLOR CHANGE</title>
<link rel="stylesheet"type="text/css" href="[Link]">
</head>
<body>
<div id="squareOne"class="listener"></div>
<div id="squareTwo"class="listener"></div>
<div id="squareThree"class="listener"></div>
<script type="text/javascript"src="[Link]"></script>
</body>
</html>
[Link]
#squareOne
{
width:200px;
height:200px;
margin:5px;
background-color:green;
}
#squareTwo
{
width:200px;
height:200px;
margin:5px;
background-color:yellow;
}
#squareThree
{
width:200px;
height:200px;
margin:5px;
background-color:blue;
}
[Link]
[Link]('squareOne').addEventListener('click',ChangeC
olor);
[Link]('squareTwo').addEventListener('click',ChangeC
olor);
[Link]('squareThree').addEventListener('click',Change
Color);
function ChangeColor()
{
[Link]="red";
return false;}