onclick="document.getElementById('changeDefault').style = 'visible'" not working

canadianjameson · 06-09-2005, 02:38 PM

hey. this not a pretty script right now but in this moment it doesnt matter. I'm trying to unhide a <div id="changeDefault> and then rehide it after, but the unhiding won't work, i keep getting a "member not found" js error. any ideas?

(also if anyone wants to take a shot at helping with the actual JS script i'm trying to write in there, by all means)

thanks

Code:

	<style type="text/css">
	.white {
	background-color: #fff }
	.blue {
	background-color: #ccf }
	.red {
	background-color: #fcc }
	.green {
	background-color: #cfc }
	.yellow {
	background-color: #ffc }
	</style>

<script language="JavaScript">
var chosenColor = saveClass(this.class)

function applyClass() {
	document.getElementById('this.id').class = "+chosenColor+"
}
function finalChoices() {
	usersDefaults = new array[]
	// save every newly made choice into this array, and this is what gets saved and used by the PHP tbale to determine what shows as what
}
</script>

<body>

<div align="left"><a href="#" onClick="document.getElementById('changeDefault').style = 'visible'; return false">Change the default state</a>
</div>
<div id="changeDefault" style="visibility: hidden" align="center">
  <table id="applyColor" border="1" cellpadding="0" cellspacing="0">
    <tr>
	<td onclick='applyClass()' align="center" id="work">&nbsp;At Work&nbsp;</td>
	<td onclick='applyClass()' align="center" id="class">&nbsp;In Class&nbsp;</td>
	<td onclick='applyClass()' align="center" id="defAvail">&nbsp;Definitely Availiable&nbsp;</td>
	<td onclick='applyClass()' align="center" id="posAvail">&nbsp;Possibly Availiable&nbsp;</td>
	<td onclick='applyClass()' align="center" id="sleeping">&nbsp;Sleeping&nbsp;</td>
    </tr>
  </table>
  <br>
    <table id="selectColor" border="1" cellpadding="0" cellspacing="0">
    <tr>
	<td width="20" onclick='saveClass(this.class)' align="center" class="white">&nbsp;</td>
	<td width="20" onclick='saveClass(this.class)' align="center" class="blue">&nbsp;</td>
	<td width="20" onclick='saveClass(this.class)' align="center" class="green">&nbsp;</td>
	<td width="20" onclick='saveClass(this.class)' align="center" class="red">&nbsp;</td>
	<td width="20" onclick='saveClass(this.class)' align="center" class="yellow">&nbsp;</td>
    </tr>
  </table>
  <br>
 <div align="center">
 <input type="button" value="Save" onClick="usersDefault(); document.getElementById('changeDefault').style = 'hidden'" id="userDefaultButton">
 </div>
</div>

What i'm really trying to achieve is to have users click once on the table below, and then click in a cell above and have it apply the class of the table they first clicked to the cell of the second. once they apply the class to one cell they have to select another color to apply it to another cell

Bill Posters · 06-09-2005, 04:11 PM

Code:

document.getElementById('changeDefault').style.visibility = 'visible'

coothead · 06-09-2005, 06:17 PM

Hi there canadianjameson,

try this...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224">
<html>
<head>
<title>canadian stuff</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
.white {
     background-color: #fff; 
 }
.blue {
     background-color: #ccf; 
 }
.red {
     background-color: #fcc;
 }
.green {
     background-color: #cfc; 
 }
.yellow {
     background-color: #ffc; 
 }
#show {
     text-decoration:underline;
     cursor:pointer;
 }
#changeDefault {
     display: none;
 }
#applyColor {
     border:1px solid #999;
     margin:4px;
 }
#applyColor td{
     border:1px solid #666;
     padding:4px;
     text-align:center;
 }
#selectColor {
     border-collapse:collapse;
     margin:4px;
 }
#selectColor td {
     width:20px;
     height:20px;
     border:1px solid #999;
 }
//-->
</style>

<script type="text/javascript">
<!--
  var chosenColor=null;

function saveClass(color,number) {
  chosenColor=color;
  num=number;
 }

function applyClass(el,num) {
if(chosenColor==null) {
return;
 }
     el.className=chosenColor;
     document.forms[0][num].value=el.id+" , "+chosenColor;

	/* save every newly made choice into hidden inputs, 
                  and this is what gets saved and used by the 
                  PHP table to determine what shows as what*/
}

function hideShow() {
if(document.getElementById("changeDefault").style.display=="block") {
     document.getElementById("changeDefault").style.display="none";
 }
else {
     document.getElementById("changeDefault").style.display="block";
  }
 }
//-->
</script>

</head>
<body>


<div id="show" onclick="hideShow()">Change the default state</div>


<div id="changeDefault">

<table id="applyColor"><tr>
<td  id="work" onclick="applyClass(this,0)">At Work</td>
<td id="class" onclick="applyClass(this,1)">In Class</td>
<td id="defAvail" onclick="applyClass(this,2)">Definitely Availiable</td>
<td id="posAvail" onclick="applyClass(this,3)">Possibly Availiable</td>
<td id="sleeping" onclick="applyClass(this,4)">Sleeping</td>
</tr></table>

<table id="selectColor"><tr>
<td class="white" onclick="saveClass('white')"></td>
<td class="blue" onclick="saveClass('blue')"></td>
<td class="green"onclick="saveClass('green')"></td>
<td class="red" onclick="saveClass('red')"></td>
<td class="yellow" onclick="saveClass('yellow')"></td>
</tr></table>

<form action="#">
<div>
<input type="text" name="work">
<input type="text" name="class">
<input type="text" name="defAvail">
<input type="text" name="posAvail">
<input type="text" name="sleeping">
<input type="submit" value="Save" onclick="hideShow()">
</div>
</form>

</div>

</body>
</html>

...the inputs...type="text", of course, would be changed to type="hidden"

coothead

canadianjameson · 06-09-2005, 09:19 PM

awesome cooter! thats exactly what I had in mind.

I need to make a few minor changes, and then it will be exactly how I need it.

Okay, here's how this is going to be used.

Before the user even clicks the link to unhide the tables, default colors/classes for each state (sleeping, etc) will already be set.
When the user opens the link, its to change the default colors
The first change is that there can only be one of each color on the table... so if for example they want to switch Red and Green, if they choose the Red from the 2nd table (id="setColor") and click on the green cell on the first table (id="applyColor"). In addition to that, i need the 2nd red square (the one which was loaded as red when the table opened) to turn gray. let me illustrate with a 3 cell example
Code:
```
it opens like this
|  At work  |  In Class  |  Definitely Availiable  |

|  Red  |  Green  |  Blue  |

-----------------------

the user clicks on the Blue and then applies it to the In Class cell.  
This is what I need to happen
|  At work  |  In Class  |  Definitely Availiable  |

|  Red  |  Green  |  Blue  |
```
Because there can only be one of each color, the duplicate color goes to Gray.
Finally, if there are any gray squares on the table when the user hits save, i need a simple msg (either JS alert or unhidden Div) to appear telling them that they must choose a state for (whatever state is unchosen/gray)

would this be hard to acheive?

P.s: also, because these values are being passed to PHP and used... if the user opens the link again later on, the defaults they have just chosen would be displayed in the table. I thought I should mention that now since it may impact how it is coded.

coothead · 06-10-2005, 12:52 PM

Hi there canadianjameson,

try this amended version....

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224">
<html>
<head>

<title>canadian stuff version 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
<!--
.white {
     background-color: #fff; 
 }
.blue {
     background-color: #ccf; 
 }
.red {
     background-color: #fcc;
 }
.green {
     background-color: #cfc; 
 }
.yellow {
     background-color: #ffc; 
 }
.gray {
     background-color: #ccc; 
 }
#show {
     text-decoration:underline;
     cursor:pointer;
 }
#changeDefault {
     display: none;
 }
#applyColor {
     border:1px solid #999;
     margin:4px;
 }
#applyColor td{
     border:1px solid #666;
     padding:4px;
     text-align:center;
 }
#selectColor {
     border-collapse:collapse;
     margin:4px;
 }
#selectColor td {
     width:20px;
     height:20px;
     border:1px solid #999;
 }
//-->
</style>

<script type="text/javascript">
<!--

  var chosenColor=null;

function saveClass(color) {
  chosenColor=color;
 }

