Help with onclick to change html wording

SiLK · 06-21-2012, 03:52 PM

Hello,

I will post my workings so far below. I basically need to have different text display depending on the colour that is displayed. For example:

If the box is Green for System1 it would say "System1" on the first line and "Online" on the second line.

If the box is Yellow for System1 it would say "System1" on the first line and "Problems" on the second line.

Depending on the System will depend on how many different text versions are needed.

Is this the right direction or should I look into using images instead?

Thanks in advance....

Code:

<html>

<head>

<title>System Status Monitor</title>

<style type="text/css">
body{margin:10px 0px;text-align:center;background: #efefef;font-size: 15px;padding: 20px 0 40px;}
li{list-style:none;display:inline;float:left;width:30%;margin:10px;text-align:center;border:1px solid black;height:350px;cursor:pointer;}
a{text-decoration:none;color:#000;}
.grid_1 p{margin-top:25%;font-family:"Arial",sans-serif;font-size:3em !important;font-weight:bolder;}
#container{width:90%;margin:auto;text-align:center;}
.red{background-color:red;color:white;}
.amber{background-color:#FCB514;}
.green{background-color:#31F20F;}
.purple{background-color:#8467D7;color:black;}
h2{padding: 20px 0 0;font-family: "Arial", sans-serif;font-weight: normal;text-align: center;font-size:2.5em;clear:both;}
h1{font-family: "Arial", sans-serif;font-weight: normal;text-align: center;font size: 50px}
</style>

<script type="text/javascript" src="F:\IDOM\System Status Traffic Lights\jquery.js"></script> 
<script type="text/javascript">
function changeColor(e){$("#update").text(Date('year, month, day, hours, minutes, seconds, milliseconds'));if (e.className == 'green')e.className = 

'amber';else if (e.className == 'amber')e.className = 'red';else if (e.className == 'red')e.className = 'purple';else if (e.className == 'purple')e.className 

= 'green'}
function changeColor1(e){$("#update").text(Date('year, month, day, hours, minutes, seconds, milliseconds'));if (e.className == 'green')e.className = 

'purple';else e.className = 'green';}

</script>

</head>

<body>
<h1>SYSTEM STATUS: OK</h1>
<div><h2>Last updated: <span id="update">Awaiting Update</span></h2></div>
</div>
<div id="container">

<ul>
	<li class="green" onClick="changeColor(this)">
		<div class="grid_1" id="ifm"><p>System1</p></div>
	</li>
	<li class="green" onClick="changeColor(this)">
		<div class="grid_1" id="atm"><p>System2</p></div>
	</li>
	<li class="green" onClick="changeColor(this)">
		<div class="grid_1" id="BM+"><p>System3</p></div>
	</li>
	<li class="green" onClick="changeColor1(this)">
		<div class="grid_1" id="fp"><p>System4</p></div>
	</li>
	<li class="green" onClick="changeColor(this)">
		<div class="grid_1" id="system"><p>System5</p></div>
	</li>
	<li class="green" onClick="changeColor(this)">
		<div class="grid_1" id="thin"><p>System6</p></div>
	</li>
</ul>

</body>
</html>

sunfighter · 06-22-2012, 03:43 PM

Your code works once I call jquery by adding this
<script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>

I don't know what
<script type="text/javascript" src="F:\IDOM\System Status Traffic Lights\jquery.js"></script> does it might call jquery but I don't know.

Yes, you are on the right track.

xelawho · 06-22-2012, 04:24 PM

but if you are going to use jQuery you may as well use jQuery (although once again, in this case, there is no need to use jQuery)...

Code:

<body>
<h1>SYSTEM STATUS: OK</h1>
<div><h2>Last updated: <span id="update">Awaiting Update</span></h2></div>
</div>
<div id="container">

<ul>
	<li class='green'>
		<div class="grid_1" id="ifm"><p>System1</p></div>
	</li>
	<li class='green'>
		<div class="grid_1" id="atm"><p>System2</p></div>
	</li>
	<li class='green'>
		<div class="grid_1" id="BM+"><p>System3</p></div>
	</li>
	<li class='green'>
		<div class="grid_1" id="fp"><p>System4</p></div>
	</li>
	<li class='green'>
		<div class="grid_1" id="system"><p>System5</p></div>
	</li>
	<li class='green'>
		<div class="grid_1" id="thin"><p>System6</p></div>
	</li>
</ul>

<script type="text/javascript">
$('.green').click(function (){
$("#update").text(Date('year, month, day, hours, minutes, seconds, milliseconds'));
var cols=[["green","Online"],["red","alert"],["purple","normal"], ["amber","Problems"]]
var thediv=$(this);
var num;
$.each(cols, function(idx) { 
  if (thediv.hasClass(cols[idx][0])){
  num=idx==(cols.length-1)?0:idx+1;
  } 
  });
$(this).attr('class',cols[num][0]);
var ele=$(this).find('p');
ele.html(ele.html().replace(/(.*?\d+).*/i,"$1<br>"+cols[num][1]))
});

</script>
</body>

SiLK · 06-23-2012, 08:23 AM

Sorry yes I am using JQuery.

The path you mentioned is the location of the JQuery.

The code works at the moment but I can't get my head round how I add the different text to the different colours with out using images?

xelawho · 06-23-2012, 01:52 PM

uh... did you try the code I posted?

sunfighter · 06-23-2012, 02:42 PM

xelawho gave you a solution in complete jquery. Here's mine, it's just a modification of yours. I now pass two var into the changeColor function and changed the div IDs.
Also I moved javascript and a </div> tag to the end of the html, I colored the </div>:

Code:

<html>

<head>

<title>System Status Monitor</title>
<script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
body{margin:10px 0px;text-align:center;background: #efefef;font-size: 15px;padding: 20px 0 40px;}
li{list-style:none;display:inline;float:left;width:30%;margin:10px;text-align:center;border:1px solid black;height:350px;cursor:pointer;}
a{text-decoration:none;color:#000;}
.grid_1 p{margin-top:25%;font-family:"Arial",sans-serif;font-size:3em !important;font-weight:bolder;}
#container{width:90%;margin:auto;text-align:center;}
.red{background-color:red;color:white;}
.amber{background-color:#FCB514;}
.green{background-color:#31F20F;}
.purple{background-color:#8467D7;color:black;}
h2{padding: 20px 0 0;font-family: "Arial", sans-serif;font-weight: normal;text-align: center;font-size:2.5em;clear:both;}
h1{font-family: "Arial", sans-serif;font-weight: normal;text-align: center;font size: 50px}
</style>

<script type="text/javascript" src="F:\IDOM\System Status Traffic Lights\jquery.js"></script>


</head>

<body>
<h1>SYSTEM STATUS: OK</h1>
<div><h2>Last updated: <span id="update">Awaiting Update</span></h2></div>

<div id="container">

<ul>
	<li class="green" onClick="changeColor(this,1)">
		<div class="grid_1" id="s1"><p>System1</p></div>
	</li>
	<li class="green" onClick="changeColor(this,2)">
		<div class="grid_1" id="s2"><p>System2</p></div>
	</li>
	<li class="green" onClick="changeColor(this,3)">
		<div class="grid_1" id="s3"><p>System3</p></div>
	</li>
	<li class="green" onClick="changeColor1(this)">
		<div class="grid_1" id="s4"><p>System4</p></div>
	</li>
	<li class="green" onClick="changeColor(this,5)">
		<div class="grid_1" id="s5"><p>System5</p></div>
	</li>
	<li class="green" onClick="changeColor(this,6)">
		<div class="grid_1" id="s6"><p>System6</p></div>
	</li>
</ul>
</div>
</body>
<script type="text/javascript">

function changeColor(e,num)
{
	$("#update").text(Date('year, month, day, hours, minutes, seconds, milliseconds'));
	if (e.className == 'green')
	{
		e.className = 'amber';
		$('div#s'+num).html('<p>System'+num+'<br />Problems</p>');
	}

	else if (e.className == 'amber')
	{
		e.className = 'red';
		$('div#s'+num).html('<p>System'+num+'</p>');
	}

	else if (e.className == 'red') e.className = 'purple';

	else if (e.className == 'purple')
	{
		e.className = 'green';
		$('div#s'+num).html('<p>System'+num+'<br />Online</p>');
	}
}

function changeColor1(e)
{
	$("#update").text(Date('year, month, day, hours, minutes, seconds, milliseconds'));
	if (e.className == 'green')
	{
		e.className = 'purple';
		$('div#s4').html('<p>System4</p>');
	}else{
		e.className = 'green';
		$('div#s4').html('<p>System4<br />Online</p>');
	}
}

</script>
</html>

SiLK · 06-25-2012, 02:54 PM

Thanks for the above two solutions.

The first does not work and I cant see how it would do what I specified.

The second does not work either. However I can see the workings behind it and the code looks like it should change the text correctly. It needs to display in IE7 (Long story but I cant get out of using it).

Is there something missing?

EDIT: Sorry it does work. I was being really dim. Could I ask how the function is referenced into the code? I see that System 4 is (e) and the rest are (e,num). I wish to rename the remaining 5 to have individual names. I guess that I will need to have one of these for each system as the names will be unique but how do they get seperated?

sunfighter · 06-25-2012, 05:24 PM

the e and the e,num are parameters that are sent to the function. For the first box and most others the function is called with onClick="changeColor(this,1)"
so e=this and num=1 and are used in the function. The num is used to set the divs IDs

I don't have IE7. But you should set a DOCTYPE if you want anything to work in IE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
OR
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

which ever works in IE7

SiLK · 06-26-2012, 10:21 AM

Thanks for that. It makes sense now. I have written how I think it should work using all the coments above however If I click on the first box "Mike" it does not change but does change the last box. I have tried a couple of tweaks on the e section for each function but non of them have worked.

Thanks

Code:

<html>

<head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<title>System Status Monitor</title>
<script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
body{margin:10px 0px;text-align:center;background: #efefef;font-size: 15px;padding: 20px 0 40px;}
li{list-style:none;display:inline;float:left;width:30%;margin:10px;text-align:center;border:1px solid black;height:350px;cursor:pointer;}
a{text-decoration:none;color:#000;}
.grid_1 p{margin-top:25%;font-family:"Arial",sans-serif;font-size:3em !important;font-weight:bolder;}
#container{width:90%;margin:auto;text-align:center;}
.red{background-color:red;color:white;}
.amber{background-color:#FCB514;}
.green{background-color:#31F20F;}
.purple{background-color:#8467D7;color:black;}
h2{padding: 20px 0 0;font-family: "Arial", sans-serif;font-weight: normal;text-align: center;font-size:2.5em;clear:both;}
h1{font-family: "Arial", sans-serif;font-weight: normal;text-align: center;font size: 50px}
</style>

<script type="text/javascript" src="F:\IDOM\System Status Traffic Lights\jquery.js"></script>


</head>

<body>
<h1>SYSTEM STATUS: OK</h1>
<div><h2>Last updated: <span id="update">Awaiting Update</span></h2></div>

<div id="container">

<ul>
	<li class="green" onClick="changeColor(this,1)">
		<div class="grid_1" id="s1"><p>Mike<br />Online</p></div>
	</li>
	<li class="green" onClick="changeColor(this,2)">
		<div class="grid_1" id="s2"><p>Bob<br />Online</p></div>
	</li>
	<li class="green" onClick="changeColor(this,3)">
		<div class="grid_1" id="s3"><p>Ned<br />Online</p></div>
	</li>
	<li class="green" onClick="changeColor1(this)">
		<div class="grid_1" id="s4"><p>Hank<br />Not Running</p></div>
	</li>
	<li class="green" onClick="changeColor(this,5)">
		<div class="grid_1" id="s5"><p>Eric<br />Online</p></div>
	</li>
	<li class="green" onClick="changeColor(this,6)">
		<div class="grid_1" id="s6"><p>Seb<br />Online</p></div>
	</li>
</ul>
</div>
</body>
<script type="text/javascript">

function changeColor(e,num)
{
	$("#update").text(Date('year, month, day, hours, minutes, seconds, milliseconds'));
	if (e.className == 'green')
	{
		e.className = 'amber';
		$('div#s1').html('<p>Mike<br />Problems</p>');
	}

	else if (e.className == 'amber')
	{
		e.className = 'red';
		$('div#s1').html('<p>Mike<br />Unavailable</p>');
	}

	else if (e.className == 'red') e.className = 'purple';

	else if (e.className == 'purple')
	{
		e.className = 'green';
		$('div#s1').html('<p>Mike<br />Online</p>');
	}
}


function changeColor(e,num)
{
	$("#update").text(Date('year, month, day, hours, minutes, seconds, milliseconds'));
	if (e.className == 'green')
	{
		e.className = 'amber';
		$('div#s2').html('<p>Bob<br />Problems</p>');
	}

	else if (e.className == 'amber')
	{
		e.className = 'red';
		$('div#s2').html('<p>Bob<br />Unavailable</p>');
	}

	else if (e.className == 'red') e.className = 'purple';

	else if (e.className == 'purple')
	{
		e.className = 'green';
		$('div#s2').html('<p>Bob<br />Online</p>');
	}
}

function changeColor(e,num)
{
	$("#update").text(Date('year, month, day, hours, minutes, seconds, milliseconds'));
	if (e.className == 'green')
	{
		e.className = 'amber';
		$('div#s3').html('<p>Ned<br />Problems</p>');
	}

	else if (e.className == 'amber')
	{
		e.className = 'red';
		$('div#s3').html('<p>Ned<br />Unavailable</p>');
	}

	else if (e.className == 'red') e.className = 'purple';

	else if (e.className == 'purple')
	{
		e.className = 'green';
		$('div#s3').html('<p>Ned<br />Online</p>');
	}
}

function changeColor1(e)
{
	$("#update").text(Date('year, month, day, hours, minutes, seconds, milliseconds'));
	if (e.className == 'green')
	{
		e.className = 'purple';
		$('div#s4').html('<p>Hank<br />Running</p>');
	}else{
		e.className = 'green';
		$('div#s4').html('<p>Hank<br />Not Running</p>');
	}
}

function changeColor(e,num)
{
	$("#update").text(Date('year, month, day, hours, minutes, seconds, milliseconds'));
	if (e.className == 'green')
	{
		e.className = 'amber';
		$('div#s5').html('<p>Eric<br />Problems</p>');
	}

	else if (e.className == 'amber')
	{
		e.className = 'red';
		$('div#s5').html('<p>Eric<br />Unavailable</p>');
	}

	else if (e.className == 'red') e.className = 'purple';

	else if (e.className == 'purple')
	{
		e.className = 'green';
		$('div#s5').html('<p>Eric<br />Online</p>');
	}
}

function changeColor(e,num)
{
	$("#update").text(Date('year, month, day, hours, minutes, seconds, milliseconds'));
	if (e.className == 'green')
	{
		e.className = 'amber';
		$('div#s6').html('<p>Seb<br />Problems</p>');
	}

	else if (e.className == 'amber')
	{
		e.className = 'red';
		$('div#s6').html('<p>Seb<br />Unavailable</p>');
	}

	else if (e.className == 'red') e.className = 'purple';

	else if (e.className == 'purple')
	{
		e.className = 'green';
		$('div#s6').html('<p>Seb<br />Online</p>');
	}
}


</script>
</html>

SiLK · 06-26-2012, 12:56 PM

I am please to say that I have managed to get this working correctly now. Thank you for all your help with this.