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>
<a href="javascript:;" onMouseOver="alertUser()">Roll over this.</a>
Web page:
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>
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:
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>
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:
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: