Pulsating Text, DHTML Calculator...

**techno_race** · 03-24-2007, 01:14 AM

1) Script Title: Pulsating Text, DHTML Calculator and an audio player off the forum

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici.../pulsetext.htm (Pulsating Text), http://www.dynamicdrive.com/dynamicindex11/cal.htm (DHTML Calculator), http://www.dynamicdrive.com/forums/s...7433#post77433 (audio player)

3) Describe problem:
I combined these and came up with:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function play(file) {
var plist = document.getElementById("playarea");
plist.innerHTML = '<embed style="visibility: hidden" src="'+file+'">';
}
</script>
<script>
<!--

//Pulsating Text (Chris A e-mail: KilerCris@Mail.com)
//Permission granted to Dynamic Drive to feature script in archive
//For full source and 100's more DHTML scripts, visit http://www.dynamicdrive.com

var divs = new Array();
var da = document.all;
var start;

//CONFIGUER THESE VARS!!!!!!
//speed of pulsing
var speed = 50;

function initVars(){

if (!document.all)
return

//Extend of shrink the below list all you want
//put an "addDiv(1,"2",3,4); for each div you made, 
//1)'id' of div
//2)color or glow(name or hex)(in quotes!!!)
//3)minimum strength
//4)maximum strength


addDiv(message,"yellow",3,8);

//NO MORE EDITING!!!!!!



startGlow();
}

function addDiv(id,color,min,max)
{
var j = divs.length;
divs[j] = new Array(5);
divs[j][0] = id;
divs[j][1] = color;
divs[j][2] = min;
divs[j][3] = max;
divs[j][4] = true;
}

function startGlow()
{
	if (!document.all)
		return 0;

	for(var i=0;i<divs.length;i++)
	{
		divs[i][0].style.filter = "Glow(Color=" + divs[i][1] + ", Strength=" + divs[i][2] + ")";
		divs[i][0].style.width = "100%";
	}

	start = setInterval('update()',speed);
}

function update()
{
	for (var i=0;i<divs.length;i++)
	{
		if (divs[i][4])
		{
			divs[i][0].filters.Glow.Strength++;
			if (divs[i][0].filters.Glow.Strength == divs[i][3])
				divs[i][4] = false;
		}
	
		if (!divs[i][4])
		{
			divs[i][0].filters.Glow.Strength--;
			if (divs[i][0].filters.Glow.Strength == divs[i][2])
				divs[i][4] = true;
		}
	}
}
-->
</script>
<title>Haunted Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#000000" text="#FFFFFF"><table border="2" width="200" cellspacing="0" cellpadding="0" bgcolor="#000000"
style="border-color:black" onClick="previouskey=event.srcElement.innerText">
  <tr>
    <td width="100%" bgcolor="#FFFFFF" id="result"
    style="font:bold 20px Verdana;color:black;text-align='right'">0</td>
  </tr>
  <tr>
    <td width="100%" valign="middle" align="center"><table border="0" width="100%"
    cellspacing="0" cellpadding="0" style="font:bold 20px Verdana;color:white">
      <tr>
        <td width="80%" align="center"><table border="1" width="100%" cellspacing="0"
        cellpadding="0" style="cursor:hand;font:bold 20px Verdana;color:white"
        onMouseover="if (event.srcElement.tagName=='TD')event.srcElement.style.color='yellow'"
        onMouseout="event.srcElement.style.color='white'" onselectStart="return false"
        onClick="calculate()" height="82">
          <tr>
            <td width="25%" align="center" height="17"><div id="message" onclick="play('seven.wav')">7</div></td>
            <td width="25%" align="center" height="17"><div id="message" onclick="play('eight.wav')">8</div></td>
            <td width="25%" align="center" height="17"><div id="message" onclick="play('nine.wav')">9</div></td>
            <td width="25%" align="center" height="17"><div id="message" onclick="play('division.wav')">/</div></td>
          </tr>
          <tr>
            <td width="25%" align="center" height="19"><div id="message" onclick="play('four.wav')">4</div></td>
            <td width="25%" align="center" height="19"><div id="message" onclick="play('five.wav')">5</div></td>
            <td width="25%" align="center" height="19"><div id="message" onclick="play('six.wav')">6</div></td>
            <td width="25%" align="center" height="19"><div id="message" onclick="play('times.wav')">*</div></td>
          </tr>
          <tr>
            <td width="25%" align="center" height="19"><div id="message" onclick="play('one.wav')">1</div></td>
            <td width="25%" align="center" height="19"><div id="message" onclick="play('two.wav')">2</div></td>
            <td width="25%" align="center" height="19"><div id="message" onclick="play('three.wav')">3</div></td>
            <td width="25%" align="center" height="19"><div id="message" onclick="play('minus.wav')">-</div></td>
          </tr>
          <tr>
            <td width="25%" align="center" height="19"><div id="message" onclick="play('zero.wav')">0</div></td>
            <td width="25%" align="center" height="19"
            onClick="pn();previouskey=1;event.cancelBubble=true;play('positive_negative.wav')"><div id="message">+/-</div></td>
            <td width="25%" align="center" height="19"><div id="message" onclick="play('point.wav')">.</div></td>
            <td width="25%" align="center" height="19"><div id="message" onclick="play('plus.wav')">+</div></td>
          </tr>
        </table>
        </td>
        <td width="20%"><div align="left"><table border="1" width="100%" cellspacing="0"
        cellpadding="0">
          <tr>
            <td width="100%" style="cursor:hand;font:bold 20px Verdana;color:white;text-align:center"
            onClick="result.innerText=0;results='';play('clear.wav')"><div id="message">C</div></td>
          </tr>
        </table>
        </div><div align="left"><table border="1" width="100%" cellspacing="0" cellpadding="0"
        height="81">
          <tr>
            <td width="100%" style="cursor:hand;font:bold 32px Verdana;color:white;text-align:center"
            onMouseover="event.srcElement.style.color='yellow'"
            onMouseout="event.srcElement.style.color='white'" onClick="calculateresult();play('equals.wav')"><div id="message">=</div></td>
          </tr>
        </table>
        </div></td>
      </tr>
    </table>
    </td>
  </tr>
</table>


<script language="JavaScript1.2">

/*
DHTML Calculator Script- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

var results=''
var previouskey=''
var re=/(\/|\*|\+|-)/
var re2=/(\/|\*|\+|-){2}$/
var re3=/.+(\/|\*|\+|-).+/
var re4=/\d|\./
var re5=/^[^\/\*\+].+\d$/
var re6=/\./

function calculate(){
if (event.srcElement.tagName=="TD"){
if (event.srcElement.innerText.match(re4)&&previouskey=="=")
results=''
if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}

results+=event.srcElement.innerText
if (results.match(re2))
results=results.substring(0,results.length-2)+results.charAt(results.length-1)

result.innerText=results
}
}

function calculateresult(){
if (!results.match(re5)){
result.innerText="Error!"
return
}
results=eval(results)
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12)
result.innerText=results
}



function pn(){
if (result.innerText.charAt(0)!='-')
result.innerText=results='-'+result.innerText
else if (result.innerText.charAt(0)=='-')
result.innerText=results=result.innerText*(-1)
}

</script>
<div id="playarea"></div>
</body>
</html>

It doesn't work. WHY!!!!???

Audio files (extract to same dir as you make the page):
Attachment 897
Attachment 898
Attachment 899

Thread: Pulsating Text, DHTML Calculator...

Thread Tools

Search Thread

Pulsating Text, DHTML Calculator...

Bookmarks

Bookmarks

Posting Permissions