function applyClass(el,num) {
if(chosenColor==null) {
    return;
 }
cell=document.getElementById("applyColor").getElementsByTagName("td");
for(i=0;i<cell.length;i++) {
if( chosenColor==cell[i].className) {
     cell[i].className="gray";
  }
 }
     el.className=chosenColor;
     document.forms[0][num].value=el.id+" , "+chosenColor;
 }

function hideShow() {
if(document.getElementById("changeDefault").style.display=="block") {
     document.getElementById("changeDefault").style.display="none";
 }
else {
     document.getElementById("changeDefault").style.display="block";
  }
 }

function greyCheck() {
cell=document.getElementById("applyColor").getElementsByTagName("td");
for(i=0;i<cell.length;i++) {
if( cell[i].className=="gray") {
     alert("---------------------------------------------\n\n"+
              "You have a gray cell or cells.\n\n"+
               "This needs to be changed.\n\n"+
                "The final selection should contain one\n\n"+
                "each of the available colour choice.\n\n"+
                "---------------------------------------------");
    return false;
  }
 }
}
//-->
</script>

</head>
<body>


<div id="show" onclick="hideShow()">Change the default state</div>

<div id="changeDefault">

<table id="applyColor"><tr>
<td  id="work" class="white" onclick="applyClass(this,0)">At Work</td>
<td id="class" class="blue" onclick="applyClass(this,1)">In Class</td>
<td id="defAvail" class="green" onclick="applyClass(this,2)">Definitely Availiable</td>
<td id="posAvail" class="red" onclick="applyClass(this,3)">Possibly Availiable</td>
<td id="sleeping" class="yellow" onclick="applyClass(this,4)">Sleeping</td>
</tr></table>

<table id="selectColor"><tr>
<td class="white" onclick="saveClass('white')"></td>
<td class="blue" onclick="saveClass('blue')"></td>
<td class="green"onclick="saveClass('green')"></td>
<td class="red" onclick="saveClass('red')"></td>
<td class="yellow" onclick="saveClass('yellow')"></td>
</tr></table>

<form action="#" onsubmit="return greyCheck()">
<div>
<input type="text" name="work" value="work , white">
<input type="text" name="class" value="class , blue">
<input type="text" name="defAvail" value="defAvail , green">
<input type="text" name="posAvail" value="posAvail , red">
<input type="text" name="sleeping" value="sleeping , yellow">
<input type="submit" value="Save" >
</div>
</form>

</div>

</body>
</html>

coothead

canadianjameson · 06-10-2005, 02:05 PM

I'm exceedingly impressed! Thank you so much for helping me with this.

If you're interested in where this is going, come have a look at this thread in the PHP forums.

http://www.codingforums.com/showthread.php?t=60017

amazing stuff, thanks for the help

canadianjameson · 06-10-2005, 02:37 PM

quick question.

i added a center to the <div id="changeDefault" align="center"> and i wanted to know. is it possible to easily line up the "Save" button with the left edge of the applyColor table? its just aesthetics but i figured i should ask incase theres a simple way to do it.

here's another purdy visual:

Code:

what I have now is
|  Blah Blah  |  Woof Woof  |  Meow  |
|  colors to choose  |

Save
what i would like is: :o)|  Blah Blah  |  Woof Woof  |  Meow  |
|  colors to choose  |
-Save

if this is difficult to do then forget it, i just thought there might be an easy one-line solution

coothead · 06-10-2005, 03:48 PM

Hi there canadianjameson,

I would not use align="center", but then my preference is for CSS.

This is how I would do it...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224">
<html>
<head>

<title>canadian stuff version 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
<!--
.white {
     background-color: #fff; 
 }
.blue {
     background-color: #ccf; 
 }
.red {
     background-color: #fcc;
 }
.green {
     background-color: #cfc; 
 }
.yellow {
     background-color: #ffc; 
 }
.grey {
     background-color: #ccc; 
 }
#show {
     text-decoration:underline;
     cursor:pointer;
 }
#changeDefault {
     display: none;
 }
#applyColor {
     border:1px solid #999;
     margin:4px auto; 
     
 }
#applyColor td{
     border:1px solid #666;
     padding:4px;
     text-align:center;
 }
