Course notes
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Windows and more

February 22nd, 2011


Opening Windows using Javascript


Pop-up windows are used when you want to display something but don't want to leave the page.

EXAMPLE:
      <a href="#" onClick="window.open('trivia.html', 'triviaWnd', 'width=370,height=240,status=1'); return false;">click here</a>

a href equals a # because you want to stay on the same page.

onClick is the event handler. When the user clicks, it opens a window with the specifications listed.

window.open is a function that controls the event (opens a new browser window) and contains the event specifications, including what html page to load into the window (trivia.html), the window name (triviaWnd), size of window (370x240), and its status bar (1 = yes).


• The first parameter, 'trivia.html' is the URL of the file to load in the new window. Note that it doesn't have to be an HTML file. It could also be an image file or anything the browser can display.


• The second parameter, 'triviaWnd' is the name of the new window - the name can be anything that isn't a Javascript keyword, but must it must start with a letter, $, or underscore _ . Windows need to be named, so when they are called by the script, the browser knows which window your code is trying to communicate with. This is necessary to close the window later.


      - If you want information to load in the same window, you use the same window name in your links.
       - If you want multiple windows then you need to use unique names for each window created.

• The third parameter determines the dimensions and appearance of the window. We have specified a window of size 370x240 with a visible status bar. Note that it is in single quotes and the quotes end after the last parameter.

•The appearance of the window can be controlled by changing the value of the third parameter. The commonly used options are:


NOTE: Some of the parameters below do not work in all browsers
      height - Height of the new window in pixels (eg: height=100)
      width - Width of the new window in pixels (eg: width=200)
      top - Number of pixels from top of screen (eg: top=100)
      left - Number of pixels from left of screen (eg: left=200)
      directories - Specifies whether to display the browser directory buttons like "What's Cool" etc. (eg: directories=yes)
      hotkeys - Enables or disables various hotkeys (eg: hotkeys=no)
      location - Specifies whether the "Location" box is to be displayed (eg: location=yes)
      menubar - Specifies whether the new window should have a menu bar (eg: menubar=yes)
      resizable - Specifies whether the user is allowed to resize the new window (eg: resizable=no)
      scrollbars - Specifies whether the new window can have scroll bars if necessary (eg: scrollbars=yes)
      toolbar - Specifies whether the new window has a toolbar (eg: toolbar=yes)

NOTE: Instead of yes/no values, you may also use 1 or a 0. i.e., you may write toolbar=1 instead of toolbar=yes.




Samples of opening windows with different functions:


1) Basic window. No menu, no toolbar, no status bar, not even scrollbars:


EX:
      <a href="#" onClick="window.open('myHTML.html', 'newWnd', 'width=500,height=400'); return false;">Try it</a>

TEST IT


2) Window with menubar, location box, scrollbars, but not resizable:


EX: <a href="#" onClick="window.open('myHTML2.html', 'newWnd', 'width=500,height=400,menubar=yes,location=yes,scrollbars=yes,resizable=no'); return false;">Try it</a>

TEST IT


NOTE: scrollbars won't show up if they aren't necessary.


3) Window with toolbar, statusbar and scrollbars. You can resize this window if you want which wasn't possible with above sample windows:


EX: <a href="#" onClick="window.open('myHTML3.html', 'newWnd', 'width=500,height=400,toolbar=1,status=1,scrollbars=yes,resizable=1'); return false;">Try it</a>

TEST IT



Closing Windows

Place the following code in the file displayed in the pop-up window, not the main file that opens the window.


1) Using window.close to call the name of the window:


EX: <a href="#" onClick="window.close('newWnd'); return false;">Close this window</a>

TEST IT


Opening Windows at Specific Screen Coordinates

<sample-click here>


In an a href tag:

<a href="#" onClick="window.open('filename.html', 'winName', 'width=300, height=300, top=200, left=150')">open it</a>


top = number of pixels from top of screen, ex: top=200
left = number of pixels from left of screen, ex: left=150




Opening Multiple Windows with One Link

