Manipulating a Block (IE)

Manipulating a Block (IE) : DIV : HTML Tags JAVASCRIPT TUTORIALS

JAVASCRIPT TUTORIALS » HTML Tags » DIV »

Manipulating a Block (IE)



<HTML>
    <BODY>
    <DIV ID="redBox"
         STYLE="position:absolute;
                left:150px;
                top:150px;
                background-color:red;">

    This is a block of moving buttons
    <FORM>
    <INPUT TYPE="button" VALUE="UP" onClick="moveUp()">
    <INPUT TYPE="button" VALUE="DOWN" onCLick="moveDown()">
    <INPUT TYPE="button" VALUE="LEFT" onClick="moveLeft()">
    <INPUT TYPE="button" VALUE="RIGHT" onClick="moveRight()"><BR>
    <INPUT TYPE="button" VALUE="SHOW/HIDE Yellow Box" onClick="showHide()">
    </FORM>
    </DIV>
    <DIV ID="yellowBox" STYLE="background-color:yellow;">
    Here is some text defined as a block
    </DIV>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function moveUp() {
      document.all.redBox.style.pixelTop+=(-10);
    }

    function moveDown()
    {
      document.all.redBox.style.pixelTop+=10;
    }
    function moveLeft()
    {
      document.all.redBox.style.pixelLeft+=(-10);
    }
    function moveRight()
    {
      document.all.redBox.style.pixelLeft+=10;
    }
    function showHide()
    {
      if(document.all.yellowBox.style.visibility == "hidden")
        document.all.yellowBox.style.visibility="visible";
      else
        document.all.yellowBox.style.visibility="hidden";
    }
    //-->
    </SCRIPT>
    </BODY>

    </HTML>