#selectColor {
     border-collapse:collapse;
     margin:4px auto; 
 }
#selectColor td {
     width:20px;
     height:20px;
     border:1px solid #999;
 }
#form {
     width:50px;margin:auto;
 }
#submit {
      font-family:verdana,arial,helvetica,sans-serif;
      font-size:14px;
      width:50px;
      margin:4px;
} 
//-->
</style>

<script type="text/javascript">
<!--

  var chosenColor=null;

function saveClass(color) {
  chosenColor=color;
 }

function applyClass(el,num) {
if(chosenColor==null) {
    return;
 }
cell=document.getElementById("applyColor").getElementsByTagName("td");
for(i=0;i<cell.length;i++) {
if( chosenColor==cell[i].className) {
     cell[i].className="grey";
  }
 }
     el.className=chosenColor;
     document.forms[0][num].value=el.id+" , "+chosenColor;
 }

function hideShow() {
if(document.getElementById("changeDefault").style.display=="block") {
     document.getElementById("changeDefault").style.display="none";
 }
else {
     document.getElementById("changeDefault").style.display="block";
  }
 }

function greyCheck() {
cell=document.getElementById("applyColor").getElementsByTagName("td");
for(i=0;i<cell.length;i++) {
if( cell[i].className=="grey") {
     alert("---------------------------------------------\n\n"+
              "You have a grey cell or cells.\n\n"+
               "This needs to be changed.\n\n"+
                "The final selection should contain one\n\n"+
                "each of the available colour choice.\n\n"+
                "---------------------------------------------");
    return false;
  }
 }
}
//-->
</script>

</head>
<body>


<div id="show" onclick="hideShow()">Change the default state</div>

<div id="changeDefault">

<table id="applyColor"><tr>
<td  id="work" class="white" onclick="applyClass(this,0)">At Work</td>
<td id="class" class="blue" onclick="applyClass(this,1)">In Class</td>
<td id="defAvail" class="green" onclick="applyClass(this,2)">Definitely Available</td>
<td id="posAvail" class="red" onclick="applyClass(this,3)">Possibly Available</td>
<td id="sleeping" class="yellow" onclick="applyClass(this,4)">Sleeping</td>
</tr></table>

<table id="selectColor"><tr>
<td class="white" onclick="saveClass('white')"></td>
<td class="blue" onclick="saveClass('blue')"></td>
<td class="green"onclick="saveClass('green')"></td>
<td class="red" onclick="saveClass('red')"></td>
<td class="yellow" onclick="saveClass('yellow')"></td>
</tr></table>

<form action="#" onsubmit="return greyCheck()">
<div id="form" >
<input type="hidden" name="work" value="work , white">
<input type="hidden" name="class" value="class , blue">
<input type="hidden" name="defAvail" value="defAvail , green">
<input type="hidden" name="posAvail" value="posAvail , red">
<input type="hidden" name="sleeping" value="sleeping , yellow">
<input id="submit" type="submit" value="Save" >
</div>
</form>

</div>

</body>
</html>

coothead

Edit: I have just noticed your spelling of availiable.
It should , of course, be available.

canadianjameson · 06-10-2005, 04:16 PM

ahahah. you know those words you just CANT spell properly no matter what you do... thats one of them for me. thanks for the heads up, i might actually remember now.

I like the CSS align center, i was looking for it but i couldn't it so i took the lazy way out. the aligning of the save button to the left side of the table doesn't seem to have worked though...

any ideas?

Edit:
I actually thought you'd have to use JS to get the top table's position on the window. From that you could deduce the position of the tables left border, and apply that position to the Save button. Then again I could be crazier than a drunken goat...

coothead · 06-10-2005, 04:49 PM

Hi there canadianjameson,

Quote:

the aligning of the save button to the left side of the table doesn't seem to have worked though.

Your diagram showed the 'save button' as centered and that is what I did.
So where, precisely, would you like it positioned?

coothead

Edit: Ooops, sorry I did not notice the scrollbar on the side of the textarea, so was viewing the wrong diagram.
Hold on while I reposition.

canadianjameson · 06-10-2005, 05:07 PM

hahaha awesome. Thats okay, i had a feeling that might happen... i kept trying to get the whole code to display but it wouldn't