<sample-click here>

You will NEED 4 HTML files (testR2.html, testR2_a.html, testR2_b.htm, ltestR2_c.html)

In HEAD of testR2.html:


<script type="text/javascript">

             var myWins = new Array("testR2_a","testR2_b","testR2_c");

             function newWindows() {
                   for(var i in myWins) {
                        var fileName = myWins[i] + ".html";
                        var winName = myWins[i] + "Win";
                        var multiWindow = window.open(fileName,winName,"width=140,height=160");
                  }
            }
</script>


Comments:
//testR2_a, testR2_b and testR2_c are your html file names minus the extension.
//repeats as many times as there are files in myWins - 3.
//adds extension to complete the file name.
//adds WIN to create unique names for each window.
//calls the window.open() with the current filename and current windowname.

In BODY of testR2.html:


<body>
      <a href="javascript:newWindows()">Click here to see windows</a>

</body>


In each of the other files add this: (change the self.moveTo and background-color)

<html>
      <head>

            <style type="text/css">
                  .style1 {
                        font-size: 14px;
                        font-family: Arial, Helvetica, sans-serif;
                        color: #330033;
                  }
            </style>


            <script language="javascript" type="text/javascript">
                  self.moveTo(100, 100);
            </script>

      </head>

      <body style="background-color:#6633FF;">
                  <span class="style1">hello!</span>
      </body>
</html>

 

//the self.moveTo will move the window to the x and y position specified




Appear or Disappear using Javascript


The Code


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

            function hide(elem) {
                  document.getElementById(elem).style.display = "none";
            }

            function show(elem) {
                  document.getElementById(elem).style.display = "block";
            }

      </script>
</head>

<body>
      <a href="javascript: hide('myDiv');">Hide</a>
      <a href="javascript: show('myDiv');">Show</a><br /><br />

      <div id="myDiv" style="height:100px; width:100px; background-color:#990000;"></div>
</body>


Code in Action


Hide   Show



Explanation

With CSS, we can change the "display" of an element. Setting "display:none;" would make a div disappear. Setting "display:block;", while not necessarily intended to make something appear, WILL make it appear if it was previously set to "display:none;".

But - if we want it to disappear or reappear on the fly, we need to use Javascript. Luckily, Javascript allows us to change CSS.

In the example above, we have 2 links. The first calls a Javascript function that tells our object to change it's CSS to "display:none;". (You'll notice, setting CSS via Javascript looks a bit different than setting it in CSS.) The second does the same thing, but sets the display to "block" instead.

In-class Exercise

You do not have to just make a single DIV or IMG appear/disappear - what if you made a div with a bunch of things in it, then made that container DIV display appear/disappear?

Part 1 (the setup):
  1. Create a <div> with id="container" (don't forget to add a close </div> as well)
  2. Set it's height and width with CSS to 500px wide and 400px tall
  3. Set it's background-color to #CCC
  4. Center it using margins: margin: 50px auto; /* This will move it 50px from the top, and set it's left and right margins to "auto", which will center the div */
  5. Create two divs inside of the "container", and give each one an id of your choosing, and set them to 50px wide by 50px tall.

Part 2:
  1. Set the container box to position:relative;
  2. Set the position of the small inside-boxes to to position:absolute;
  3. Change the top or bottom and left or right properties of the inside boxes to position them around inside the container box.
  4. Try setting some to negative pixels: top: -25px; for example - what happens when you set them to negative pixels?

Part 3:
  1. Use the code above to show/hide the container box - you should notice that it shows/hides the boxes inside of it as well!
  2. Try making the container or one of the inner boxes disappear when you rollover something on the page and reappear when you roll outside of it.


How could you use this in your project? What other applications could it have?

Check out: http://www.w3schools.com/CSS/css_examples.asp


More Experimental Net Art sites:

0100101110101101.org
Visual Chaos
Crowds and Power
Trash Connection

HOMEWORK GIVEN

HOMEWORK GIVEN: 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: Feb. 24, 2011