Webwork
/
JavaScript Tool Kit #2

Another collection of short, simple JavaScript snippets that do various useful things.

Alert Message

Source:
<script language="JavaScript"> function alertUser() { alert("You just rolled the cursor over an Event Attribute.") } >/script>

<a href="javascript:;" onMouseOver="alertUser()">Roll over this.</a>
Web page:
Roll over this.

Confirm Box

Source (click to select all):
Web page:

Prompt Box

Source (click to select all):
Web page:

Centered Popup

Source:
<script>
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
</script>

<a href="javascript:void(0);" onclick="PopupCenter('http://www.colum.edu', 'myPop1',850,400);">CLICK TO OPEN POPUP</a>
Web page:
CLICK TO OPEN POPUP

Centered Popup with Thumbnails

Source:
<script>
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
</script>

<a href="javascript:void(0);" onclick="PopupCenter('daughter-of-dr.-jekyll.jpg', 'myPop1',400,520);"><img src="daughter-of-dr.-jekyll-thumb.jpg" width="96" height="128" alt="daughter-of-dr.-jekyll-thumb"></a>

<a href="javascript:void(0);" onclick="PopupCenter('girls-school.jpg', 'myPop1',400,520);"><img src="girls-school-thumb.jpg" width="96" height="128" alt="girls-school-thumb"></a>

<a href="javascript:void(0);" onclick="PopupCenter('outside-the-law.jpg', 'myPop1',400,520);"><img src="outside-the-law-thumb.jpg" width="96" height="128" alt="outside-the-law-thumb"></a>

<a href="javascript:void(0);" onclick="PopupCenter('untamed-fury.jpg', 'myPop1',400,520);"><img src="untamed-fury-thumb.jpg" width="96" height="128" alt="untamed-fury-thumb"></a>
Web page:
daughter-of-dr.-jekyll-thumb girls-school-thumb outside-the-law-thumb untamed-fury-thumb

Popup with Maximum Screen Size

Source:
<a href="http://www.colum.edu/" onclick="window.open(this.href, 'child', 'height=' + screen.height + ',width=' + screen.width + ',fullscreen'); return false">Columbia College Chicago</a>
Web page:

Previous | Webwork Table of Contents | Next >