Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Kent, England
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help with onclick to change html wording

    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>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,182
    Thanks
    23
    Thanked 603 Times in 602 Posts
    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.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>

  • Users who have thanked xelawho for this post:

    SiLK (06-25-2012)

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Kent, England
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    uh... did you try the code I posted?

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,182
    Thanks
    23
    Thanked 603 Times in 602 Posts
    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>

  • Users who have thanked sunfighter for this post:

    SiLK (06-25-2012)

  • #7
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Kent, England
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?
    Last edited by SiLK; 06-25-2012 at 03:17 PM.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,182
    Thanks
    23
    Thanked 603 Times in 602 Posts
    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

  • Users who have thanked sunfighter for this post:

    SiLK (06-26-2012)

  • #9
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Kent, England
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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>

  • #10
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Kent, England
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I am please to say that I have managed to get this working correctly now. Thank you for all your help with this.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •