Scribd Logo
Upload

Welcome to Scribd!

  • 5 views

    WD Notes Unit 5

    Uploaded by

    Chandrakala SV

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    WD Notes Unit 5

    Uploaded by

    Chandrakala SV
    5 views16 pages

    Original Title

    WD notes unit 5

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    5 views16 pages

    WD Notes Unit 5

    Uploaded by

    Chandrakala SV

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 16

    UNIT-5

    Introduction:
    Dynamic HTML is not a new markup language. It is a collection of technologies that allows
    dynamic changes to documents defined with HTML. Specifically, a dynamic HTML document
    is an HTML document whose tag attributes, tag contents, or element style properties can be
    changed by user interaction or the occurrence of a browser event after the document has been,
    and is still being, displayed. Such changes can be made with an embedded script that accesses
    the elements of the document as objects in the associated DOM structure.
     Elements can be moved to new positions on the display.
     Elements can be made to appear and disappear.
     Foreground (text) and background colors can be changed.
     The font, font size and font style an be changed.
     Element content can be changed.
     The stacking order of overlapping elements (such as pictures) can be changed.
     The mouse cursor position can be changed.
     Text can be made to move across the display.

    Positioning Elements:
    We can position any element anywhere in the display of a document, also to move an element to
    a new position in the display dynamically, using JavaScript to change the positioning style
    properties of the element. These style properties, which are appropriately named left and top,
    dictate the distance from the left and top of some reference point to where the element is to
    appear. Another style property, position, interacts with left and top to provide a higher level of
    control of placement and movement of elements. The position property has three possible values:
    absolute, relative, and static.

    1.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. For example, if a
    paragraph of text is to appear 100 pixels from the left edge and 200 pixels from the top of the
    display window, the following element could be used:

    One use of absolute positioning is to superimpose special text over a paragraph of ordinary text
    to create an effect similar to a watermark on paper.
    Output:
    <html>
    <head>
    <title> absolute positioning </title>
    <style>
    .regtext {position:absolute;top:70px;left:25px;}
    <style>
    <head>
    <body>
    <p class=”regtext”>
    Apples are good for health
    </p>
    </body>
    </html>

    Apples are good for health

    2. Relative Positioning
    An element that has the position property set to relative, but does not specify top and left property
    values, is placed in the document as if the position attribute were not set at all. However, such an
    element can be moved later. If the top and left properties are given values, they displace the
    element by the specified amount from the position where it would have been placed (if top and
    left had not been set).
    3.Static Positioning:
    The default value for the position property is static. 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.

    Moving Elements:
    An HTML 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. 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.
    Element Visibility:
    Document elements can be specified to be visible or 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. The following example displays an image and allows the user to toggle
    a button, causing the image to appear and not appear in the document display (once again,
    the event handler is in a separate file):

    Changing Colors and Fonts:


    The background and foreground colors of the document display can be dynamically
    changed, as can the font properties of the text.
    Web users are accustomed to having links in documents change color when the cursor is
    placed over them. 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.
    In the next example, the only element is a one-line paragraph with an embedded special
    word. The special word is the content of a span element, so its attributes can be changed.
    The foreground color for the document is the default black. The word is presented in blue.
    When the mouse cursor is placed over the word, its color changes to red, its font style
    changes to italic, and its size changes from 16 point to 24 point. When the cursor is moved
    off the word, it reverts to its original style. Here is this document, called dynFont.html:

    Dynamic Content:
    The content of an element is accessed through the value property of its associated
    JavaScript object. So, changing the content of an element is not essentially different from
    changing the style properties of the element.
    Assistance to a browser user filling out a form can be provided with an associated text
    area, often called a help box. The content of the help box can change, depending on the
    placement of the mouse cursor. When the cursor is placed over a particular input field,
    the help box can display advice on how the field is to be filled in. When the cursor is
    moved away from all input fields, the help box content can be changed to simply indicate
    that assistance is available.
    Stacking Elements:
    The top and left properties allow the placement of an element anywhere in the two
    dimensions of the display of a document. Although the display is restricted to two
    physical dimensions, the effect of a third dimension is possible through the simple
    concept of stacked elements, such as that used to stack windows in graphical user
    interfaces. Although multiple elements can occupy the same space in the document, one
    is considered to be on top and is displayed. The top element hides the parts of the lower
    elements on which it is superimposed. 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 example, three images are placed on the display so that they overlap. 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. First, the function defines DOM
    addresses for the last top element and the new top element. Then, the function sets the
    zIndex value of the two elements so that the old top element has a value of 0 and the new
    top element has the value 10, effectively putting it at the top. The script keeps track of
    which image is currently on top with the global variable topp, which is changed every
    time a new element is moved to the top with the toTop function.
    Locating the Mouse Cursor:
    In JavaScript, we have methods that help us to capture the location of the mouse on the
    screen. The top left corner of the screen is (0, 0) i,e, X, and Y coordinates are (0, 0).
    This means that vertical zero is the topmost point and horizontal zero is the leftmost
    point. In this article, we are going to learn how to find the Coordinates of the Mouse
    cursor in JavaScript.
    It can be implemented using the clientX and clientY methods of the event:
     event.clientX: It gives the horizontal coordinate of the event.
     event.clientY: It gives the vertical coordinate of the mouse.
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <script>
    function coordinate(event) {
    let x = event.clientX;
    let y = event.clientY;
    document.getElementById("X").value = x;
    document.getElementById("Y").value = y;
    }
    </script>

    <body onmousemove="coordinate(event)">
    X-coordinate
    <input type="text" id="X">
    <br>
    <br>
    Y-coordinate
    <input type="text" id="Y">
    </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.

    Slow Movement of Elements:


    The element movements are controlled by changing the top and left properties, so that element
    can 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 method has two forms. One form takes two parameters, exactly as does
    setTimeout. It executes the given code repeatedly, using the second parameter as the interval, in
    milliseconds, between executions. The second form of setInterval takes a variable number of
    parameters. The first parameter is the name of a function to be called, the second is the interval
    in milliseconds between the calls to the function, and the remaining parameters are used as
    actual parameters to the function being called.
    ed as actual parameters to the function being called. The example presented here,
    moveText.html, moves a string of text from one position (100, 100) to a new position (300,
    300). The move is accomplished by using setTimeout to call a mover function every millisecond
    until the final position (300, 300) is reached. The initial position of the text is set in the span
    element that specifies the text. The onload attribute of the body element is used to call a function,
    initText, to initialize the x- and y-coordinates of the initial position with the left and top
    properties of the element and call the mover function. The mover function, named moveText,
    takes the current coordinates of the text as parameters, moves them one pixel toward the final
    position, and then, using setTimeout, calls itself with the new coordinates.
    Dragging and Dropping Elements:
    One of the more powerful effects of event handling is allowing the user to drag and drop
    elements around the display screen. The mouseup, mousedown, and mousemove events
    can be used to implement this feature. The mousedown event handler, grabber, takes the
    Event object as its parameter. It gets the element to be moved from the currentTarget
    property of the Event object and puts it in a global variable so that it is available to the
    other handlers. Then it determines the coordinates of the current position of the element
    to be moved and computes the difference between each of them and the corresponding
    coordinates of the position of the mouse cursor. These two differences, which are used by
    the handler for mousemove to actually move the element, are also placed in global
    variables. The grabber handler also registers the event handlers for mousemove and
    mouseup. These two handlers are named mover and dropper, respectively. The dropper
    handler disconnects mouse movements from the element-moving process by
    unregistering the handlers mover and dropper.
    Candy

    You might also like