The Digital Research Initiative
The University of North Carolina at Chapel Hill

JavaScript for any occasion

Other Goodies

There are tons of other, littler things you can do with JavaScript to make viewing your page much more of an experience. While you should never overload your page with JavaScript (the occurance of phantom errors increases proportionally with the amount of lines of code), it is nice to have one little trick here and there. These are just a few things you can add.

Alert boxes

These can be somewhat annoying, but in some cases they can be really great. It all depends on the situation. In an older version of EvenOS, I had an alert box pop up if your browser was JavaScript enabled. It was good at first, but got old real quick. Use discrection when implementing alert boxes.

Add this garfle of code in the <head>:

<script>
<!-- hide javascript
function showAlert () {
	alert ("Your alert here");
}
// done hiding -->
</script>

Then you can have an alert box pop up when someone clicks a link with this snip of code,

<a href="URL" onClick="showAlert()">stuff</A>

or you can have it pop up when someone loads the page (I don't necessarily recommend this) by putting this in the <body>.

<body onLoad="showAlert()>

Try this on for size.

Click me

Scrolling Banner

This splotch of code is for your typical scrolling banner. It's not as cheesy as Internet Explorer's <marquee> tag, but it's also not as complicated as a lot of those scrolling banner Java applet's either. Warning: This is highly dorky and not recommended for actual use. I've got it here more as an example of what can happen when JavaScript falls into the wrong hands.

Insert this in the <head>:

<script>
<!--
var id,pause=0,position=0,revol=9;
function banner()  {
  var i,k;
  var msg="Your Text Here";
  var speed=10;
  document.thisform.thisbanner.value=msg.substring(position,position+50);
  if(position++==msg.length) {
      if (revol-- < 2) return;
      position=0;
  }
  id=setTimeout("banner()",1000/speed);
}
// -->
</script>

Now, add this to your <body> tag.

<body onload="banner()">

Finally, put this wherever you want the banner to show up and brace yourself.

<form name="thisform">
<input type="text" name="thisbanner" size="40">
</form>

Behold, dorkiness in all it's blatant glory:

Popup Windows

And finally, the most powerful and dynamic feature of JavaScript (aside from my transmogrifier engines) is the ability to open up whole new browser windows and have them float around the screen. This is way cool, and you can do so much with it.

There's two different ways you can do this. Both work fine and give you the same control over the new window. One just has more code to it than the other.

Here's the longer code. Insert this part in your <head>.

<script>
<!-- 
function makeRemote() {
remote = window.open("","remotewin","width=340,height=350,resizable=1,scrollbars=1");
remote.location.href = "URL";
    if (remote.opener == null) remote.opener = window; 
	remote.opener.name = "opener";
}
// -->
</script>

The beauty of this is the absolute control you have over the new window. Where it says width=340,height=350,resizable=1,etc., that's where you can configure the appearance of the window. Below is a listing of the different options you can use. You can set these either to 0 or no for off, or 1 or yes for on. The default for these is on, so you don't need to put all of these in your script unless you don't want to use them.

width		configure the width of the window; measured in pixels
height		configure the height of the window; measured in pixels
resizable	if set to no or 0, the window's size will be fixed
scrollbars	displays scrollbars.  best if set to auto
toolbar		controls the menu with the 'back,' 'forward,' and 'reload' buttons
status		displays the status bar
menubar		displays the 'File,' 'Edit,' menu (Windows or Unix only)
location	controls the location display

As for your <a href=""> tag, it'll look like this:

<a href="javascript:makeRemote()">Porn Heads v1</a>

Click below for an example idea of what this looks like.

Click me

And here's a smaller version of the code. This one is just as configurable, just shorter.

<script>
<!--
function open_window(url) {
	grumples = window.open(url,"grumples",
	 'scrollbars=1,resizable=1,width=340,height=175');
}
// -->
</script>

And here's your <a href="">. It's a little different from the first one in that the URL is in this tag (where in the first one it was part of the script).

<a href="javascript:open_window('q1.html')">Porn Heads v2</a>

Click below for an example idea of what this looks like.

Click me

The advantage of this one over the first script is that you can use this one over and over again on the same page because the URL is in the <a href=""> tag. In the first script, everytime you try to call the makeRemote() function, it's going to take you to the URL that's part of that script. One way to get around that is to change the name of the function for everytime you use it. So you could end up with a function named makeWindow or makeFloater or even biteMe. But that can get kinda messy when you try to keep track of what does what.

With the second script, you just call the URL in the <a href="javascript:open_window('URL goes here')"> and you're all set.


This site made by

By the time I get to Arizona...

This site was created especially for students of the UNC School of Journalism's
JOMC 050 Class, and anyone else who may be interested.
For more information, please contactdaikat@email.unc.edu
Last Updated: Thursday, 10-Dec-1998 13:05:04 EST