CS 544 Assignment Five

The Javascript Pop-up Window

Now here is a cool thing to do. Annoy your friends by creating pop-up after pop-up from your website!! Okay, maybe not the best thing to do from your website. We all know how much we like the ads that pop-up and tell us to hit the mouse or shoot Osama, so it follows that we shouldn't do this to our friends. Okay, maybe just one.

<script type="text/javascript">
<!--
function popUp(URL) {
   day = new Date();
   id = day.getTime();
   eval("page" + id + " = window.open(URL, '" + id + "',
        'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,
        resizable=0,width=300,height=200,left = 250,top = 200');");
}
-->
</script>

Okay, I still don't have the full clue on this, but, you can see from the code where the width, height, left and top properties are set. The window.open opens the window with the properties you feed it and the url that you pass to it as demonstrated by the HTML below.

<body onLoad="javascript:popUp('popup.htm')">

Looks good and works well.

Frames for Windows

What? A window frame? Where? A frame for windows. What a concept. Why would we want to use frames? Frames give us the ability to show pages on one part of a screen while we maintain a banner or menu on another part. When you scroll the information, the banner or menu won't move with it. Some very attractive and slick sites have been developed using frames. But then there are those older browsers that can't support frames. Oh, the horrors! Well, we can support that too. The HTML gods gave us an outlet for those who prefer older obsolete browsers that don't support frames.

First, let's look at the way to set up a frame page

<frameset rows="150,*,30" border="0" framespacing="0">
   <frame src="titleframe.htm" name="topFrame" />
   <frameset cols="120,*">
      <frame src="menuframe.htm" name="leftFrame" />
      <frame src="main1.htm" name="mainFrame" />
   </frameset>
   <frame src="footer.htm" />
</frameset>

As you can see from the example above, we start our frame setup by using the frameset tag. We follow it with the rows property which we have setup for three rows of different widths ("150,*,30"), the first one starting at the top for 150 pixels, the last one taking the bottom 30 pixels, and the middle one taking up the rest of the available space as denoted by the *. That gives us a space at both the top and bottom of the screen for a banner and footer. On the assignment page, I put a banner consistent with the rest of the assignments, and a footer with an email link and a link back to the main menu.

Next comes the frame definition for the header. This time, I've defined two columns, one of 120 pixels and the other filling the rest of the available space. These two columns will fill the row that was defined by the *. And then we define the footer at the bottom. Now, with this form set up, the page looks similar to this:

Header
Menu Main
Footer

Now it all seems to make sense. But what about the dinosaurs out there with the archaic computers and browsers that only support text? Or the segment of the population that needs plain text displayed, and have their browsers set to only show the text? What? You mean all this silly CSS work and they can't see it? Why did I bother to go to all that work? For the grade silly, the grade. Now it really does make sense. For that portion that don't like or use forms, the code that we need follows the frame definition and looks like this:

<noframes>
   <body>
      Sucks to not have frames, doesn't it???
   </body>
</noframes>

In this example all they would see on the screen would be Sucks to not have frames, doesn't it??? How nice of me to leave them a little message. In reality, between the <noframes> and </noframes> is where you would build a no frames version of your site or link to a no frames site so those who need the frameless version can visit your site.

CSS External Files Revisited

It dawned on me that I only told you how to load the files when there is more to this mystery. CSS stands for Cascading Style Sheets which contain the information to display your page with the styles you want. The real trick to the CSS sheets is the cascading part. What this means is you could have a standard style sheet for your site, one for the page you just loaded, and some inline code within your HTML. Let's see an example:

<link type="text/css" rel="stylesheet" href="css/standard.css" />
#main {
   font-size: 10px;
   color: red;
}

Here we loaded the standard.css and a sample of it's contents that make the font red and 10 pixel size. Then we load special.css that changes the font to italic and increases the font size to 12 pixels.

<link type="text/css" rel="stylesheet" href="css/special.css" />
#main {
   font-size: 12px;
   font-style: italic;
}

And finally, inside the HTML file we have this tidbit. Here we add bold to it and change the color to purple.

<style type="text/css">
<!--
#main {
   font-weight: bold;
   color: purple;
}
-->
</style>

So when the following code hits the browser, this is what they should see. 

<div id="main">Greetings World!</div>
Greetings World!

To muddy the waters, the cascading feature of style sheets allows you to modify the properties of a defined tag from within the HTML or from style sheet to style sheet. What ever the browser saw last for a style is what will be used. Notice that changing the font sytle to italic carried through to the final output, but the color of red didn't because we changed the color to purple within the HTML page. Aren't style sheets neat? That should about do it for CSS external files for now.

Javascript for Fun!

Yes, I've lost my marbles. On the fun page, I have displayed another version of a CSS only menu. "That's not Javascript", you say. You are right, but the three buttons below are! They are my CSS file switcher. "What's a CSS file switcher" you ask? Well, through the magic of CSS and Javascript, you can switch the CSS file you are using while you sit there and admire the site. Well, don't that beat all? Also, embedded within that fun page of HTML is some Javascript that puts the date and time into the title bar of the browser window.

And how do these miracles of modern science work? Smoke and mirrors, smoke and mirrors.

<script type="text/javascript">
function doTheClock() {
   window.setTimeout( "doTheClock()", 1000 );
   t = new Date();
   if(document.all || document.getElementById){
      document.title = "CS544 - " + t.toString();
   }else{   
      self.status = "CS544 - " + t.toString();
   }
}

doTheClock()
<script>

In this code, the document.title label is what holds the title of the page. By updating the document.title, you can change what is displayed up there.

Lastly but not leastly, is the all magical CSS switcher. This feature works because you have three different CSS files that are loaded on page load. They all use the same file basically with minor changes. And from the previous CSS explanation, we know that the last one read is what gets displayed. So we start this by loading the three CSS files and then loading the first one again. That let's us display the one we want to be associated with the first button, first.

<link rel="stylesheet" type="text/css" href="../css/final_drop.css">
<link rel="stylesheet" type="text/css" href="../css/final_drop2.css">
<link rel="stylesheet" type="text/css" href="../css/final_drop3.css">
<link rel="stylesheet" type="text/css" href="../css/final_drop.css">

Then we add in the Javascript

<script type="text/javascript">
<!--
var doAlerts=false;
function changeSheets(whichSheet){
  whichSheet=whichSheet-1;
  if(document.styleSheets){
    var c = document.styleSheets.length;
    if (doAlerts) alert('Change to Style '+(whichSheet+1));
    for(var i=0;i<c;i++){
      if(i!=whichSheet){
        document.styleSheets[i].disabled=true;
      }else{
        document.styleSheets[i].disabled=false;
      }
    }
  }
}
//-->
</script>

And finally we define the buttons and their functions 

<input name="1" type="button" 
            onClick="Javascript:changeSheets(1)" value="Style One" />
<input name="2" type="button" 
            onClick="Javascript:changeSheets(2)" value="Style Two" />
<input name="3" type="button" 
            onClick="Javascript:changeSheets(3)" value="Style Three" />

This is what the end result is, but to see them work, you'll need to go the Fun page.

The Assignment

Five items in this assignment

The Links

CS 544 assignment five
The real deal from the instructor

My assignment five
This is how I did the assignment

The Javascript Source
The source for the pop-up window code

Stu Nicholl's CSSPlay site
Source for CSS and supplier of the some of the menus on this site

Codelifter.com
Source for Javascript clock in the window title code

The Sections

The Javascript Code Files

The Assignment files

Final Project Kevin McGaughey Thanks for visiting Class Main Menu