w3mentor
Learning web technologies simplified!
 
Home / Archive by tag 'example'

Posts tagged "example"

Adding nodes to DOM using Javascript

<script language="JavaScript"
type="text/JavaScript">
function addItem() {
var list = document.getElementById("list");
var newNode = document.createElement("li");
list.appendChild(newNode);
}
</script>
<ul id="list"><li>Item</li></ul>
<input type="button" onclick="addItem();"
value="Add item" />

Remove nodes from DOM Document using Javascript

<script language="JavaScript"
type="text/JavaScript">
function removeItem() {
var list = document.getElementById("list");
if (list.childNodes.length > 0) {
list.removeChild(list.lastChild);
}
}
</script>
<ol id="list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>
<input type="button" onclick="removeItem();"
value="Remove item" />

Retrieving information from node using Javascript

<script language="JavaScript" type="text/JavaScript">
window.onload = function() {
var s = "";
with (document.getElementById("para")) {
for (var i=0; i<childNodes.length; i++) {
with (childNodes[i]) {
s += nodeName + ": " + nodeValue + " (" + nodeType + ")\n";
}
}
}
window.alert(s);
}
</script>
<p id="para"><em>JavaScript</em> Examples</p>

Accessing elements by tag name using Javascript

<script language="JavaScript"
type="text/JavaScript">
window.onload = function() {
window.alert(
document.getElementsByTagName("p") +
" (" + document.getElementsByTagName("p").length
+ " elements)");
}
</script>
<p>JavaScript Examples</p>
<p>W3mentor</p>

Access an element by its ID using Javascript

<script language="JavaScript"
type="text/JavaScript">
window.onload = function() {
window.alert(document.getElementById("para"));
}
</script>
<p id="para">JavaScript Examples</p>

Changing the cursor using Javascript & CSS

<script language="JavaScript"
type="text/JavaScript">
window.onload = function() {
document.getElementById("helpButton").style.cursor = "help";
};
</script>
<input type="submit" id="helpButton" value="Get help" />

Setting the display mode of an element using Javascript & CSS

<script language="JavaScript"
type="text/JavaScript">
function showHide(show, hide) {
document.getElementById(show).style.display = "block";
document.getElementById(hide).style.display = "none";
}
</script>
<p id="tab1">
Tab 1
</p>
<p id="tab2" style="display: none;">
Tab 2
</p>
<input type="button" value="Tab 1" onclick="showHide('tab1', 'tab2');" />
<input type="button" value="Tab 2" onclick="showHide('tab2', 'tab1');" />

Setting the visibility of an element using Javascript and CSS

<script language="JavaScript"
type="text/JavaScript">
function showHide(show, hide) {
document.getElementById(show).style.visibility = "visible";
document.getElementById(hide).style.visibility = "hidden";
}
</script>
<p>&nbsp;<br />&nbsp;</p>
<p id="tab1" style="position: absolute; top: 5px; left: 5px;">
Tab 1
</p>
<p id="tab2" style="position: absolute; top: 5px; left: 5px; visibility: hidden;">
Tab 2
</p>
<input type="button" value="Tab 1" onclick="showHide('tab1', 'tab2');" />
<input type="button" value="Tab 2" onclick="showHide('tab2', 'tab1');" />

Generate a random color in RGB using Javascript

function randomColor() {
var chars = "0123456789abcdef";
var color = "#";
for (var i=0; i<6; i++) {
var rnd = Math.floor(16 * Math.random());
color += chars.charAt(rnd);
}
return color;
}

Accessing stylesheets Individually on a page using Javascript

<script language="JavaScript"
type="text/JavaScript">
function makeBold() {
document.styleSheets[0].disabled = false;
document.styleSheets[1].disabled = true;
window.setTimeout("makeLighter();", 1000);
}
function makeLighter() {
document.styleSheets[0].disabled = true;
document.styleSheets[1].disabled = false;
window.setTimeout("makeBold();", 1000);
}
window.onload = makeBold;
</script>
<style type="text/css" id="strong">
p { font-weight: bold; }
</style>
<style type="text/css" id="weak">
p { font-weight: lighter; }
</style>
<p>CSS and JavaScript</p>

Modify CSS class using Javascript

<script language="JavaScript"
type="text/JavaScript">
function makeBold() {
document.getElementById("para").className ="strong";
window.setTimeout("makeLighter();", 1000);
}
function makeLighter() {
document.getElementById("para").className ="weak";
window.setTimeout("makeBold();", 1000);
}
window.onload = makeBold;
</script>
<style type="text/css">
.strong { font-weight: bold; }
.weak { font-weight: lighter; }
</style>
<p id="para">CSS and JavaScript</p>

Access to CSS using Javascript

document.getElementById("para").style.fontWeight ="strong";

Show loading progress percentage of progress bar in Javascript

<script language="JavaScript" type="text/JavaScript">
function showprogress() {
if (document.images.length == 0) {
return false;
}
var loaded = 0;
for (var i=0; i<document.images.length; i++) {
if (document.images[i].complete) {
loaded++;
}
}
var percentage = Math.round(
100 * loaded / document.images.length);
document.getElementById("progress").innerHTML =
percentage + "% loaded";
if (percentage == 100) {
window.clearInterval(ID);
}
}
var ID = window.setInterval("showprogress();", 500);
</script>
<p name="progress">0% loaded</p>

A progress bar animated in Javascript

<script language="JavaScript"
type="text/JavaScript">
function progress() {
if (document.images["bar"].width < 200) {
document.images["bar"].width += 5;
document.images["bar"].height = 5;
} else {
clearInterval(ID);
}
}
var ID;
window.onload = function() {
ID = setInterval("progress();", 500);
}
</script>
<img src="black.gif" name="bar" />

The black.gif can be a 1×1 black pixel.

Animation images using Javascript

<script language="JavaScript" type="text/JavaScript">
var urls;
function animate(pos) {
pos %= urls.length;
document.images["animation"].src = urls[pos];
window.setTimeout("animate(" + (pos + 1) + ");", 500);
}
window.onload = function() {
urls = new Array(
"0.png", "1.png", "2.png", "3.png",
"4.png", "5.png", "6.png");
animate(0);
}
</script>
<img src="0.png" name="animation" />

Preloading multiple images in Javascript

<script language="JavaScript"
type="text/JavaScript">
function preloadImages(urls) {
var img = new Array();
for (var i=0; i<urls.length; i++) {
img[img.length] = new Image();
img[img.length - 1].src = urls[i];
}
}
window.onload = function() {
var img = new Array(
"active.gif", "inactive.gif", "other.gif");
preloadImages(img);
}
</script>

Preload images using Javascript

<script language="JavaScript"
type="text/JavaScript">
function preloadImage(url) {
var i = new Image();
i.src = url;
}
</script>
<body onload="preloadImage('active.gif');">
</body>

Change images on mouse over and mouse out in Javascript

<script language="JavaScript"
type="text/JavaScript">
function changeImage(name, url) {
if (document.images[name]) {
document.images[name].src = url;
}
}
</script>
<img
name="myImage"
src="inactive.gif"
onmouseover="changeImage('myImage', 'active.gif');"
onmouseout="changeImage('myImage', 'inactive.gif');"
/>

Create mouse sensitive buttons in Javascript

<img src="inactive.gif"
onmouseover="this.src='active.gif';"
onmouseover="this.src='inactive.gif';" />

Request user data using Javascript prompt

<script language="JavaScript"
type="text/JavaScript">
var name =
window.prompt("Enter your name!", "<Your name>");
if (name != null) {
window.alert("Hello, " + name + "!");
}
</script>

Latest Tutorials & Code Snippets

Reference Guides

—