Webwork
/
JavaScript Tool Kit #1
A collection of short, simple JavaScript snippets that do various useful things.
Pop-up Window - Text
One of the most useful of all JavaScripts, this one will pop up a new window of whatever size you want.
Source:
<a href="javascript:;"
onclick="window.open('popup-window.html', 'newwnd',
'width=300, height=150, left=50, top=150, status=0, scrollbars=0, resizable=0')">
Pop it up.</a>
onclick="window.open('popup-window.html', 'newwnd',
'width=300, height=150, left=50, top=150, status=0, scrollbars=0, resizable=0')">
Pop it up.</a>
Web page:
Popup Window Options:
- width=300,height=150 = size of new window in pixels
- left=50,top=150 = position on screen relative to top left corner
- status= 1(yes) or 0(no)
- scrollbars= 1(yes) or 0(no)
- resizable= 1(yes) or 0(no)
Pop-up Window - Button
Source:
<form>
<input type="button" value="Pop it up" onclick="window.open('popup-window2.html', 'newwnd', 'width=550, height=450, left=200, top=100, status=0, scrollbars=0, resizable=0')" />
</form>
<input type="button" value="Pop it up" onclick="window.open('popup-window2.html', 'newwnd', 'width=550, height=450, left=200, top=100, status=0, scrollbars=0, resizable=0')" />
</form>
Web page:
Pop-up Window - Styled Button
Source:
<form>
<input type="button" value="POP IT UP" onclick="window.open('popup-window3.html', 'newwnd', 'width=550, height=400, left=200, top=100, status=0, scrollbars=0, resizable=0')" style="color: #999999; font: normal 12px/11px 'trebuchet ms', sans-serif; color: #fff; background-color: #789; padding: 5px 10px 5px 10px; border-top: #abc solid 3px; border-left: #abc solid 3px; border-right: #345 solid 3px; border-bottom: #345 solid 3px; " />
</form>
<input type="button" value="POP IT UP" onclick="window.open('popup-window3.html', 'newwnd', 'width=550, height=400, left=200, top=100, status=0, scrollbars=0, resizable=0')" style="color: #999999; font: normal 12px/11px 'trebuchet ms', sans-serif; color: #fff; background-color: #789; padding: 5px 10px 5px 10px; border-top: #abc solid 3px; border-left: #abc solid 3px; border-right: #345 solid 3px; border-bottom: #345 solid 3px; " />
</form>
Web page:
Alert Message
Source:
<script language="JavaScript">
function alertUser() {
alert("I'm not unmindful of man's seeming need for some kind of faith. Basically I'm for anything that gets you through the night, be it prayer, tranquilizers or a bottle of Jack Daniel's.\n --Frank Sinatra, February, 1963")
}
</script>
<a href="javascript:;" onMouseOver="alertUser()">Roll over this.</a>
<a href="javascript:;" onMouseOver="alertUser()">Roll over this.</a>
Web page:
Back Button
Source:
<a href="javascript:window.history.back();">
« Back 1 Page</a>
« Back 1 Page</a>
Web page:
Pull-Down Navigation Menu
Source:
<script language="javascript" type="text/javascript">
function autonavdemo() {
if (document.navdemo.destination.options[document.navdemo.destination.selectedIndex].value) {
top.location = document.navdemo.destination.options[document.navdemo.destination.selectedIndex].value
}
}
</script>
<form name="navdemo" id="navdemo">
<select name="destination" onchange="autonavdemo()">
<option value="">Select a topic</option>
<option value="http://www.re-vision.com/webwork/p14styling-basic-tags/index.html">Styling Basic HTML Tags</option>
<option value="http://www.re-vision.com/webwork/p18text-formatting/index.html">Font and Text Styles</option>
<option value="http://www.re-vision.com/webwork/p22floating-content/index.html">Floating Content</option>
<option value="http://www.re-vision.com/webwork/p26shorthands/index.html">CSS Shorthands</option>
<option value="http://www.re-vision.com/webwork/p27wireframes/index.html">Wireframes</option>
</select>
</form>
<form name="navdemo" id="navdemo">
<select name="destination" onchange="autonavdemo()">
<option value="">Select a topic</option>
<option value="http://www.re-vision.com/webwork/p14styling-basic-tags/index.html">Styling Basic HTML Tags</option>
<option value="http://www.re-vision.com/webwork/p18text-formatting/index.html">Font and Text Styles</option>
<option value="http://www.re-vision.com/webwork/p22floating-content/index.html">Floating Content</option>
<option value="http://www.re-vision.com/webwork/p26shorthands/index.html">CSS Shorthands</option>
<option value="http://www.re-vision.com/webwork/p27wireframes/index.html">Wireframes</option>
</select>
</form>
Web page:
E-mail Link
Source:
<script language="JavaScript" type="text/JavaScript">
function mailpageurl() {
mail_str ="mailto:?subject=JavaScript Tools from Webwork";
mail_str += "&body=I think you'll find this useful.%0D%0A%0D";
mail_str +="Click here to read it (or copy this url and paste it into your browser):%0D%0A%0D";
mail_str +=location.href;
mail_str +="%0D";
mail_str +="%0D";
location.href = mail_str }
</script>
<a href="javascript:mailpageurl()">Email this page.</a>
function mailpageurl() {
mail_str ="mailto:?subject=JavaScript Tools from Webwork";
mail_str += "&body=I think you'll find this useful.%0D%0A%0D";
mail_str +="Click here to read it (or copy this url and paste it into your browser):%0D%0A%0D";
mail_str +=location.href;
mail_str +="%0D";
mail_str +="%0D";
location.href = mail_str }
</script>
<a href="javascript:mailpageurl()">Email this page.</a>
Web page:
