Two codes [Archive] - CodingForums.com

EmptyCoder

01-29-2009, 01:03 AM

Two codes.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test?</title></head><body bgcolor='green'><h5>Boo!</h5><script>
window.onload - BG change;

function BG change()
{
document.body.style.backgroundColor - 'rgb{' +
Math.floor(Math.random() * 256) + ',' +
Math.floor(Math.random() * 256) + ',' +
Math.floor(Math.random() * 256) + ')' ;
setTimeout ( 'BG change()', 50 ;
}
</script>

</body></html>

Supposed to be flashing different colors.

And a longer code: A custom alert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" http://www.w3.org/TR/REC-html40/loose.dtd>
<html>
<head>
<title> JavaScript Blueprint </title>
<script type="text/javascript">

function ShowModal(mess){
document.getElementById("message").innerHTML = mess;
document.getElementById("modalLayer").style.visibility="visible";
document.getElementById("ConBox").style.visibility="visible";
document.getElementById("cB1").focus();
CenterContent();
}

function HideModal(){
document.getElementById("modalLayer").style.visibility="hidden";
document.getElementById("ConBox").style.visibility="hidden";
}

function CenterContent(){
if( typeof window.innerWidth == 'number' ) {
pageW = window.innerWidth;
pageH = window.innerHeight;
boxW = document.getElementById("ConBox").innerWidth;
boxH = document.getElementById("ConBox").innerHeight;
}
else if(document.documentElement && document.documentElement.clientWidth ) {
pageW = document.documentElement.clientWidth;
pageH = document.documentElement.clientHeight;
boxW = document.getElementById("ConBox").clientWidth;
boxH = document.getElementById("ConBox").clientHeight;
}
else{
pageW = document.body.clientWidth;
pageH = document.body.clientHeight;
boxW = document.getElementById("ConBox").clientWidth;
boxH = document.getElementById("ConBox").clientHeight;
}

document.getElementById("modalLayer").style.height = (pageH - 20) + "px";
placeW = Math.floor((pageW - boxW)/2) + "px";
placeH = Math.floor((pageH - boxH)/2) + "px";
document.getElementById("ConBox").style.left = placeW;
document.getElementById("ConBox").style.top = placeH;
}

</script>
</head>
<body onload="ShowModal('The alert was called with the <em>onload</em> handler! You can call the function anyway you want.');">
<div id="modalLayer" style="position:absolute; top=0;length=0; width:100%; height:100%; z-index:100; visibility:hidden;"> </div>
<div id="ConBox" style="position:absolute; width:400px; background:#E0E0E0; border:2px outset">
<h3 style="text-align:left;background:#C0C0C0">Custom Alert</h3>
<h4 id="message" style="width:90%;margin:auto;"></h4>
<div style="text-align:center">
<form name="conf">
<button name="cB1" style="width:100px" onclick="push='Yes';HideModal()">
Yes</button> 
<button name="cB2"style="width:100px;" onclick="push='No';HideModal()">
No</button> 
<button name="cB3" style="width:100px;" onclick="push='Maybe';HideModal()">
Maybe</button>
</form>
</div>
</div>
<h1>JavaScript Custom Alert Example:<hr/></h1>
</body>
</html>

The first one doesn't work, and the second one won't close. Or re-direct to a link if it's set to.
Can you figure out what's wrong?

rangana

01-29-2009, 02:36 AM

For your first code, there are lots of coding mistakes:

You need to use = to assign and not -.

Function name should not have space on it:

BG change;

function BG change()

You've had typo on your CSS' rgb syntax:

document.body.style.backgroundColor - 'rgb{' +

The rectified version:

window.onload = BG_change;

function BG_change()
{
document.body.style.backgroundColor = 'rgb(' +
Math.floor(Math.random() * 256) + ',' +
Math.floor(Math.random() * 256) + ',' +
Math.floor(Math.random() * 256) + ')' ;
setTimeout ( 'BG_change()', 50) ;
}

For your second code, get fireBug (https://addons.mozilla.org/en-US/firefox/addon/1843)...you'll realize that you are missing the element with cB1 id.

Try to add highlighted:

<button name="cB1" id="cB1" style="width:100px" onclick="push='Yes';HideModal()">

Hope that helps.