Class Notes


CSS + Javascript

Opening, Sizing and Placing Window Using SELF

// keywords for monitor resolution
      screen.height
      screen.width

In the <head>: (of the document you are trying to open)

<script language="javascript" type="text/javascript">

      self.resizeTo(screen.width, screen.height); //resizes to fill monitor screen
      self.resizeTo(300, 400); //resizes to specific size

      self.moveTo(0, 0); //0,0 = upper left

</script>

// Centering the Window

<script language="javascript" type="text/javascript">

//variables to figure out position no matter the screen res
//the 300 is the width of the window and 400 is the height of the window
// this will center the window

      x = (screen.width - 300) / 2; //(screen width - window width) / 2
      y = (screen.height - 400) / 2; //(screen height - window height) / 2
      self.moveTo(x, y);

</script>

SAMPLE:

<script language="javascript" type="text/javascript">

      var h = 400; // arbitrary window height
      var w = 300; // arbitrary window width

      var x = (screen.width - w) / 2; // window position based on screen size
      var y = (screen.height - h) / 2;

      self.resizeTo(w,h); // size window
      self.moveTo(x,y); //position window

</script>

Closing Window Using SELF

In BODY: (of document you are trying to open)

      <a href="javascript:self.close();">close window </a>




Interact with the brand-new, super-dee-duper, fantastic-omatic "Poet-Tree"!! (v2.6 beta)


forest
tranquility solitude
earthly


<head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Poet Tree</title>
      <style type="text/css">
            #theblock {
                  position:relative;
                  margin:50px auto;
                  width:430px;
                  height:375px;
                  cursor: auto;
                  }
            #forest {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  cursor: pointer;
                  }
            #brown {
                  position:absolute;
                  top: 0px;
                  right: 0px;
                  width:360px;
                  height:28px;
                  background-color:#4A2F22;
                  cursor: pointer;
                  }
            #tranq {
                  position:absolute;
                  top: 35px;
                  right: 0px;
                  cursor: pointer;
                  }
            #sol {
                  position:absolute;
                  top: 172px;
                  left: 70px;
                  cursor: pointer;
                  }
            #vert {
                  position:absolute;
                  top: 172px;
                  left: 260px;
                  width: 27px;
                  height: 195px;
                  background-color: #705336;
                  cursor: pointer;
                  }
            #earth {
                  position:absolute;
                  top: 350px;
                  left: 175px;
                  cursor: pointer;
                  }

      </style>

      <script type="text/javascript">
            //Top horizontal bar and vertical bar clicks **********************************
            function changeColor(e, color) {
                  document.getElementById(e).style.backgroundColor = "#" + color;
            }

            //Earthly and Forest clicks **********************************
            function changeTop(e, pos) {
                  document.getElementById(e).style.top = pos + "px";
            }

            //horizontal bar mouseover and mouseout **********************************
            function changeWidth(e, widthNo) {
                  document.getElementById(e).style.width = widthNo + "px";
            }

            //vertical bar mouseover and mouseout **********************************
            function changeHeight(e, heightNo) {
                  document.getElementById(e).style.height = heightNo + "px";
            }

            //solitude onclick **********************************
            function toggleDisplay(e) {
                  var elem = document.getElementById(e);
                  var currentDisplay = elem.style.display;
                  if(currentDisplay == "none") {
                        elem.style.display = "block";
                  } else {
                        elem.style.display = "none";
                  }
            }

            //solitude rollover **********************************
            var solitudeImg = 0;
            // Preload animation images
            solImage1 = new Image();
            solImage1.src = "files/images/tension.gif";

            function switchSolitude() { //function to switch images
                  if (solitudeImg == 0) {
                        document.solitude.src = solImage1.src;
                        solitudeImg = 1;
                  } else {
                        document.solitude.src = "files/images/solitude.gif";
                        solitudeImg = 0;
                  }
            }

            //Tranquility clicks **********************************
            var tranquilImg = 1;
            // Preload animation images
            var image1 = new Image();
            image1.src = "files/images/tranquility.gif";
            var image2 = new Image();
            image2.src = "files/images/tranquility2.gif";
            var image3 = new Image();
            image3.src = "files/images/tranquility3.gif";

            // function to switch images
            function nextTranquilityImage() {
                  if (tranquilImg == 1 ) {
                        document.tranquility.src = image2.src;
                        tranquilImg = 2;
                  } else if (tranquilImg == 2 ) {
                        document.tranquility.src = image3.src;
                        tranquilImg = 3;
                  } else if (tranquilImg == 3 ) {
                        document.tranquility.src = image1.src;
                        tranquilImg = 1;
                  }
            }

      </script>
</head>

<body>
      <div id="theblock">
            <img id="forest" src="files/images/forest.gif" width="51" height="206" alt="forest" onclick="changeTop('earth', '350'); changeTop('forest', '0');" />
            <div id="brown" onclick="changeColor('brown', '955F44'); changeColor('vert', 'B48B63');"></div>
            <img id="tranq" name="tranquility" src="files/images/tranquility.gif" width="114" height="21" alt="tranquility" onclick="nextTranquilityImage();" onmouseover="changeWidth('brown',500);" onmouseout="changeWidth('brown', '360');"/>
            <img id="sol" name="solitude" src="files/images/solitude.gif" width="175" height="35" alt="solitude" onmouseover="switchSolitude();" onmouseout="switchSolitude();" onclick="toggleDisplay('brown'); toggleDisplay('vert');" />
            <div id="vert" onclick="changeColor('brown', '4A2F22'); changeColor('vert', '705336');" onmouseover="changeHeight('vert', '300');" onmouseout="changeHeight('vert', '195');"></div>
            <img id="earth" src="files/images/earthly.gif" width="74" height="17" alt="earthly" onclick="changeTop('earth', '250'); changeTop('forest', '100');" />
      </div>
</body>

HOMEWORK GIVEN


HOMEWORK GIVEN: Project 2 - 75%

Description: In a folder named lastFirst, submit your project 2 at 75% done. Include all html files, and make sure any CSS files (if external) are in a "css" folder, and all images are in an "images" folder.
DUE: Mar. 1, 2011


HOMEWORK DUE


HOMEWORK DUE: Project 2 - two pages

Description: In a folder lastFirst, turn in two finished pages for Project 2 with their images, css, and any other necessary documents. Remember, your css (if external) should be in a "css" folder, and your images should be in an "images" folder. Due at the beginning of class (like always).
DUE: TODAY