[go: up one dir, main page]
Scribd
Upload
38 views10 pages

WP Unit 3 Notes

Uploaded by

Vikas Hokrani
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
38 views10 pages

WP Unit 3 Notes

Uploaded by

Vikas Hokrani
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/ 10

Dynamic Documents with JavaScript

 Positioning Elements
 Absolute Positioning
 Relative Positioning
 Static Positioning

i. Absolute Positioning
The absolute value for position is specified when the element is to be placed at a specific location in the
document display without regard to the positions of other elements.
OR
An element with position: absolute will be positioned with respect to its nearest Non-static ancestor. The
positioning of this element does not depend upon its siblings or the elements which are at the same level.

Syntax
<p style=“position : absolute; left : 100px; top: 200px”>

-- text –

</p>

Nearest non static


operator/parent tag Element on which absolute
property is used

ii. Relative Positioning

An element with position: relative is positioned relatively with the other elements which are sitting on top
of it.

Syntax
<p style=“position : relative; left : 100px; top: 200px”>

-- text –

</p>

Element 2 has moved


relative to other 4 elements
iii. Static Positioning

This method of positioning is set by default. If we don’t mention the method of positioning for any element,
the element has the position: static method by default. By defining Static, the top, right, bottom, and left
will not have any control over the element. The element will be positioned with the normal flow of the page.
OR
A statically positioned element is placed in the document as if it had the position value of relative but no
values for top or left were given. The difference is that a statically positioned element cannot have its top or
left properties initially set or changed later.

Syntax
<p style=“position : static; left : 100px; top: 200px”>

-- text –

</p>

 Moving Elements
 Moving an element is simple: Changing the top or left property values causes the element to
move on the display.
 An HTML element whose position property is set to either absolute or relative can be moved.
 If its position is set to absolute, the element moves to the new values of top and left; if its
position is set to relative, it moves from its original position by distances given by the new values
of top and left.

How it is done?
 A JavaScript function, stored in a separate file, is used to change the values of left and top in
this example.
 Although it is not necessary here, the id of the element to be moved is sent to the function
that does the moving, just to illustrate that the function could be used on any number of
different elements.
 The values of the two text boxes are also sent to the function as parameters.

<html>
<head>
<title>Moving</title>
</head>
<body>
<lable>X-Coordinate:<input type="text" id="a"/></lable>
<lable>Y-Coordinate:<input type="text" id="b"/></lable>
<input type="button" value="submit" onclick="move()"/>
<div id="image" style="position: absolute;top: 150px;left: 0px;">
<img src="C:\Users\rishi\Desktop\jpg wallpapers\AppBreweryWallpaper 7.jpg"" alt="" width="500"
height="600">
</div>
<script type="text/javascript">
function move()
{ Id of division to be
var pos=document.getElementById("image").style;
var a=document.getElementById("a").value; moved(in which image is
var b=document.getElementById("b").value; present)
pos.top=b+"px"; Converting Integer
pos.left=a+"px"; to Pixel value
} Input from textbox
</script> Input from textbox New X axis value
</body> New Y axis value
</html>

 Element Visibility
 Document elements can be specified to be “Visible & Hidden” with the value of their visibility
property.
 The two possible values for visibility are, quite naturally, visible and hidden.
 The appearance or disappearance of an element can be controlled by the user through a widget.
 Example-

<html>
<head>
<title>Moving</title>
</head>
<body>
<input type="button" value="Flip" onclick="flip()"/>
<div id="image" style="position: absolute;top: 150px;left: 0px;">
<img src="C:\Users\rishi\Desktop\jpg wallpapers\AppBreweryWallpaper 7.jpg"" alt=""
width="500" height="600">
</div>
<script type="text/javascript">
function flip()
{
dom = document.getElementById("image").style;
if (dom.visibility == "visible")
{ Id of division to be
dom.visibility = "hidden"; changed(in which image
}
is present)
else
dom.visibility = "visible";
}
</script>
</body>
</html>

 Changing Colors and Fonts


 The background and foreground(font) colors of the document display can be dynamically changed,
as can the font properties of the text.

1. Changing Colors
 The first of the two parameters to the function specifies whether the new color is for the
background or foreground; the second specifies the new color. The new color is the value
property of the text box that was changed by the user.
 Example-

Input from textbox either <html>


