JavaScript Examples

This page contains JavaScript examples - examples of JavaScript tricks that you can use for your own website.

You can use any of these examples simply by copying and pasting the code straight into your website.

We've got plenty of HTML examples too!

Code

Result

<script type="text/javascript"> // Popup window code function newPopup(url) { popupWindow = window.open( url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes') } </script> <p>Popup Window:</p> <p><a href="JavaScript:newPopup('http://www.quackit.com/html/codes/');">Get your HTML codes in a popup!</a></p> <div class="more-info"> <p>More info: <a href="http://www.quackit.com/javascript/popup_windows.cfm">Popup Windows</a></p> </div>

Popup Window: Get your HTML codes in a popup! More info: Popup Windows

Code

Result

<script language="javascript" type="text/javascript" > <!-- hide function jumpto(x){ if (document.form1.jumpmenu.value != "null") { document.location.href = x } } // end hide --> </script> <p>Jump Menu:</p> <form name="form1"> <select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)"> <option>Jump to...</option> <option value=http://www.quackit.com>Quackit Homepage</option> <option value=http://www.quackit.com/javascript/>JavaScript</option> <option value=http://www.quackit.com/html/>HTML</option> <option value=http://www.quackit.com/css/>CSS</option> <option value=http://www.quackit.com/sql/tutorial/>SQL</option> <option value=http://www.quackit.com/database/tutorial/>Database Tutorial</option> <option value=http://www.quackit.com/web_hosting/>Web Hosting Tutorial</option> </select> </form> <div class="more-info"> <p>More info: <a href="http://www.quackit.com/javascript/javascript_dropdown_menu.cfm">Jump Menu</a></p> </div>

Jump Menu: Jump to... Quackit Homepage JavaScript HTML CSS SQL Database Tutorial Web Hosting Tutorial More info: Jump Menu

Code	Result
<p>"Print" dialog with printer icon:</p> <p><a href="JavaScript:window.print();">Print this page</a></p> <div class="more-info"> <p>More info: <a href="http://www.quackit.com/javascript/javascript_print.cfm">JavaScript Print</a></p> </div>	"Print" dialog with printer icon: Print this page More info: JavaScript Print

Code	Result
<p>"Print" dialog with printer icon:</p> <a href="JavaScript:window.print();"><img src="/pix/printer_icon.gif" border="0" width="17" height="17" align="middle" alt="Print Version" /></a> <div class="more-info"> <p>More info: <a href="http://www.quackit.com/javascript/javascript_print.cfm">JavaScript Print</a></p> </div>	"Print" dialog with printer icon: More info: JavaScript Print

Code	Result
<p>Alert Box:</p> <input type="button" onclick="alert('Wow... you sure do know how to click!');" value="Click me..." /> <div class="more-info"> <p>More info: <a href="http://www.quackit.com/javascript/javascript_alert_box.cfm">JavaScript Alert</a></p> </div>	Alert Box: More info: JavaScript Alert

Code

Result

<p>Confirm Box:</p> <script type="text/javascript"> function confirmHappy() { var happiness=confirm("Are you sure you're happy?"); if (happiness==true) { alert("Wow! You seem really happy!"); } else { alert("You should get out more!"); } } </script> <input type="button" onclick="confirmHappy()" value="If you're happy and U know it, click me!" /> <div class="more-info"> <p>More info: <a href="http://www.quackit.com/javascript/codes/javascript_confirm.cfm">JavaScript Confirm</a></p> </div>

Confirm Box: More info: JavaScript Confirm

Code

Result

<p>Prompt:</p> <script type="text/javascript"> function displayPrompt() { var name=prompt("What's your name?","Homer"); if (name!=null && name!="") { alert("Well " + name + ". You seem very daring!"); } else { alert("Hey, I asked you your name!"); } } </script> <input type="button" onclick="displayPrompt()" value="I dare you to click me!" /> <div class="more-info"> <p>More info: <a href="http://www.quackit.com/javascript/codes/javascript_prompt.cfm">JavaScript Prompt</a></p> </div>

Prompt: More info: JavaScript Prompt

Code	Result
<p>Status Bar Messages:</p> <a href="http://www.quackit.com/html/codes/" onMouseover="JavaScript:window.status='Get your HTML codes here!'; return true;"onMouseout="JavaScript:window.status=''; return true">Hover over me!</a> <div class="more-info"> <p>More info: <a href="http://www.quackit.com/javascript/javascript_status_bar_messages.cfm">JavaScript Status Bar Messages</a></p> </div>	Status Bar Messages: Hover over me! More info: JavaScript Status Bar Messages

Code

Result

<p>Image Rollover:</p> <script type="text/javascript"> <!-- // Pre load images for rollover if (document.images) { smile = new Image nosmile = new Image smile.src = "http://www.quackit.com/pix/smile.gif" nosmile.src = "http://www.quackit.com/pix/nosmile.gif" } function swapImage(thisImage,newImage) { if (document.images) { document[thisImage].src = eval(newImage + ".src") } } --> </script> <a href="http://www.quackit.com/javascript/image_rollovers.cfm" onMouseOver="swapImage('jack','smile')" onMouseOut="swapImage('jack','nosmile')"> <img src="http://www.quackit.com/pix/nosmile.gif" width="100" height="100" border="0" alt="Picture of Jack" name="jack"> </a> <div class="more-info"> <p>More info: <a href="http://www.quackit.com/javascript/image_rollovers.cfm">Image Rollovers</a></p> </div>

Image Rollover: More info: Image Rollovers

Code

Result

<p>Timed Redirect:</p> <script type="text/JavaScript"> <!-- function timedRedirect(redirectTo, timeoutPeriod) { setTimeout("location.href = redirectTo;",timeoutPeriod); } // --> </script> <a href="JavaScript:void(0);" onclick="JavaScript:timedRedirect(redirectTo='http://www.quackit.com/html/examples/', timeoutPeriod='2000')">Redirect in 2 seconds...</a> <div class="more-info"> <p>More info: <a href="http://www.quackit.com/javascript/codes/timed_javascript_redirect.cfm">Timed Redirect</a></p> </div>

Timed Redirect: Redirect in 2 seconds... More info: Timed Redirect

Code

Result

<p>Timed Refresh:</p> <script type="text/JavaScript"> <!-- function timedRefresh(timeoutPeriod) { setTimeout("location.reload(true);",timeoutPeriod); } // --> </script> <p><a href="javascript:timedRefresh(3000)">Refresh this page in 3 seconds...</a></p> </div> <div class="more-info"> <p>More info: <a href="http://www.quackit.com/javascript/javascript_refresh_page.cfm">JavaScript Refresh</a></p> </div>

Timed Refresh: Refresh this page in 3 seconds... More info: JavaScript Refresh

Enjoy this page?

2. Link to this page (copy/paste into your own website or blog):
   <a href="http://www.quackit.com/javascript/examples/">JavaScript Examples</a> from Quackit.com
3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!