how do you get that table around your EDIT? i so wanna steal that

coothead · 06-10-2005, 05:33 PM

Hi there canadianjameson,

here is the repositioned button...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224">
<html>
<head>

<title>canadian stuff version 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style type="text/css">
<!--
.white {
     background-color: #fff; 
 }
.blue {
     background-color: #ccf; 
 }
.red {
     background-color: #fcc;
 }
.green {
     background-color: #cfc; 
 }
.yellow {
     background-color: #ffc; 
 }
.grey {
     background-color: #ccc; 
 }
#show {
     text-decoration:underline;
     cursor:pointer;
 }
#changeDefault {
     width:580px;
     margin:auto;
     display: none;
 }
#applyColor {
     border:1px solid #999;
     margin:4px auto;
     font-family:verdana,arial,helvetica,sans-serif;
     font-size:16px;

 }
#applyColor td{
     border:1px solid #666;
     padding:4px;
     text-align:center;
 }
#selectColor {
     border-collapse:collapse;
     margin:4px auto;
 }
#selectColor td {
     width:20px;
     height:20px;
     border:1px solid #999;
 }
#submit {
      font-family:verdana,arial,helvetica,sans-serif;
      font-size:14px;
      width:50px;
      margin:4px;
}
//-->
</style>

<script type="text/javascript">
<!--

  var chosenColor=null;

function saveClass(color) {
  chosenColor=color;
 }

function applyClass(el,num) {
if(chosenColor==null) {
    return;
 }
cell=document.getElementById("applyColor").getElementsByTagName("td");
for(i=0;i<cell.length;i++) {
if( chosenColor==cell[i].className) {
     cell[i].className="grey";
  }
 }
     el.className=chosenColor;
     document.forms[0][num].value=el.id+" , "+chosenColor;
 }

function hideShow() {
if(document.getElementById("changeDefault").style.display=="block") {
     document.getElementById("changeDefault").style.display="none";
 }
else {
     document.getElementById("changeDefault").style.display="block";
  }
 }

function greyCheck() {
cell=document.getElementById("applyColor").getElementsByTagName("td");
for(i=0;i<cell.length;i++) {
if( cell[i].className=="grey") {
     alert("---------------------------------------------\n\n"+
              "You have a grey cell or cells.\n\n"+
               "This needs to be changed.\n\n"+
                "The final selection should contain one\n\n"+
                "each of the available colour choice.\n\n"+
                "---------------------------------------------");
    return false;
  }
 }
}
//-->
</script>

</head>
<body>


<div id="show" onclick="hideShow()">Change the default state</div>

<div id="changeDefault">

<table id="applyColor"><tr>
<td  id="work" class="white" onclick="applyClass(this,0)">At Work</td>
<td id="class" class="blue" onclick="applyClass(this,1)">In Class</td>
<td id="defAvail" class="green" onclick="applyClass(this,2)">Definitely Available</td>
<td id="posAvail" class="red" onclick="applyClass(this,3)">Possibly Available</td>
<td id="sleeping" class="yellow" onclick="applyClass(this,4)">Sleeping</td>
</tr></table>

<table id="selectColor"><tr>
<td class="white" onclick="saveClass('white')"></td>
<td class="blue" onclick="saveClass('blue')"></td>
<td class="green"onclick="saveClass('green')"></td>
<td class="red" onclick="saveClass('red')"></td>
<td class="yellow" onclick="saveClass('yellow')"></td>
</tr></table>

<form action="#" onsubmit="return greyCheck()">
<div>
<input type="hidden" name="work" value="work , white">
<input type="hidden" name="class" value="class , blue">
<input type="hidden" name="defAvail" value="defAvail , green">
<input type="hidden" name="posAvail" value="posAvail , red">
<input type="hidden" name="sleeping" value="sleeping , yellow">
<input id="submit" type="submit" value="Save" >
</div>
</form>

</div>

</body>
</html>

I have removed ...
#form {
width:50px;
margin:auto;
}
...from the stylesheet.

Quote:

how do you get that table around your EDIT? i so wanna steal that

Check out the vB script options.

coothead

canadianjameson · 06-10-2005, 09:10 PM

awesome, works like a charm.

Thanks coot.