Initial commit
This commit is contained in:
Michael Reber
@@ -0,0 +1,22 @@
|
||||
<html>
|
||||
<head>
|
||||
<script language="JavaScript">
|
||||
function function1() {
|
||||
document.all.myTableHeader.abbr = "Abbreviation";
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onLoad="function1();">
|
||||
<table width="428">
|
||||
<th id="myTableHeader" colspan="2">This is the table heading </th>
|
||||
<tr>
|
||||
<td> http://html-css.happycodings.com/ </td>
|
||||
<td> http://cplusplus.happycodings.com/ </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> http://javascript.happycodings.com/ </td>
|
||||
<td> http://csharp.happycodings.com/ </td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
<html>
|
||||
<body>
|
||||
<button onclick="alert(Math.abs(-10));">Math.abs(-10)</button>
|
||||
|
||||
<p>
|
||||
Happy Codings :-) JavaScript Code Examples
|
||||
<br>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
<script language="JavaScript">
|
||||
function goAccept() {
|
||||
document.all.myB.accept = "image/gif";
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onLoad="goAccept();">
|
||||
<input type="text"
|
||||
name="textfield"
|
||||
size="50"
|
||||
accept="image/gif"
|
||||
value='The content type of this field is "text/html"'>
|
||||
<input type="button"
|
||||
id="myB"
|
||||
value='The content type for this button is "image/gif"'>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
<script language="JavaScript">
|
||||
function goAcceptCharset() {
|
||||
alert(document.all.myForm.acceptCharset);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onLoad="goAcceptCharset();">
|
||||
<form id="myForm" method="post" action="" acceptcharset="UTF-8">
|
||||
some input fields
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
<HEAD>
|
||||
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
|
||||
<!-- Begin
|
||||
// THESE VARIABLES CAN BE CHANGED //
|
||||
var myMainMessage=" Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples";
|
||||
var speed=150;
|
||||
var scrollingRegion=50;
|
||||
|
||||
// END CHANGEABLE VARIABLES //
|
||||
var startPosition=0;
|
||||
function mainTextScroller() {
|
||||
var mainMessage=myMainMessage;
|
||||
var tempLoc=(scrollingRegion*3/mainMessage.length)+1;
|
||||
if (tempLoc<1) {tempLoc=1}
|
||||
var counter;
|
||||
for(counter=0;counter<=tempLoc;counter++)
|
||||
mainMessage+=mainMessage;
|
||||
document.mainForm.mainTextScroller.value=mainMessage.substring(startPosition,startPosition+scrollingRegion);
|
||||
startPosition++;
|
||||
if(startPosition>scrollingRegion) startPosition=0;
|
||||
setTimeout("mainTextScroller()",speed); }
|
||||
// End -->
|
||||
</script>
|
||||
|
||||
</HEAD>
|
||||
|
||||
<BODY onLoad="mainTextScroller()">
|
||||
|
||||
<form name="mainForm">
|
||||
<center>
|
||||
<input type="text" name="mainTextScroller" size="40" value>
|
||||
</center>
|
||||
</form>
|
||||
|
||||
<p><center>
|
||||
<font face="arial, helvetica" size"-2">Happy Codings :-) JavaScript Code Examples<br>
|
||||
by <a href="http://www.happycodings.com/">JavaScript Code Examples</a></font>
|
||||
</center><p>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!--
|
||||
Instructions:
|
||||
Set theTarget variable value in the script, as noted.
|
||||
Set the title, addresses, and items in the form, as shown.
|
||||
Insert this entire block of code -- both the script and the
|
||||
form -- in your page where the menu should appear.
|
||||
//-->
|
||||
|
||||
<script language="JavaScript">
|
||||
|
||||
// Set the target window or frame
|
||||
// _top opens in the same window
|
||||
// _blank opens in a new window
|
||||
// Use the frame name to open to a frameset target
|
||||
|
||||
var theTarget = "_blank";
|
||||
|
||||
function goThere(){
|
||||
if(!document.theForm.theMenu.selectedIndex==""){
|
||||
window.open(document.theForm.theMenu.options[document.theForm.theMenu.selectedIndex].value,theTarget,"");}}
|
||||
|
||||
</script>
|
||||
|
||||
<form name="theForm">
|
||||
<select name="theMenu" size=1 onChange="goThere()">
|
||||
<option selected value="">Happy Codings :-) JavaScript Code Examples
|
||||
<option value="http://javascript.happycodings.com/">Item One
|
||||
<option value="http://html-css.happycodings.com/">Item Two
|
||||
<option value="http://cplusplus.happycodings.com/">Item Three
|
||||
<option value="http://java.happycodings.com/">Item Four
|
||||
<option value="http://www.happycodings.com/">Item Five
|
||||
</select>
|
||||
</form>
|
||||
@@ -0,0 +1,80 @@
|
||||
Positionable Images or Full Page-Space Display
|
||||
|
||||
Functions:
|
||||
Runs an image slideshow in the background of the page,
|
||||
underneath the page content. Used with the accompanying
|
||||
sytle script, images are discretely positionable in the page
|
||||
space, just like a regular slideshow. Leave out the style
|
||||
script, and the slideshow runs with full page-space
|
||||
presentation.
|
||||
|
||||
<script language="JavaScript">
|
||||
|
||||
// set the following variables
|
||||
|
||||
// Set speed (milliseconds)
|
||||
var speed = 1000
|
||||
|
||||
// Specify the image files
|
||||
var Pic = new Array() // don't touch this
|
||||
// to add more images, just continue
|
||||
// the pattern, adding to the array below
|
||||
|
||||
Pic[0] = 'slideshow1_1.jpg'
|
||||
Pic[1] = 'slideshow1_2.jpg'
|
||||
Pic[2] = 'slideshow1_3.jpg'
|
||||
Pic[3] = 'slideshow1_4.jpg'
|
||||
Pic[4] = 'slideshow1_5.jpg'
|
||||
|
||||
// do not edit anything below this line
|
||||
|
||||
var t
|
||||
var j = 0
|
||||
var p = Pic.length
|
||||
|
||||
var preLoad = new Array()
|
||||
for (i = 0; i < p; i++){
|
||||
preLoad[i] = new Image()
|
||||
preLoad[i].src = Pic[i]
|
||||
}
|
||||
|
||||
function runBGSlideShow(){
|
||||
if (document.body){
|
||||
document.body.background = Pic[j];
|
||||
j = j + 1
|
||||
if (j > (p-1)) j=0
|
||||
t = setTimeout('runBGSlideShow()', speed)
|
||||
}
|
||||
}
|
||||
|
||||
//-->
|
||||
</script>
|
||||
|
||||
Modify your <body> tag to add the following onload event
|
||||
|
||||
<body onload="runBGSlideShow()">
|
||||
|
||||
Method One - Positionable Images
|
||||
----------
|
||||
|
||||
Put the following style sheet in the <head> of
|
||||
your page. Normally it will go *before* the script above.
|
||||
|
||||
<style>
|
||||
body{
|
||||
background-repeat: no-repeat;
|
||||
background-position: 200 100;
|
||||
}
|
||||
</style>
|
||||
|
||||
Set the position x y in pixels in the background-position
|
||||
element to position the images in the page. Do not use
|
||||
commas between the values!
|
||||
|
||||
|
||||
Method Two - Full Page-Space Background
|
||||
----------
|
||||
|
||||
Easy - just omit the style script above from the page.
|
||||
The background images will then repeat across the page, as
|
||||
usual.
|
||||
@@ -0,0 +1,77 @@
|
||||
<HEAD>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
|
||||
// set the following variables
|
||||
|
||||
// Set speed (milliseconds)
|
||||
var speed = 1000
|
||||
|
||||
// Specify the image files
|
||||
var Pic = new Array() // don't touch this
|
||||
// to add more images, just continue
|
||||
// the pattern, adding to the array below
|
||||
|
||||
Pic[0] = '1.gif'
|
||||
Pic[1] = '2.gif'
|
||||
Pic[2] = '3.gif'
|
||||
Pic[3] = '4.gif'
|
||||
|
||||
// do not edit anything below this line
|
||||
|
||||
var t
|
||||
var j = 0
|
||||
var p = Pic.length
|
||||
|
||||
var preLoad = new Array()
|
||||
for (i = 0; i < p; i++){
|
||||
preLoad[i] = new Image()
|
||||
preLoad[i].src = Pic[i]
|
||||
}
|
||||
|
||||
function runBGSlideShow(){
|
||||
if (document.body){
|
||||
document.body.background = Pic[j];
|
||||
j = j + 1
|
||||
if (j > (p-1)) j=0
|
||||
t = setTimeout('runBGSlideShow()', speed)
|
||||
}
|
||||
}
|
||||
// End -->
|
||||
</script>
|
||||
|
||||
</HEAD>
|
||||
|
||||
<body onload="runBGSlideShow()">
|
||||
|
||||
Method One - Positionable Images
|
||||
----------
|
||||
|
||||
Put the following style sheet in the <head> of
|
||||
your page. Normally it will go *before* the script above.
|
||||
|
||||
<style>
|
||||
body{
|
||||
background-repeat: no-repeat;
|
||||
background-position: 200 100;
|
||||
}
|
||||
</style>
|
||||
|
||||
Set the position x y in pixels in the background-position
|
||||
element to position the images in the page. Do not use
|
||||
commas between the values!
|
||||
|
||||
|
||||
Method Two - Full Page-Space Background
|
||||
----------
|
||||
|
||||
Easy - just omit the style script above from the page.
|
||||
The background images will then repeat across the page, as
|
||||
usual.
|
||||
|
||||
|
||||
<p><center>
|
||||
<font face="arial, helvetica" size"8">Happy Codings :-) JavaScript Code Examples<br>
|
||||
by <a href="http://javascript.happycodings.com/">JavaScript Code Examples</a></font>
|
||||
</center><p>
|
||||
@@ -0,0 +1,79 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Letras 3D - Happy Codings :-) JavaScript Code Examples</title>
|
||||
<style>
|
||||
body { background:silver; font-family:Arrus BT,Garamond,Times New Roman; }
|
||||
div { position:absolute; }
|
||||
</style>
|
||||
<head>
|
||||
<body>
|
||||
|
||||
<style>
|
||||
.info { font-family:Times New Roman; positon:relative;}
|
||||
.light { top:-1; left:-1; color:white;}
|
||||
.shade { top:+1; left:+1; color:pink; }
|
||||
.fill { top:0; left:0; color:red; } </style>
|
||||
|
||||
<!--- example #0 --->
|
||||
<div class="info">
|
||||
<div class="light"> <i>example 0</i> </div>
|
||||
<div class="shade"> <i>example 0</i> </div>
|
||||
<div class="fill"> <i>example 0</i> </div>
|
||||
</div>
|
||||
<br><br><br>
|
||||
|
||||
<!--- example #1 --->
|
||||
<style>
|
||||
.shade1 { top:+5; left:+5; color:black; }
|
||||
.fill1 { top:0; left:0; color:red; }
|
||||
</style>
|
||||
|
||||
<div class=example1>
|
||||
<div class="shade1"> <center><h1>Shadow</h1></center></div>
|
||||
<div class="fill1"> <center><h1>Shadow</h1></center></div>
|
||||
</div>
|
||||
|
||||
<br><br><br>
|
||||
|
||||
<!--- example #2 --->
|
||||
<style>
|
||||
.light2 { top:-1; left:-2; color:white; }
|
||||
.shade2 { top:+1; left:+2; color:black; }
|
||||
.fill2 { top:0; left:0; color:silver; }
|
||||
</style>
|
||||
<div class=example2>
|
||||
<div class="light2"> <center><h1>Emboss Background example</h1></center> </div>
|
||||
<div class="shade2"> <center><h1>Emboss Background example</h1></center> </div>
|
||||
<div class="fill2"> <center><h1>Emboss Background example</h1></center> </div>
|
||||
</div>
|
||||
|
||||
<br><br><br>
|
||||
|
||||
<!--- example #3 --->
|
||||
<style>
|
||||
.light3 { top:-2; left:-2; color:white; }
|
||||
.shade3 { top:+2; left:+2; color:lightblue; }
|
||||
.fill3 { top:0; left:0; color:blue; }
|
||||
</style>
|
||||
<div class=example3>
|
||||
<div class="light3"><center><h1>Emboss Color example</h1></center></div>
|
||||
<div class="shade3"><center><h1>Emboss Color example</h1></center></div>
|
||||
<div class="fill3"><center><h1>Emboss Color example</h1></center></div>
|
||||
</div>
|
||||
|
||||
<br><br><br>
|
||||
|
||||
<!--- example #4 --->
|
||||
<style>
|
||||
.light4 { top:-2; left:-2; color:yellow; }
|
||||
.shade4 { top:+2; left:+2; color:yellow; }
|
||||
.fill4 { top:0; left:0; color:darkgreen; }
|
||||
</style>
|
||||
<div class=example4>
|
||||
<div class="light4"><center><h1>Color Highlight example</h1></center></div>
|
||||
<div class="shade4"><center><h1>Color Highlight example</h1></center></div>
|
||||
<div class="fill4"><center><h1>Color Highlight example</h1></center></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
<script language="JavaScript">
|
||||
<!--
|
||||
|
||||
var backColor = new Array(); // don't change this
|
||||
|
||||
// Set the speed (in milliseconds).
|
||||
|
||||
var dwellTime = 500;
|
||||
|
||||
// Enter the colors you wish to use. The final
|
||||
// backColor[4] should be the fixed color of the
|
||||
// page.
|
||||
|
||||
backColor[0] = '#FF0000';
|
||||
backColor[1] = '#008000';
|
||||
backColor[2] = '#000099';
|
||||
backColor[3] = '#000000';
|
||||
backColor[4] = '#FFFFFF';
|
||||
|
||||
// Do not edit below this line.
|
||||
//-----------------------------
|
||||
|
||||
function flashBG(whichColor){
|
||||
document.bgColor = backColor[whichColor];
|
||||
}
|
||||
|
||||
var t = null;
|
||||
var d = dwellTime;
|
||||
|
||||
t = setTimeout('flashBG(0)',(d-d));
|
||||
t = setTimeout('flashBG(1)',(d));
|
||||
t = setTimeout('flashBG(2)',(d*2));
|
||||
t = setTimeout('flashBG(3)',(d*3));
|
||||
t = setTimeout('flashBG(4)',(d*4));
|
||||
|
||||
t = null;
|
||||
|
||||
//-->
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<HEAD>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
|
||||
<!-- Begin
|
||||
function a_plus_b(form) {
|
||||
a=eval(form.a.value)
|
||||
b=eval(form.b.value)
|
||||
c=a+b
|
||||
form.ans.value = c
|
||||
}
|
||||
function a_minus_b(form) {
|
||||
a=eval(form.a.value)
|
||||
b=eval(form.b.value)
|
||||
c=a-b
|
||||
form.ans.value=c
|
||||
}
|
||||
function a_times_b(form) {
|
||||
a=eval(form.a.value)
|
||||
b=eval(form.b.value)
|
||||
c=a*b
|
||||
form.ans.value=c
|
||||
}
|
||||
function a_div_b(form) {
|
||||
a=eval(form.a.value)
|
||||
b=eval(form.b.value)
|
||||
c=a/b
|
||||
form.ans.value = c
|
||||
}
|
||||
function a_pow_b(form) {
|
||||
a=eval(form.a.value)
|
||||
b=eval(form.b.value)
|
||||
c=Math.pow(a, b)
|
||||
form.ans.value = c
|
||||
}
|
||||
// End -->
|
||||
</SCRIPT>
|
||||
|
||||
<BODY>
|
||||
<CENTER>
|
||||
<FORM name="formx"><input type=text size=4 value=12 name="a">
|
||||
<input type="button" value=" + " onClick="a_plus_b(this.form)">
|
||||
<input type="button" value=" - " onClick="a_minus_b(this.form)">
|
||||
<input type="button" value=" x " onClick="a_times_b(this.form)">
|
||||
<input type="button" value=" / " onClick="a_div_b(this.form)">
|
||||
<input type="button" value=" ^ " onClick="a_pow_b(this.form)">
|
||||
<input type="number" size=4 value=3 name="b"> = <input type "number" value=0 name="ans" size=9>
|
||||
</FORM>
|
||||
</CENTER>
|
||||
|
||||
<p><center>
|
||||
<font face="arial, helvetica" size="8">Happy Codings :-) JavaScript Code Examples<br>
|
||||
by <a href="http://javascript.happycodings.com/">JavaScript Code Examples</a></font>
|
||||
</center><p>
|
||||
@@ -0,0 +1,35 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Basic HTML document - Happy Codings :-) JavaScript Code Examples</title>
|
||||
<script type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Heading of Basic Document</h1>
|
||||
<form>
|
||||
<input name="submit button" type="SUBMIT">
|
||||
</form>
|
||||
<ol type=1>
|
||||
<li>http://javascript.happycodings.com/</li>
|
||||
<li>http://html-css.happycodings.com/</li>
|
||||
<li>http://cplusplus.happycodings.com/</li>
|
||||
<li>http://java.happycodings.com/</li>
|
||||
</ol>
|
||||
<table width="3" height="3" border>
|
||||
<tr>
|
||||
<th colspan="3">Table</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cell1</td>
|
||||
<td>cell2</td>
|
||||
<td>cell3</td>
|
||||
</tr> <tr>
|
||||
<td>cell4</td>
|
||||
<td>cell5</td>
|
||||
<td>cell6</td>
|
||||
</tr>
|
||||
</table>
|
||||
<P>
|
||||
This is a Basic HTML document structure.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,15 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>My first HTML page - Happy Codings :-) JavaScript Code Examples</title>
|
||||
<script type="text/javascript">
|
||||
<!-- Hide
|
||||
|
||||
//Your code will go here
|
||||
|
||||
// End hide-->
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Your page content will go here -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
|
||||
<title>History Object</title>
|
||||
<script type="text/javascript">
|
||||
function showCount() {
|
||||
var histCount = window.history.length;
|
||||
if (histCount > 2) {
|
||||
alert("You have been to " + histCount + " Web pages this session.");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<input type="button" name="activity" value="My Activity" onclick="showCount()" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>canvas Object - Happy Codings :-) JavaScript Code Examples</title>
|
||||
<script type="text/javascript">
|
||||
function draw() {
|
||||
var canvas = document.getElementById("chart");
|
||||
if (canvas.getContext) {
|
||||
var context = canvas.getContext("2d");
|
||||
context.lineWidth = 20;
|
||||
|
||||
context.strokeStyle = "red";
|
||||
context.beginPath();
|
||||
context.moveTo(20, 90);
|
||||
context.lineTo(20, 10);
|
||||
context.stroke();
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
canvas { border: 1px solid black; }
|
||||
</style>
|
||||
</head>
|
||||
<body onload="draw();">
|
||||
<h1>canvas Object</h1>
|
||||
<hr />
|
||||
<canvas id="chart" width="130" height="100"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Checkbox Event Handler - Happy Codings :-) JavaScript Code Examples</title>
|
||||
<style type="text/css">
|
||||
#myGroup {visibility:hidden}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function toggle(chkbox, group) {
|
||||
var visSetting = (chkbox.checked) ? "visible" : "hidden";
|
||||
document.getElementById(group).style.visibility = visSetting;
|
||||
}
|
||||
function swap(radBtn, group) {
|
||||
var modemsVisSetting = (group == "modems") ? ((radBtn.checked) ? "" : "none") : "none";
|
||||
document.getElementById("modems").style.display = modemsVisSetting;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<input type="checkbox" name="monitor" onclick="toggle(this, 'myGroup')" />Monitor
|
||||
<span id="myGroup">
|
||||
<input type="radio" />15"
|
||||
</span>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Checkbox Event Handler - Happy Codings :-) JavaScript Code Examples</title>
|
||||
<style type="text/css">
|
||||
#myGroup {visibility:hidden}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
function toggle(chkbox, group) {
|
||||
var visSetting = (chkbox.checked) ? "visible" : "hidden";
|
||||
document.getElementById(group).style.visibility = visSetting;
|
||||
}
|
||||
function swap(radBtn, group) {
|
||||
var modemsVisSetting = (group == "modems") ? ((radBtn.checked) ? "" : "none") : "none";
|
||||
document.getElementById("modems").style.display = modemsVisSetting;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<form>
|
||||
<input type="checkbox" name="monitor" onclick="toggle(this, 'myGroup')" />Monitor
|
||||
<span id="myGroup">
|
||||
<input type="radio" />15"
|
||||
</span>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Clock - Happy Codings :-) JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript"><!--
|
||||
function dateTime() {
|
||||
var now = new Date();
|
||||
var result = now.toLocaleString();
|
||||
var tzOffset=-now.getTimezoneOffset()/60;
|
||||
if(tzOffset<0)
|
||||
result += " (GMT "+tzOffset+" hours)";
|
||||
else
|
||||
result += " (GMT +"+tzOffset+" hours)";
|
||||
return result;
|
||||
}
|
||||
function tick() {
|
||||
document.forms[0].clock.value=dateTime()
|
||||
setTimeout("tick()",1000)
|
||||
}
|
||||
// --></SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<FORM>
|
||||
<INPUT NAME="clock" TYPE="TEXT" SIZE="50"
|
||||
VALUE="&{dateTime()};">
|
||||
</FORM>
|
||||
<SCRIPT LANGUAGE="JavaScript"><!--
|
||||
tick()
|
||||
// --></SCRIPT>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,47 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
|
||||
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
|
||||
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
Ext.onReady(function() {
|
||||
|
||||
|
||||
new Ext.Window({
|
||||
layout : 'hbox',
|
||||
height : 300,
|
||||
width : 300,
|
||||
title : 'A Container with an HBox layout',
|
||||
layoutConfig : {
|
||||
pack : 'start'
|
||||
},
|
||||
defaults : {
|
||||
frame : true,
|
||||
},
|
||||
items : [
|
||||
{
|
||||
title : 'Panel 1',
|
||||
height : 100
|
||||
},
|
||||
{
|
||||
title : 'Panel 2',
|
||||
height : 75,
|
||||
width : 100
|
||||
},
|
||||
{
|
||||
title : 'Panel 3',
|
||||
height : 200
|
||||
}
|
||||
]
|
||||
}).show();
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
<div id='div1'>Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Cookie Test - Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript"><!--
|
||||
function updateCookie() {
|
||||
document.cookie=document.form1.cookie.value
|
||||
location.reload(true)
|
||||
}
|
||||
// --></SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
document.write("Your current cookie value is: '"+ document.cookie+"'")
|
||||
</SCRIPT>
|
||||
<FORM ACTION="" NAME="form1">
|
||||
<P>Enter new cookie: <INPUT TYPE="TEXT" SIZE="60" NAME="cookie"></P>
|
||||
<INPUT TYPE="BUTTON" NAME="setCookie" VALUE="Set Cookie" onClick="updateCookie()">
|
||||
</FORM>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,53 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Count Down Timer - Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
<!--
|
||||
var running = false
|
||||
var endTime = null
|
||||
var timerID = null
|
||||
function startTimer() {
|
||||
running = true
|
||||
now = new Date()
|
||||
now = now.getTime()
|
||||
// change last multiple for the number of minutes
|
||||
endTime = now + (1000 * 60 * 1)
|
||||
showCountDown()
|
||||
}
|
||||
function showCountDown() {
|
||||
var now = new Date()
|
||||
now = now.getTime()
|
||||
if (endTime - now <= 0) {
|
||||
stopTimer()
|
||||
|
||||
alert("Time is up. Put down your pencils.")
|
||||
} else {
|
||||
var delta = new Date(endTime - now)
|
||||
var theMin = delta.getMinutes()
|
||||
var theSec = delta.getSeconds()
|
||||
var theTime = theMin
|
||||
theTime += ((theSec < 10) ? ":0" : ":") + theSec
|
||||
document.forms[0].timerDisplay.value = theTime
|
||||
if (running) {
|
||||
timerID = setTimeout("showCountDown()",1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
function stopTimer() {
|
||||
clearTimeout(timerID)
|
||||
running = false
|
||||
document.forms[0].timerDisplay.value = "0:00"
|
||||
}
|
||||
//-->
|
||||
</SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<FORM>
|
||||
<INPUT TYPE="button" NAME="startTime" VALUE="Start 1 min. Timer"
|
||||
onClick="startTimer()">
|
||||
<INPUT TYPE="button" NAME="clearTime" VALUE="Clear Timer"
|
||||
onClick="stopTimer()"><P>
|
||||
<INPUT TYPE="text" NAME="timerDisplay" VALUE="">
|
||||
</FORM>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,51 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Throwing a Custom Error Object Exception - Happy Codings :-) JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
var letters = new Array("A","B","C","D","E")
|
||||
function getErrorObj(msg) {
|
||||
var err = new Error(msg)
|
||||
// take care of IE5/5.5
|
||||
if (!err.message) {
|
||||
err.message = msg
|
||||
}
|
||||
err.name = "MY_ERROR"
|
||||
return err
|
||||
}
|
||||
function getLetter(fld) {
|
||||
try {
|
||||
var inp = parseInt(fld.value, 10)
|
||||
if (isNaN(inp)) {
|
||||
throw getErrorObj("Entry was not a number.")
|
||||
}
|
||||
if (inp < 1 || inp > 5) {
|
||||
throw getErrorObj("Enter only 1 through 5.")
|
||||
}
|
||||
fld.form.output.value = letters[inp]
|
||||
}
|
||||
catch (e) {
|
||||
switch (e.name) {
|
||||
case "MY_ERROR" :
|
||||
alert(e.message)
|
||||
fld.form.output.value = ""
|
||||
fld.focus()
|
||||
fld.select()
|
||||
break
|
||||
default :
|
||||
alert("Reload the page and try again.")
|
||||
}
|
||||
}
|
||||
}
|
||||
</SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Throwing a Custom Error Object Exception</H1>
|
||||
<HR>
|
||||
<FORM>
|
||||
Enter a number from 1 to 5:
|
||||
<INPUT TYPE="text" NAME="input" SIZE=5>
|
||||
<INPUT TYPE="button" VALUE="Get Letter" onClick=getLetter(this.form.input)>
|
||||
Matching Letter is:<INPUT TYPE="text" NAME="output" SIZE=5>
|
||||
</FORM>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,34 @@
|
||||
<html>
|
||||
<head><title>DOM Core Analyzer - Happy Codings :-) JavaScript Code Examples</title>
|
||||
<script language="JavaScript">
|
||||
function analyzeDocument() {
|
||||
var win = open("","results")
|
||||
var doc = win.document
|
||||
doc.open()
|
||||
doc.writeln("<html><body>")
|
||||
getDocumentStructure(document.documentElement, doc)
|
||||
doc.writeln("</body></html>")
|
||||
doc.close()
|
||||
}
|
||||
|
||||
function getDocumentStructure(node, doc) {
|
||||
doc.write(node.nodeName)
|
||||
var children = node.childNodes
|
||||
if(children != null && children.length > 0) {
|
||||
doc.writeln("<ul>")
|
||||
for(var i=0; i<children.length; ++i) {
|
||||
var child = children.item(i)
|
||||
doc.write("<li>")
|
||||
getDocumentStructure(child, doc)
|
||||
}
|
||||
doc.writeln("</ul>")
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="analyzeDocument()">
|
||||
<h1 align="center">h1 center</h1>
|
||||
<p> p <code> p code </code> after p </p>
|
||||
<p>second p</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>A Demonstration of a Nested Loop - Happy Codings :-) JavaScript Code Examples</title>
|
||||
</head><body>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
document.write("All x,y coordinates between (0,0) and (9,9):<br>")
|
||||
|
||||
for (var x = 0; x < 10; ++x) {
|
||||
for (var y = 0; y < 10; ++y) {
|
||||
document.write("(" + x + "," + y + "),");
|
||||
}
|
||||
document.write('<br>');
|
||||
}
|
||||
|
||||
document.write("<br>After completing the loop, x equals : " + x);
|
||||
document.write("<br>After completing the loop, y equals : " + y);
|
||||
// -->
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,31 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>location.hash Property - Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
function goNextAnchor(where) {
|
||||
window.location.hash = where
|
||||
}
|
||||
</SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<A NAME="start"><H1>Top</H1></A>
|
||||
<FORM>
|
||||
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor('sec1')">
|
||||
</FORM>
|
||||
<HR>
|
||||
<A NAME="sec1"><H1>Section 1</H1></A>
|
||||
<FORM>
|
||||
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor('sec2')">
|
||||
</FORM>
|
||||
<HR>
|
||||
<A NAME="sec2"><H1>Section 2</H1></A>
|
||||
<FORM>
|
||||
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor('sec3')">
|
||||
</FORM>
|
||||
<HR>
|
||||
<A NAME="sec3"><H1>Section 3</H1></A>
|
||||
<FORM>
|
||||
<INPUT TYPE="button" NAME="next" VALUE="BACK TO TOP" onClick="goNextAnchor('start')">
|
||||
</FORM>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,60 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Date String Maker - Happy Codings :-) JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
function MakeArray(n) {
|
||||
this.length = n
|
||||
return this
|
||||
}
|
||||
monthNames = new MakeArray(12)
|
||||
monthNames[1] = "January"
|
||||
monthNames[2] = "February"
|
||||
monthNames[3] = "March"
|
||||
monthNames[4] = "April"
|
||||
monthNames[5] = "May"
|
||||
monthNames[6] = "June"
|
||||
monthNames[7] = "July"
|
||||
monthNames[8] = "August"
|
||||
monthNames[9] = "September"
|
||||
monthNames[10] = "October"
|
||||
monthNames[11] = "November"
|
||||
monthNames[12] = "December"
|
||||
dayNames = new MakeArray(7)
|
||||
dayNames[1] = "Sunday"
|
||||
dayNames[2] = "Monday"
|
||||
dayNames[3] = "Tuesday"
|
||||
dayNames[4] = "Wednesday"
|
||||
dayNames[5] = "Thursday"
|
||||
dayNames[6] = "Friday"
|
||||
dayNames[7] = "Saturday"
|
||||
function customDateString(oneDate) {
|
||||
var theDay = dayNames[oneDate.getDay() + 1]
|
||||
var theMonth = monthNames[oneDate.getMonth() + 1]
|
||||
var theYear = oneDate.getYear()
|
||||
theYear += (theYear < 100) ? 1900 : 0
|
||||
return theDay + ", " + theMonth + " " + oneDate.getDate() + ", " + theYear
|
||||
}
|
||||
function dayPart(oneDate) {
|
||||
var theHour = oneDate.getHours()
|
||||
if (theHour <6 )
|
||||
return "wee hours"
|
||||
if (theHour < 12)
|
||||
return "morning"
|
||||
if (theHour < 18)
|
||||
return "afternoon"
|
||||
return "evening"
|
||||
}
|
||||
</SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1> Welcome!</H1>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
today = new Date()
|
||||
var header = (customDateString(today)).italics()
|
||||
header += "<BR>We hope you are enjoying the "
|
||||
header += dayPart(today) + "."
|
||||
document.write(header)
|
||||
</SCRIPT>
|
||||
<HR>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,31 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Load URL - Happy Codings :-) JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript"><!--
|
||||
function loadFrames() {
|
||||
ix = document.URLform.protocol.options.selectedIndex
|
||||
urlString = document.URLform.protocol.options[ix].value+"//"
|
||||
urlString += document.URLform.hostname.value
|
||||
path = document.URLform.path.value
|
||||
if(path.length > 0) {
|
||||
if(path.charAt(0)!="/")
|
||||
path = "/"+path
|
||||
}
|
||||
urlString += path
|
||||
parent.frames[1].location.href=urlString
|
||||
}
|
||||
// --></SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<FORM ACTION="" NAME="URLform">
|
||||
<P>Select protocol:
|
||||
<SELECT NAME="protocol" SIZE="1">
|
||||
<OPTION VALUE="file:" SELECTED="SELECTED">file</OPTION>
|
||||
<OPTION VALUE="http:">http</OPTION>
|
||||
<OPTION VALUE="ftp:">ftp</OPTION></SELECT></P>
|
||||
<P>Enter host name: <INPUT TYPE="TEXT" NAME="hostname" SIZE="45"></P>
|
||||
<P>Enter path: <INPUT TYPE="TEXT" NAME="path" SIZE="50"></P>
|
||||
<INPUT TYPE="BUTTON" NAME="load" VALUE="Load URL" ONCLICK="loadFrames()">
|
||||
</FORM>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,34 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>A Function Can Be Set Up to Accept a Variable Number of Arguments - Happy Codings :-)</title>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
function welcomeMessage(userName) {
|
||||
if (userName != null) {
|
||||
document.writeln("Hello, " + userName);
|
||||
}else{
|
||||
document.writeln("Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples!");
|
||||
}
|
||||
numArgs = welcomeMessage.arguments.length;
|
||||
if(numArgs > 1) {
|
||||
for(var i = 1; i < numArgs; i++) {
|
||||
document.writeln("\""+welcomeMessage.arguments[i]+"\"");
|
||||
}
|
||||
}
|
||||
}
|
||||
// -->
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
var userName = "Jhon", extraMsg = "It has been a long time!";
|
||||
var userName2 = null;
|
||||
var extraMsg1 = "Why dont you come here?";
|
||||
var extraMsg2 = "You can enjoy!";
|
||||
welcomeMessage(userName, extraMsg);
|
||||
document.writeln("<hr>"); welcomeMessage(userName2, extraMsg1, extraMsg2);
|
||||
// -->
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>A function definition - Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript"><!--
|
||||
function displayTaggedText(tag, text) {
|
||||
document.write("<"+tag+">")
|
||||
document.write(text)
|
||||
document.write("</"+tag+">")
|
||||
}
|
||||
// -->
|
||||
</SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<SCRIPT LANGUAGE="JavaScript"><!--
|
||||
displayTaggedText("H1","This is a level 1 heading")
|
||||
displayTaggedText("P","This text is the first paragraph of the document. Happy Codings :-) JavaScript Code Examples")
|
||||
// -->
|
||||
</SCRIPT>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,23 @@
|
||||
<HTML>
|
||||
<HEAD><TITLE> Add three numbers - Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples</TITLE>
|
||||
<SCRIPT>
|
||||
function addThreeNums (inOne, inTwo, inThree) {
|
||||
var inOne = Number(inOne);
|
||||
var inTwo = Number(inTwo);
|
||||
var inThree = Number(inThree);
|
||||
return Number(inOne + inTwo + inThree);
|
||||
}
|
||||
</SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<FORM Name="theForm">
|
||||
<INPUT Type=Text Name="num1">
|
||||
<INPUT Type=Text Name="num2">
|
||||
<INPUT Type=Text Name="num3">
|
||||
<INPUT Type=Button Value="Add Them"
|
||||
onClick='document.write("The sum of the three numbers is " +
|
||||
|
||||
addThreeNums(theForm.num1.value,theForm.num2.value,theForm.num3.value));'>
|
||||
</FORM>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,27 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
function jenny(x,y) {
|
||||
var args = jenny.arguments
|
||||
document.write("<P>jenny.caller is " + jenny.caller + "<BR>")
|
||||
document.write("jenny.arguments.length is " + jenny.arguments.length + "<BR>")
|
||||
for (var i = 0; i < args.length; i++) {
|
||||
document.write("argument " + i + " is " + args[i] + "<BR>")
|
||||
}
|
||||
document.write("</P>")
|
||||
}
|
||||
function gretel(x,y,z) {
|
||||
today = new Date()
|
||||
thisYear = today.getFullYear()
|
||||
jenny(x,y,z,thisYear)
|
||||
}
|
||||
</SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
jenny(1, "two", 3);
|
||||
gretel(4, "five", 6, "seven");
|
||||
</SCRIPT>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,29 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Number Formatting - Happy Codings :-) JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
// generic positive number decimal formatting function
|
||||
function format (expr, decplaces) {
|
||||
var str = "" + Math.round (eval(expr) * Math.pow(10,decplaces))
|
||||
while (str.length <= decplaces) {
|
||||
str = "0" + str
|
||||
}
|
||||
var decpoint = str.length - decplaces
|
||||
return str.substring(0,decpoint) + "." + str.substring(decpoint,str.length);
|
||||
}
|
||||
|
||||
function dollarize (expr) {
|
||||
return "$" + format(expr,2)
|
||||
}
|
||||
</SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Make Money - Happy Codings :-) JavaScript Code Examples</H1>
|
||||
<FORM>
|
||||
Enter a positive floating-point value or arithmetic expression to be converted to a currency format:<P>
|
||||
<INPUT TYPE="text" NAME="entry" VALUE="1/3">
|
||||
<INPUT TYPE="button" VALUE="Dollars and Cents" onClick="this.form.result.value=dollarize(this.form.entry.value)">
|
||||
<INPUT TYPE="text" NAME="result">
|
||||
</FORM>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,36 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Navigation Bar - Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
<!-- start
|
||||
function goNext() {
|
||||
var currOffset = parseInt(parent.currTitle)
|
||||
if (currOffset < 5) {
|
||||
currOffset += 1
|
||||
parent.entryForms.location.href = "dh" + currOffset + ".htm"
|
||||
parent.instructions.location.hash = "help" + currOffset
|
||||
} else {
|
||||
alert("This is the last form.")
|
||||
}
|
||||
}
|
||||
function goPrev() {
|
||||
var currOffset = parseInt(parent.currTitle)
|
||||
if (currOffset > 1) {
|
||||
currOffset -= 1
|
||||
parent.entryForms.location.href = "dh" + currOffset + ".htm"
|
||||
parent.instructions.location.hash = "help" + currOffset
|
||||
} else {
|
||||
alert("This is the first form.")
|
||||
}
|
||||
}
|
||||
// end -->
|
||||
</SCRIPT>
|
||||
</HEAD>
|
||||
<BODY bgColor="white">
|
||||
<MAP NAME="navigation">
|
||||
<AREA SHAPE="RECT" COORDS="25,80,66,116" HREF="javascript:goNext()">
|
||||
<AREA SHAPE="RECT" COORDS="24,125,67,111" HREF="javascript:goPrev()">
|
||||
</MAP>
|
||||
<IMG SRC="http://www.happycodings.com/images/HappyCodings.png" HEIGHT=240 WIDTH=80 BORDER=0 USEMAP="#navigation">
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,55 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Parallel Array Lookup II - Happy Codings :-) JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
// the data
|
||||
var regionalOffices = new Array("New York", "Chicago", "Houston", "Portland")
|
||||
var regionalManagers = new Array("Tedd Blue", "Jack Red", "Jones Honey", "William Zone")
|
||||
var regOfficeQuotas = new Array(300000, 250000, 350000, 225000)
|
||||
// do the lookup into parallel arrays
|
||||
function getData(form) {
|
||||
// make a copy of the text box contents
|
||||
var inputText = form.officeInp.value
|
||||
// loop through all entries of regionalOffices array
|
||||
for (var i = 0; i < regionalOffices.length; i++) {
|
||||
// compare uppercase versions of entered text against one entry
|
||||
// of regionalOffices
|
||||
if (inputText.toUpperCase() == regionalOffices[i].toUpperCase()) {
|
||||
// if they're the same, then break out of the for loop
|
||||
break
|
||||
}
|
||||
}
|
||||
// make sure the i counter hasn't exceeded the max index value
|
||||
if (i < regionalOffices.length) {
|
||||
// display corresponding entries from parallel arrays
|
||||
form.manager.value = regionalManagers[i]
|
||||
form.quota.value = regOfficeQuotas[i]
|
||||
} else { // loop went all the way with no matches
|
||||
// empty any previous values
|
||||
form.manager.value = ""
|
||||
form.quota.value = ""
|
||||
// advise user
|
||||
alert("No match found for " + inputText + ".")
|
||||
}
|
||||
}
|
||||
|
||||
</SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<H1>Parallel Array Lookup II</H1>
|
||||
<HR>
|
||||
<FORM NAME="officeData">
|
||||
<P>
|
||||
Enter a regional office:
|
||||
<INPUT TYPE="text" NAME="officeInp" SIZE=35>
|
||||
<INPUT TYPE="button" VALUE="Search" onClick="getData(this.form)">
|
||||
</P><P>
|
||||
The manager is:
|
||||
<INPUT TYPE="text" NAME="manager" SIZE=35>
|
||||
<BR>
|
||||
The office quota is:
|
||||
<INPUT TYPE="text" NAME="quota" SIZE=8>
|
||||
</P>
|
||||
</FORM>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,22 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Main Document</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
function newWindow() {
|
||||
window.open("http://javascript.happycodings.com/","sub","HEIGHT=240,WIDTH=240")
|
||||
}
|
||||
</SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
</FORM>
|
||||
<INPUT TYPE="button" VALUE="New Window" onClick="newWindow()">
|
||||
<br>
|
||||
Text incoming from subwindow:
|
||||
<p>
|
||||
Happy Codings :-) JavaScript Code Examples
|
||||
<br>
|
||||
</p>
|
||||
<INPUT TYPE="Text" NAME="entry">
|
||||
<FORM>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,27 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Displaying Random Ads - Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript"><!--
|
||||
urls = new Array("http://javascript.happycodings.com/",
|
||||
"http://csharp.happycodings.com/",
|
||||
"http://html-css.happycodings.com/")
|
||||
function insertAd() {
|
||||
adIX = Math.round(Math.random()*(urls.length-1));
|
||||
document.write('<A HREF="'+urls[adIX]+'">');
|
||||
document.writeln('</A>');
|
||||
}
|
||||
// --></SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<SCRIPT LANGUAGE="JavaScript"><!--
|
||||
insertAd();
|
||||
// --></SCRIPT>
|
||||
<H1>Displaying Random Ads</H1>
|
||||
|
||||
<p>
|
||||
Happy Codings :-) JavaScript Code Examples
|
||||
<br>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</HTML>
|
||||
@@ -0,0 +1,17 @@
|
||||
<html>
|
||||
<HEAD>
|
||||
<TITLE>A Document - Happy Codings :-) JavaScript Code Examples</TITLE>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
//script statement(s) here
|
||||
...
|
||||
</SCRIPT>
|
||||
|
||||
<p>
|
||||
Happy Codings :-) JavaScript Code Examples
|
||||
<br>
|
||||
</p>
|
||||
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,16 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>
|
||||
A Simple Page - Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples
|
||||
</TITLE>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<P ID="paragraph1">
|
||||
This is the
|
||||
<EM ID="emphasis1">
|
||||
one and only
|
||||
</EM>
|
||||
paragraph on the page. Happy Codings :-) JavaScript Code Examples
|
||||
</P>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,38 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Parallel Array Lookup - Happy Codings :-) JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
// the data
|
||||
var regionalOffices = new Array("New York", "Chicago", "Houston", "Portland")
|
||||
var regionalManagers = new Array("Jack Hadson", "Jenny Blue", "Jones William", "Jhon Cook")
|
||||
var regOfficeQuotas = new Array(300000, 250000, 350000, 225000)
|
||||
// do the lookup into parallel arrays
|
||||
function getData(form) {
|
||||
var i = form.offices.selectedIndex
|
||||
form.manager.value = regionalManagers[i]
|
||||
form.quota.value = regOfficeQuotas[i]
|
||||
}
|
||||
</SCRIPT>
|
||||
</HEAD>
|
||||
<BODY onLoad="getData(document.officeData)">
|
||||
<H1>Parallel Array Lookup</H1>
|
||||
<HR>
|
||||
<FORM NAME="officeData">
|
||||
<P>
|
||||
Select a regional office:
|
||||
<SELECT NAME="offices" onChange="getData(this.form)">
|
||||
<OPTION>New York
|
||||
<OPTION>Chicago
|
||||
<OPTION>Houston
|
||||
<OPTION>Portland
|
||||
</SELECT>
|
||||
</P><P>
|
||||
The manager is:
|
||||
<INPUT TYPE="text" NAME="manager" SIZE=35>
|
||||
<BR>
|
||||
The office quota is:
|
||||
<INPUT TYPE="text" NAME="quota" SIZE=8>
|
||||
</P>
|
||||
</FORM>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,15 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>String Object Prototype - Happy Codings :-) JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript1.1">
|
||||
function makeItHot() {
|
||||
return "<FONT COLOR='red'>" + this.toString() + "</FONT>"
|
||||
}
|
||||
String.prototype.hot = makeItHot
|
||||
</SCRIPT>
|
||||
<BODY>
|
||||
<SCRIPT LANGUAGE="JavaScript1.1">
|
||||
document.write("<H1>This site is on " + "FIRE".hot() + "!!</H1>")
|
||||
</SCRIPT>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,22 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Timeout Program - Happy Codings :-) JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript"><!--
|
||||
function setTimer() {
|
||||
timer=setTimeout("alert('Too slow!')",10000)
|
||||
}
|
||||
function clearTimer() {
|
||||
clearTimeout(timer)
|
||||
alert("Hi!")
|
||||
}
|
||||
// --></SCRIPT>
|
||||
</HEAD>
|
||||
<BODY>
|
||||
<SCRIPT LANGUAGE="JavaScript"><!--
|
||||
setTimer()
|
||||
// --></SCRIPT>
|
||||
<FORM>
|
||||
<INPUT TYPE="BUTTON" VALUE="Click here within ten seconds." ONCLICK="clearTimer()">
|
||||
</FORM>
|
||||
</BODY>
|
||||
</HTML>
|
||||
@@ -0,0 +1,61 @@
|
||||
<HTML>
|
||||
<HEAD>
|
||||
<TITLE>Keeping track of Web site access - Happy Codings :-) JavaScript Code Examples</TITLE>
|
||||
<SCRIPT LANGUAGE="JavaScript" ><!--
|
||||
function nameDefined(c,n) {
|
||||
var s=removeBlanks(c)
|
||||
var pairs=s.split(";")
|
||||
for(var i=0;i<pairs.length;++i) {
|
||||
var pairSplit=pairs[i].split("=")
|
||||
if(pairSplit[0]==n) return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
function removeBlanks(s) {
|
||||
var temp=""
|
||||
for(var i=0;i<s.length;++i) {
|
||||
var c=s.charAt(i)
|
||||
if(c!=" ") temp += c
|
||||
}
|
||||
return temp
|
||||
}
|
||||
function getCookieValue(c,n) {
|
||||
var s=removeBlanks(c)
|
||||
var pairs=s.split(";")
|
||||
for(var i=0;i<pairs.length;++i) {
|
||||
var pairSplit=pairs[i].split("=")
|
||||
if(pairSplit[0]==n) return pairSplit[1]
|
||||
}
|
||||
return ""
|
||||
}
|
||||
function insertSiteCounter() {
|
||||
readCookie()
|
||||
displayCounter()
|
||||
}
|
||||
function displayCounter() {
|
||||
document.write('<H3 ALIGN="CENTER">')
|
||||
document.write("Welcome! You've accessed this site ")
|
||||
if(counter==1) document.write("for the first time.")
|
||||
else document.write(counter+" times!")
|
||||
document.writeln('</H3>')
|
||||
}
|
||||
function readCookie() {
|
||||
var cookie=document.cookie
|
||||
counter=0
|
||||
if(nameDefined(cookie,"siteCount"))
|
||||
counter=parseInt(getCookieValue(cookie,"siteCount"))
|
||||
++counter
|
||||
var newCookie="siteCount="+counter
|
||||
newCookie += "; expires=Wednesday, 10-Nov-10 23:12:40 GMT"
|
||||
newCookie += "; path=/"
|
||||
window.document.cookie=newCookie
|
||||
}
|
||||
// --></SCRIPT>
|
||||
</HEAD>
|
||||
<BODY BGCOLOR="#FFFFFF">
|
||||
<SCRIPT LANGUAGE="JavaScript"><!--
|
||||
insertSiteCounter()
|
||||
// --></SCRIPT>
|
||||
<H1 ALIGN="CENTER">Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples</H1>
|
||||
</body>
|
||||
</HTML>
|
||||
@@ -0,0 +1,17 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
</head>
|
||||
<body>
|
||||
<H1>
|
||||
<SCRIPT>
|
||||
var counter = 10;
|
||||
while (counter > 0)
|
||||
{
|
||||
document.write (counter + "<br>");
|
||||
counter--;
|
||||
}
|
||||
</SCRIPT>
|
||||
</H1>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
function blankFrame() {
|
||||
return "<html><body></body></html>";
|
||||
}
|
||||
//-->
|
||||
</script>
|
||||
</head>
|
||||
<frameset rows="50, *">
|
||||
<frame name="frame1" id="frame1" src="navSlice.html">
|
||||
<frame name="frame2" id="frame2" src="javascript:parent.blankFrame()">
|
||||
</frameset>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>A Simple Page - Happy Codings :-) JavaScript Code Examples</title>
|
||||
<script language="JavaScript">
|
||||
alert("A carriage return lies right\rin the middle of this line!");
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
</head>
|
||||
|
||||
<body onLoad="show5()">
|
||||
|
||||
<span id="liveclock" style="position:absolute;left:0;top:0;"></span>
|
||||
|
||||
<script language="JavaScript">
|
||||
<!--
|
||||
function show5(){
|
||||
if (!document.layers&&!document.all)
|
||||
return;
|
||||
|
||||
var Digital=new Date();
|
||||
var hours=Digital.getHours();
|
||||
var minutes=Digital.getMinutes();
|
||||
var seconds=Digital.getSeconds();
|
||||
var dn="AM";
|
||||
if (hours>12){
|
||||
dn="PM";
|
||||
hours=hours-12;
|
||||
}
|
||||
if (hours==0)
|
||||
hours=12;
|
||||
if (minutes<=9)
|
||||
minutes="0"+minutes;
|
||||
if (seconds<=9)
|
||||
seconds="0"+seconds;
|
||||
|
||||
myclock="<font size='5' face='Arial' ><b><font size='2'>Happy Codings: </font>"+hours+":"+minutes+":"
|
||||
+seconds+" "+dn+"</b></font>";
|
||||
|
||||
if (document.layers){
|
||||
document.layers.liveclock.document.write(myclock);
|
||||
document.layers.liveclock.document.close();
|
||||
}
|
||||
else if (document.all)
|
||||
liveclock.innerHTML=myclock
|
||||
setTimeout("show5()",1000)
|
||||
}
|
||||
|
||||
//-->
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>A for Loop Used to Count from 0 to 99 - Happy Codings :-) JavaScript Code Examples</title>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
document.write("Numbers 0 through 99:");
|
||||
document.write('<hr size="0" width="50%" align="left">');
|
||||
|
||||
for (var i = 0; i < 100; ++i) {
|
||||
if(i%10 == 0) {
|
||||
document.write('<br>');
|
||||
}
|
||||
document.write(i + ",");
|
||||
}
|
||||
document.write("<br><br>After completing the loop, i equals : " + i);
|
||||
// -->
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script language="javascript">
|
||||
for (i = 0; i <= 5; i++)
|
||||
{
|
||||
document.write("The number is " + i)
|
||||
document.write("<br>")
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,20 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
|
||||
<script type="text/javascript">
|
||||
function total(a,b){
|
||||
return a + b
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.write(total(2,3))
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>A Simple Page - Happy Codings :-) JavaScript Code Examples</title>
|
||||
<script language="JavaScript">
|
||||
function yourMessage()
|
||||
{
|
||||
alert("Your first function!");
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Happy Codings :-) JavaScript Code Examples
|
||||
<br>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
<link rel="StyleSheet" type="text/css"
|
||||
href="js/dojo/dijit/themes/tundra/tundra.css">
|
||||
<script type="text/javascript">
|
||||
var djConfig = {
|
||||
baseScriptUri : "js/dojo/",
|
||||
parseOnLoad : true
|
||||
};
|
||||
</script>
|
||||
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
|
||||
<script>
|
||||
dojo.require("dojo.parser");
|
||||
dojo.require("dijit.form.Button");
|
||||
dojo.require("dijit.Menu");
|
||||
function call_function(choice) {
|
||||
alert(choice);
|
||||
}
|
||||
function save_function() {
|
||||
alert("Save");
|
||||
}
|
||||
function save_as_function(choice) {
|
||||
alert("Save As");
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="tundra">
|
||||
<div dojoType="dijit.form.DropDownButton">
|
||||
<span>Edit</span>
|
||||
<div dojoType="dijit.Menu" id="Edit">
|
||||
<div dojoType="dijit.MenuItem" label="Copy" onclick="call_function('copy');"></div>
|
||||
<div dojoType="dijit.MenuItem" label="Cut" onclick="call_function('cut');"></div>
|
||||
<div dojoType="dijit.MenuItem" label="Paste" onclick="call_function('paste');"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,16 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Concat - Happy Codings :-) JavaScript Code Examples</title>
|
||||
<script type = "text/javascript">
|
||||
|
||||
var aObject = ["A", "B", "C", "D"];
|
||||
|
||||
for (var i = 0; i < aObject.length; i++) {
|
||||
document.write(aObject[i]);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,18 @@
|
||||
<html>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
var nameArray = new Array("Name 1","Name 2","Name 3","Name 4","Name 5","Name 6")
|
||||
|
||||
for (i=0; i<nameArray.length; i++){
|
||||
document.write(nameArray[i] + "<br>")
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>
|
||||
Happy Codings :-) JavaScript Code Examples
|
||||
<br>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
|
||||
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
|
||||
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
|
||||
Ext.onReady(function() {
|
||||
var form = new Ext.form.FormPanel({
|
||||
baseCls: 'x-plain',
|
||||
layout:'absolute',
|
||||
url:'save-form.php',
|
||||
defaultType: 'textfield',
|
||||
|
||||
items: [{
|
||||
x: 0,
|
||||
y: 5,
|
||||
xtype:'label',
|
||||
text: 'Send To:'
|
||||
},{
|
||||
x: 60,
|
||||
y: 0,
|
||||
name: 'to',
|
||||
anchor:'100%' // anchor width by percentage
|
||||
},{
|
||||
x: 0,
|
||||
y: 35,
|
||||
xtype:'label',
|
||||
text: 'Subject:'
|
||||
},{
|
||||
x: 60,
|
||||
y: 30,
|
||||
name: 'subject',
|
||||
anchor: '100%' // anchor width by percentage
|
||||
},{
|
||||
x:0,
|
||||
y: 60,
|
||||
xtype: 'textarea',
|
||||
name: 'msg',
|
||||
anchor: '100% 100%' // anchor width and height
|
||||
}]
|
||||
});
|
||||
|
||||
var window = new Ext.Window({
|
||||
title: 'Resize Me',
|
||||
width: 500,
|
||||
height:300,
|
||||
minWidth: 300,
|
||||
minHeight: 200,
|
||||
layout: 'fit',
|
||||
plain:true,
|
||||
bodyStyle:'padding:5px;',
|
||||
buttonAlign:'center',
|
||||
items: form,
|
||||
|
||||
buttons: [{
|
||||
text: 'Send'
|
||||
},{
|
||||
text: 'Cancel'
|
||||
}]
|
||||
});
|
||||
|
||||
window.show();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<HEAD>
|
||||
|
||||
<SCRIPT LANGUAGE="JavaScript">
|
||||
|
||||
<!-- Begin
|
||||
function checkCheckBox(f){
|
||||
if (f.agree.checked == false )
|
||||
{
|
||||
alert('Please check the box to continue.');
|
||||
return false;
|
||||
}else
|
||||
return true;
|
||||
}
|
||||
// End -->
|
||||
</script>
|
||||
|
||||
</HEAD>
|
||||
|
||||
<BODY>
|
||||
|
||||
<form action="/yourscript.cgi-or-your-page.html" method="POST" onsubmit="return checkCheckBox(this)">
|
||||
I accept: <input type="checkbox" value="0" name="agree">
|
||||
<input type="submit" value="Continue Order">
|
||||
<input type="button" value="Exit" onclick="document.location.href='/index.html';">
|
||||
</form>
|
||||
|
||||
<p><center>
|
||||
<font face="arial, helvetica" size"-2">Happy Codings :-) JavaScript Code Examples<br>
|
||||
by <a href="http://javascript.happycodings.com/">Happy Codings :-) JavaScript Code Examples</a></font>
|
||||
</center><p>
|
||||
@@ -0,0 +1,27 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>JavaScript Unleashed - Happy Codings :-) C++, C#, HTML, Java, JavaScript Code Examples</title>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
function welcomeMessage(userName) {
|
||||
if (userName != null) {
|
||||
document.writeln("Hello, " + userName);
|
||||
}else{
|
||||
document.write("variable \"userName\" would show : ");
|
||||
document.writeln(userName);
|
||||
}
|
||||
}
|
||||
// -->
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
document.writeln("First call to welcomeMessage(),\n");
|
||||
welcomeMessage("Mr.");
|
||||
document.writeln("<HR>\nSecond call to welcomeMessage(),\n");
|
||||
welcomeMessage();
|
||||
// -->
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
<script language="JavaScript">
|
||||
<!--
|
||||
pageFor640 = "pageFor640.html";
|
||||
pageFor800 = "pageFor800.html";
|
||||
pageFor1024 = "pageFor1024.html";
|
||||
pageForLarger = "pageForLarger.html";
|
||||
|
||||
// Set showAlert to "yes" if you wish an alert box to appear
|
||||
// when the visitor hits your referer page; otherwise, set
|
||||
// it to "no"
|
||||
|
||||
showAlert = "yes";
|
||||
|
||||
// This is the message that will be seen if showAlert is
|
||||
// used; alter it as needed.
|
||||
|
||||
sayOnAlert = "Redirecting to a page designed for your screen size...";
|
||||
|
||||
// DO NOT EDIT BELOW THIS LINE.
|
||||
// ----------------------------
|
||||
|
||||
var Wide = screen.width;
|
||||
|
||||
if (Wide <= 640){
|
||||
if (showAlert == "yes"){
|
||||
alert(sayOnAlert);
|
||||
}
|
||||
window.location = pageFor640;
|
||||
}
|
||||
|
||||
else if (Wide <= 800){
|
||||
if (showAlert == "yes"){
|
||||
alert(sayOnAlert);
|
||||
}
|
||||
window.location = pageFor800;
|
||||
}
|
||||
|
||||
else if (Wide <= 1024){
|
||||
if (showAlert == "yes"){
|
||||
alert(sayOnAlert);
|
||||
}
|
||||
window.location = pageFor1024;
|
||||
}
|
||||
|
||||
else {
|
||||
if (showAlert == "yes"){
|
||||
alert(sayOnAlert);
|
||||
}
|
||||
window.location = pageForLarger;
|
||||
}
|
||||
|
||||
//-->
|
||||
</script>
|
||||
@@ -0,0 +1,88 @@
|
||||
When an image is clicked, this script will show the image URL in a textbox. Useful for cases where you want others to be able to copy the image address easily for linking... such as for banners, logo graphics, etc. A single instance of the script can be attached to any number of images in the page.
|
||||
|
||||
---------------------
|
||||
|
||||
Paste the following script into the <head> ... </head> of
|
||||
your page. There are no script set-ups needed.
|
||||
|
||||
|
||||
<script language="JavaScript">
|
||||
|
||||
var isReady = false;
|
||||
|
||||
function showAddress(What){
|
||||
if (isReady){
|
||||
document.Which.Where.value = What;
|
||||
document.Which.Where.focus();
|
||||
document.Which.Where.select();
|
||||
}else{
|
||||
alert("This page is not fully loaded yet...\nPlease wait for the page to finish loading.");
|
||||
}
|
||||
}
|
||||
|
||||
function clearAddress(){
|
||||
if (isReady){
|
||||
document.Which.Where.value = '';
|
||||
}else{
|
||||
alert("This page is not fully loaded yet...\nPlease wait for the page to finish loading.");
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
The Body Tag Onload Event
|
||||
------------------------------------
|
||||
|
||||
Add onload="isReady=true" to your body tag, as shown below.
|
||||
This is necessary to prevent false object calls prior to
|
||||
the page being fully loaded. Thus:
|
||||
|
||||
<body onload="isReady=true">
|
||||
|
||||
The TextBox
|
||||
-------------------------
|
||||
|
||||
Insert the following code for the text box in your page. (It
|
||||
may be anywhere in your page.) Do not change the form or
|
||||
field names.
|
||||
|
||||
|
||||
|
||||
<form name="Which">
|
||||
<input type="text" size="60" name="Where">
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
To clear the textbox from a link in the page, use this:
|
||||
|
||||
|
||||
|
||||
<a href="#" onClick="clearAddress()">
|
||||
Clear
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
Step Four: Attaching To The Images
|
||||
-----------------------------------
|
||||
|
||||
You may attach the script to as many images as you wish. To
|
||||
attach to the image add onMouseDown="showAddress(this.src)"
|
||||
to the img src tag, as shown in the sample below.
|
||||
|
||||
|
||||
|
||||
<img src="http://happycodings.com/image.gif"
|
||||
width="100"
|
||||
height="100"
|
||||
border="0"
|
||||
onMouseDown="showAddress(this.src)">
|
||||
|
||||
|
||||
|
||||
Note that you can use either the explicit http:// address of
|
||||
the image, or just a relative address to the image file.
|
||||
In the later case, it will still return the full http
|
||||
path to the image in the text box.
|
||||
@@ -0,0 +1,36 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form id="Form1" name="Form1">
|
||||
Form1: <input type="text">
|
||||
</form>
|
||||
|
||||
<form id="Form2" name="Form2">
|
||||
Form2: <input type="text">
|
||||
</form>
|
||||
|
||||
<p>
|
||||
You can use the form's number:
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
|
||||
document.write("<p>The first form's name is: ")
|
||||
document.write(document.forms[0].name + "</p>")
|
||||
document.write("<p>The second form's name is: ")
|
||||
document.write(document.forms[1].name + "</p>")
|
||||
|
||||
</script>
|
||||
|
||||
<p><b>Or, the form's name:</b></p>
|
||||
<script type="text/javascript">
|
||||
document.write("<p>The first form's name is: ")
|
||||
document.write(document.getElementById("Form1").name + "</p>")
|
||||
document.write("<p>The second form's name is: ")
|
||||
document.write(document.getElementById("Form2").name + "</p>")
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function(){
|
||||
|
||||
var p = $("p:last");
|
||||
var offset = p.offset();
|
||||
p.html( "left: " + offset.left + ", top: " + offset.top );
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>Hello</p><p>2nd Paragraph</p>
|
||||
|
||||
<p>
|
||||
Happy Codings :-) JavaScript Code Examples
|
||||
<br>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,18 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Happy Codings :-) JavaScript Code Examples</title>
|
||||
<script language="JavaScript">
|
||||
<!--
|
||||
function showResults(obj, name) {
|
||||
document.writeln("<table cellpadding=5 border=1><tr><td align=middle><b><font size=-1>" + name + "</font></b></td></tr>");
|
||||
for (i in obj) {
|
||||
document.writeln("<td><font size=-1>" + i + "</font></td>");
|
||||
document.writeln("</table><p>");
|
||||
}
|
||||
}
|
||||
showResults(document, "document");
|
||||
showResults(window, "window");
|
||||
//-->
|
||||
</script>
|
||||
</head>
|
||||
</html>
|
||||
Reference in New Issue
Block a user