...

View Full Version : changing display property of a class of objects



kencl
10-27-2006, 09:05 PM
Hi Folks,

I could use a hand changing the display property of a group of objects based on classname. What I have here doesn't work; perhaps you can see why? I think the basic problem is that I don't know how to access the objects properly...


<script Language="JavaScript">
<!--
function View(className) {
// alert ('Viewing: ' + className);
eval('.edit_' + className + '.style.display = "none";');
eval('.view_' + className + '.style.display = "";');
}

function Edit(className) {
// alert ('Editing: ' + className);
eval('.view_' + className + '.style.display = "none";');
eval('.edit_' + className + '.style.display = "";');
}
// -->
</script>

<table>
<tr>
<td colspan="2"><u><b><font face="Verdana" size="2" color="#000080">Club Member</font></b></u> &nbsp;
<span class="edit_clubmember"><a href="javascript:View('club_member')">view</a></span>
<span class="view_clubmember"><a href="javascript:Edit('club_member')">edit</a></span></td>
</tr>
<tr>
<td align="right"><font face="Verdana" size="2" color="#000080">First Name:</font></td>
<td>
<span class="view_club_member"><b><font face="Verdana" size="2" color="#000080">%%fname_html%%</font></b></span>
<span class="edit_club_member"><input type="text" name="fname" value="%%fname_form%%" size="20"></span>
</td>
</tr>
<tr>
<td align="right"><font face="Verdana" size="2" color="#000080">Last Name:</font></td>
<td>
<span class="view_club_member"><b><font face="Verdana" size="2" color="#000080">%%lname_html%%</font></b></span>
<span class="edit_club_member"><input type="text" name="lname" value="%%lname_form%%" size="20"></span>
</td>
</tr>
</table>

Any thoughts, suggestions are appreciated.

ruggeddesign
10-27-2006, 09:54 PM
Well, I'm not sure exactly what you were intending with your original code. But you could do this:



// grabs an array of all elements on the page
var allElements = document.getElementsByTagName('*');
// cycles through each element
for(var i=0; i < allElements.length; i++)
{
// assigns element to currentElement variable
var currentElement = allElements[i];
// finds the className of the currentElement
var currentElementClass = currentElement.getAttribute('className');
// replace the CAPITALIZED text with your trigger class name
if(currentElementClass=="WHATEVER YOU'RE LOOKING FOR")
{
// Hides Span if Condition is met
currentElement.style.display="none";
}
else
{
// Shows Span if Condition is not met
currentElement.style.display="inline";
}
}

kencl
10-27-2006, 10:05 PM
Thanks rugged.

The idea behind the code is simply to show either the current value as plain HTML OR a form text input. The effect should be cool. The user clicks "edit" then all the editable fields transform into form inputs in the same position.

I guess I was assuming that the properties of all objects in a named class could be changed simultaneously rather than looping over individual objects. You're solution looks promising though. I'll have to try it out.

Take care.

kencl
10-28-2006, 03:14 AM
Here's what I came up with. Figured I'd post it for the benefit of others.



<html><head>

<script Language="JavaScript" type="text/javascript">
<!--
var allElements = new Array(1);
function Initialize() {
allElements = document.getElementsByTagName('*');
}

function ShowHide(show_classname, hide_classname) {
for(var i=0; i < allElements.length; i++) {
var currentElement = allElements[i];
var currentElementClass = currentElement.className;

if(currentElementClass == show_classname) {
currentElement.style.display="inline";
} else if (currentElementClass == hide_classname) {
currentElement.style.display="none";
}
}

}
// -->
</script>
</head>

<body onLoad="Initialize()">

<table border="0">
<tr>
<td colspan="2"><u><b><font face="Verdana" size="2" color="#000080">Club Member</font></b></u> &nbsp;
<span class="edit_club_member" style="display:none"><a href="javascript:ShowHide('view_club_member', 'edit_club_member')">view</a></span>
<span class="view_club_member"><a href="javascript:ShowHide('edit_club_member', 'view_club_member')">edit</a></span></td>
</tr>
<tr height="30">
<td align="right"><font face="Verdana" size="2" color="#000080">First Name:</font></td>
<td>
<span class="view_club_member"><b><font face="Verdana" size="2" color="#000080">%%fname_html%%</font></b></span>
<span class="edit_club_member" style="display:none"><input type="text" name="fname" value="%%fname_form%%" size="20"></span>
</td>
</tr>
<tr height="30">
<td align="right"><font face="Verdana" size="2" color="#000080">Last Name:</font></td>
<td>
<span class="view_club_member"><b><font face="Verdana" size="2" color="#000080">%%lname_html%%</font></b></span>
<span class="edit_club_member" style="display:none"><input type="text" name="lname" value="%%lname_form%%" size="20"></span>
</td>
</tr>
</table>

</body>


Quite a cool effect IMHO :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum