• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 80
  • Last Modified:

making buttons stay clicked with javascript

situation:

I have a page with an active iframe.  I need to change the content based on button clicks.  No big deal.  Using CSS to change the active state of the button so the clicked button stays clicked is on option, but once the user clicks into the iframe, the active state goes away.

I have found a javascript snippet that works well for changing a tables row background when a button in that row is click (and alternatively changes the other table rows back to original background color.)  Exactly what I need, only for columns instead of rows.  I am trying to convert this and have it almost working, but it does not change the alternate columns back to their original background color.

My question is specifically about fixing this script so that only the column in which the button is clicked, has the red background while the others change back to their original background.

Thank you

<table width="501" border="1" cellpadding="0" cellspacing="0" id="tablename">
  <tbody>
    <tr>
      <td width="50" height="60	" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
      <td width="50" align="center"><a href="#" >button</a></td>
    </tr>
  </tbody>
</table>
<script type="text/javascript" >

function addBackgroundColorChange(table, backgroundColor) {
	table = table.getElementsByTagName("tbody")[0];
	
	var rows = table.getElementsByTagName("td");
	
	document.write(rows.length);//mine for output
	
	function changeColor(e) {
		if(!e) e = window.event;
		var o = e.target? e.target: e.srcElement;
		
		while(o.tagName && o.tagName.toLowerCase()!="td") o = o.parentNode;
		for(var i=0, n=rows.length; i<n; ++i) {
			if(!rows[i].initialBackgroundColor) rows[i].initialBackgroundColor = rows[i].style.backgroundColor;
			rows[i].style.backgroundColor = rows[i].initialBackgroundColor;
			if(rows[i]==o) rows[i].style.backgroundColor = backgroundColor;
			}
		}
	if(document.addEventListener) table.addEventListener("click", changeColor, false);
	else table.attachEvent("onclick", changeColor);
	}

addBackgroundColorChange(document.getElementById("tablename"), "f00");

</script><iframe id='x' width=500 height=500 >click in iframe should keep active button active</iframe>
 

Open in new window

0
Zipbang
Asked:
Zipbang
1 Solution
 
Rainer JeschorCommented:
Hi,

here we go:
<script type="text/javascript" >
var rows = null;
var highLightColor = "";

function addBackgroundColorChange(table, backgroundColor) {
	table = table.getElementsByTagName("tbody")[0];
	rows = table.getElementsByTagName("td");
	document.write(rows.length);//mine for output
	highLightColor = backgroundColor;
	if (document.addEventListener) 
	{
		table.addEventListener("click", changeColor, false);
	}
	else 
	{
		table.attachEvent("onclick", changeColor);
	}
}
	
function changeColor(e) {
	if (!e) e = window.event;

	var o = e.target ? e.target: e.srcElement;
		
	while (o.tagName && o.tagName.toLowerCase()!="td") 
	{
		o = o.parentNode;
	}
	
	for(var i=0, n=rows.length; i<n; ++i) {
		if (!rows[i].initialBackgroundColor && rows[i].initialBackgroundColor != "") {
			rows[i].initialBackgroundColor = rows[i].style.backgroundColor;
		}
			
		rows[i].style.backgroundColor = rows[i].initialBackgroundColor;
		
		if (rows[i]==o) {
			rows[i].style.backgroundColor = highLightColor;
		}
	}
}

addBackgroundColorChange(document.getElementById("tablename"), "#f00");

</script>

Open in new window


1. I did move the ChangeColor function outside of the main function - you might also keep it as you have it
2. The main changes:
- The color must be a valid code hence instead of "f00" you have to pass "#f00".
- I add a second check to the first IF statement in the for loop:
   && rows[ i ].initialBackgroundColor != ""
  The custom property initialBackgroundColor should only be set if it is not empty

HTH
Rainer
0
 
ZipbangAuthor Commented:
Thanks!  You saved me a ton of time and I appreciate your effort!!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now