background or <head>
<title>Moving</title>
foreground
</head>
<body>
<lable>Background or Foreground:<input type="text" id="a"/></lable>
<lable>Color<input type="text" id="b"/></lable>
Input from textbox which <input type="button" value="Submit" onclick="setColor()"/>
ever color <div style="background-color:white;height: 200px;width: 500px;" id="bg">
<p style="color:black;" id="txt">The Text</p>
</div>
<script type="text/javascript">
function setColor()
{
var a=document.getElementById("a").value;
var b=document.getElementById("b").value;
var c=document.getElementById("bg").style;
var d=document.getElementById("txt").style;
if (input=="background")
{
c.background-color=b;
}
else
d.color=b;
}
</script>
</body>
</html>
2. Changing Fonts

 Use of the mouseover event to trigger a JavaScript event handler allows us to change any
property of any element in a document, including text, when the mouse cursor is placed
over it.
 Thus, the font style and font size, as well as the color and background color of text, can be
changed when the cursor is placed over the text. The text can be changed back to its
original form when an event handler is triggered with the mouseout event.
 Example-

<html>
<head>
<title>change size</title>
</head>
<body>
<lable>Font style:<input type="text" id="a"/></lable>
<lable>Font Color<input type="text" id="b"/></lable>
<lable>Font size<input type="text" id="c"/></lable>
<input type="button" value="set" onclick="set()"/>
<input type="button" value="reset" onclick="reset()"/>
<p style="color:blue;font-family:Times New Roman;font-size:100px;" id="txt">The Text</p>
</div>
<script type="text/javascript">
function set()
{ Input from textbox
var a=document.getElementById("a").value;
var b=document.getElementById("b").value; which ever color Input from textbox
var c=document.getElementById("c").value; which ever font style
var txt=document.getElementById("txt").style;
txt.font-family=a; Input from textbox
txt.color=b; Numeric value of font size
txt.font-size=c+"px";
}
function reset()
{
var txt=document.getElementById("txt").style;
txt.font-family="Times New Roman";
txt.color="blue"; Enter original values
txt.font-size="100px";
}
</script>
</body>
</html>

 Stacking Elements
 Although the display is restricted to two physical dimensions(x & y), the effect of a third
dimension is possible through the simple concept of stacked elements.
 Multiple elements can occupy the same space in the document, one is considered to be on top and
is displayed.
 The placement of elements in this third dimension is controlled by the z-index attribute of the
element.
 An element whose z-index is greater than that of an element in the same space will be displayed
over the other element, effectively hiding the element with the smaller z-index value.
 The JavaScript style property associated with the z-index attribute is zIndex.
 In the HTML description of this situation, each image tag includes an onclick attribute, which is
used to trigger the execution of a JavaScript handler function.
 Example-

<html>
<head>
<title>MouseOver</title>
<link rel="stylesheet" href="filler.css"/>
</head>
<body>
<p id="p1" onmouseOver="move('p1')">The first box</p>
<p id="p2" onmouseOver="move('p2')">The second box</p>
<p id="p3" onmouseOver="move('p3')">The third box</p>
<p id="p4" onmouseOver="move('p4')">The fourth box</p>
<script>
var current="p4"; Set default top element as
function move(top) Id of the
current division(<div>) to
element
{ be moved up
document.getElementById(top).style.zIndex=1; Set lower z index to
document.getElementById(current).style.zIndex=0; Set higher z index to background division
current=top; division to be on top
}
</script>
</body>
</html>

 Locating the Mouse Cursor


 A mouseclick event is an implementation of the Mouse-Event interface, which defines two pairs
of properties that provide geometric coordinates of the position of the element in the display that
created the event.
 One of these pairs,
i. clientX
ii. clientY These give the coordinates of the element relative to the upper-left corner of the
browser display window, in pixels.

 The other pair


i. screenX
ii. screenY These also give coordinates of the element, but relative to the users computer’s
screen.
 Example-

<html>
<head>
<title>change size</title>
</head>
<body onclick="findIt(event)"> Event name is passed as parameter
<lable>clientX:<input type="text" id="a"/></lable>
<lable>clientY<input type="text" id="b"/></lable>
<lable>screenX<input type="text" id="c"/></lable>
<lable>screenY<input type="text" id="d"/></lable>
</div>
<script type="text/javascript">

function findIt(evt) Event name is passed as parameter


{
document.getElementById("a").value = evt.clientX; Show the coordinates of the mouse
document.getElementById("b").value = evt.clientY; cursor position in an image and
document.getElementById("c").value = evt.screenX; anywhere on the screen when the
document.getElementById("d").value = evt.screenY; mouse is clicked
}
</script>
</body>
</html>

 Reacting to a Mouse Click


 In this case, the mousedown and mouseup events are used, respectively, to show and hide the
message “Please don’t click here!” on the display under the mouse cursor whenever the mouse
button is clicked, regardless of where the cursor is at the time.
<html>
<head>
<title>change size</title>
</head> Event name is passed as parameter
<body onmousedown="displayIt(event)" onmouseout="hideIt()">
<h1 id="message" style = "color: red; visibility: hidden;position: relative;font-size: 100px;">Dont click
here</h1>
<script type="text/javascript">

function displayIt(evt) Event name is passed as parameter


{
var dom = document.getElementById("message"); Fetches the element where message is written
dom.style.left = (evt.clientX - 130) + "px";
dom.style.top = (evt.clientY - 25) + "px"; Places the message at the cursor is clicked
dom.style.visibility = "visible";
}
function hideIt()
{
document.getElementById("message").style.visibility = "hidden";
}

</script>
</body>
</html>

 Slow Movement of Elements


 These movements are controlled by changing the top and left properties of the element to be
moved.
 The only way to move an element slowly is to move it by small amounts many times, with the
moves separated by small amounts of time.
 JavaScript has two Window methods that are capable of this task: setTimeout and setInterval.
 The setTimeout method takes two parameters: a string of JavaScript code to be executed and a number
of milliseconds of delay before executing the given code. For example, the call
setTimeout("mover()", 20);
causes a 20-millisecond delay, after which the function mover is called.
 The setInterval takes two parameters, exactly as does setTimeout. It executes the given code
repeatedly, using the second parameter as the interval, in milliseconds, between executions.
 Example-

<html>
<body onload="initial()">
<p style="position:relative;left:40px;top:20px;" id="a">TEXT</p>
<script>
Stores current value of x & y
Stores final value of x & y
var d,x,y,Fx=800,Fy=800;
function initial()
{
d=document.getElementById("a").style;
X=d.left;
Y=d.top; Get the current position of the text
x=X.match(/^[0-9]+$/); Convert the string values of left and top to
y=Y.match(/^[0-9]+$/); numbers by stripping off the units( converts
move(x,y); pixel value to numeric)
}
function move(x,y) A function to move the text from its original position to (finalx, finaly)
{
if(x!=Fx) If the x-coordinates are not equal, move x toward final x
{
if(x>Fx)
{
x--;
}
if(x<Fx)
{
x++;
}
}
if(y!=Fy) If the y-coordinates are not equal, move y toward final y
{
if(y>Fy)
{
y--;
}
if(y<Fy)
{
y++;
}
}
if((x!=Fx)||(y!=Fy)) As long as the text is not at the destination, call the mover with the
{ current position
d.left=x+"px"; Put the units back on the coordinates before
d.top=y+"px"; assigning them to the properties to cause the move
setTimeout("move("+x+","+y+")",1);
}
} Recursive call, after a 1-millisecond
</script> delay
</body>
</html>

 Dragging and dropping elements

 This event handling is allowing the user to drag and drop elements around the display screen.
 The ondragstart, ondragover, ondrop events and draggable attribute can be used to implement
this feature.
 Changing the top and left properties of an element, as seen earlier in the chapter, causes the element
to move.
 Example

<html>
<body>

<div style="border:1px solid;width:300px;height:200px;"


ondragstart="drag(event)" This function is executed when
draggable="true" dragging starts
If true the element can
ondragover="allowdrop(event)" be dragged else not
ondrop="drop(event)"
id="a">
</div><br/><br/> This function is executed
This function is executed
while dropping
when dragging ends

<div style="border:1px solid;width:300px;height:200px;" ondragstart="drag(event)" draggable="true"


ondragover="allowdrop(event)" ondrop="drop(event)" id="b"></div><br/><br/>
<div style="border:1px solid;width:300px;height:200px;">
<input style="border:0px;font-size:100px;width:300px;height:200px;" type="text"
ondragstart="drag(event)" draggable="true" id="c"/>
</div><br/><br/>
<script>
function allowdrop(v) This function is used to stop dragging
{
v.preventDefault();
}
function drag(v) This function is used to start dragging
{
v.dataTransfer.setData("text",v.target.id);
}
function drop(v) This function is used to drop
{
var a=v.dataTransfer.getData("text");
v.target.appendChild(document.getElementById(a));
}
</script>
</body>
</html>

You might also like