adding the finishing touches to an table-cell bg color changer script

canadianjameson

05-28-2005, 08:02 AM

Hey. I started this a while back but it seems to have died out. I was wondering if someone could help me make a few final changes to it (while maintaining its cross-browser compatibility.

they are:

The ability to drag across the times to highlight that time for the entire week, but not the days (i.e: onDrag from 7:00 to 10:30 for the entire week)
The ability to select certain times and enter "highlight these from this date until this date".
the ability to have the highlighted times and corresponding classe-values saved to a database in a mirrored format

The last two may require turning this into a quazi-calendar type thing so if anyone has a free or premade one that this could be applied to, lemme know

if any clarification is needed, please let me know

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
table {
border-collapse: collapse; }

td {
border: 1px solid #333; }

/*.show {
visibility: visible }
.hide {
visibility: hidden }
*/
.blue {
background-color: #ccf }
.red {
background-color: #fcc }
.green {
background-color: #cfc }
.yellow {
background-color: #ffc }
</style>
<script language="javascript">
function Clear() {
var obj = document.getElementById('mySelect');
if ( obj != null ) {
obj.selectedIndex = 0;
}
var obj = document.getElementById('fullRow');
if ( obj != null ) {
obj.checked = false;
}
}
</script>

<script language="javascript">

function changeMyRowColor( e, obj ) {
var ClassName = GetClassName(e);
if ( ClassName != null ) {
var oRow = obj.parentNode;
if ( oRow.tagName == 'TR' ) {
for ( var x = 0 ; x < oRow.childNodes.length ; x++ ) {
//alert(oRow.childNodes[x].tagName + ' - ' + oRow.childNodes[x].id);
if ( oRow.childNodes[x] != null ) {
if ( oRow.childNodes[x].className != 'noColor' ) {
oRow.childNodes[x].className = ClassName;
}
}
}
}
}
}

function GetButtonPress(e) {
if ( !e ) {
var button = window.event.button;
} else {
var button = e.which;
}
return button;
}

function GetClassName( e ) {
oSelect = document.getElementById('mySelect');
var button = GetButtonPress(e);
return returnClassName(button);
}

function returnClassName( button ) {
oSelect = document.getElementById('mySelect');
if ( oSelect == null ) return null;
if ( oSelect.selectedIndex == 0 ) return null;
if ( button == 1 ) {
if ( oSelect.options == null ) { //Hack for IE
var ClassName = oSelect.childNodes[oSelect.selectedIndex].value;
} else {
var ClassName = oSelect.options[oSelect.selectedIndex].value;
}
} else {
var ClassName = '';
}
//alert(ClassName);
return ClassName;
}

function changeMyColColor( e, obj ) {
//alert('Im here!');
var ClassName = GetClassName(e);
if ( ClassName != null ) {
var oRow = obj.parentNode;
for ( var x = 0 ; x < oRow.childNodes.length ; x++ ) {
if ( obj == oRow.childNodes[x] ) break;
}

if ( x < oRow.childNodes.length ) {
var oBody = document.getElementById('mainBody');
if ( oBody != null ) {
for ( var y = 0 ; y < oBody.childNodes.length ; y++ ) {
var oRow = oBody.childNodes[y];
if ( oRow != null ) {
if ( oRow.childNodes[x] != null ) {
oRow.childNodes[x].className = ClassName
}
}
}
}
}
}
}

function forceMyColor( ClassName, obj ) {
if ( ClassName != null ) {
obj.className = ClassName;
}
}

function changeMyColor( e, obj ) {
var ClassName = GetClassName(e);
if ( ClassName != null ) {
obj.className = ClassName;
}
}

function mySelect_onChange( obj ) {
var myClass = '';
if ( obj.options == null ) { //Hack for IE
myClass = obj.childNodes[obj.selectedIndex].value;
} else {
myClass = obj.options[obj.selectedIndex].value;
}
var oObj = document.getElementById('demonstrationCell');
if ( oObj != null ) {
oObj.className = myClass;
}

var oObj = document.getElementById('entireRow');
if ( oObj != null ) {
if ( obj.selectedIndex > 0 ) {
oObj.className = 'show';
} else {
oObj.className = 'hide';
}
}

var oCheck = document.getElementById('fullRow');
if ( oCheck != null ) {
oCheck.checked = false;
}
}

var MouseDrag = 0;

function forceMouseDrag( bool ) {
//alert('here!');
MouseDrag = bool;
}

function setMouseDrag( e, obj, bool ) {
if ( bool == null ) {
MouseDrag = GetButtonPress(e);
} else {
MouseDrag = bool;
}
//alert(MouseDrag);
}

function changeMyColorDrag(e, obj) {
if ( MouseDrag > 0 ) {
forceMyColor( returnClassName(MouseDrag), obj );
//changeMyColor(e, obj );
}
}

// just make a button to call this function and it will clear all selected feilds
// function ClearAllCells() {
// oBody = document.getElementById('mainBody');
// if ( oBody != null ) {
// for ( var x = 0 ; x < oBody.childNodes.length ; x++ ) {
// var oRow = oBody.childNodes[x];
// for ( var y = 0 ; y < oRow.childNodes.length ; y++ ) {
// var oCell = oRow.childNodes[y];
// if ( oCell.className != 'noColor' ) {
// oCell.className = ''
// }
// }
// }
// }
//}
</script>

</head>

<body onload="Clear()">
<br>
<form action="#">
<div align="center">
<select id='mySelect' onchange="mySelect_onChange(this);">
<option>Please Customize Your Schedual</option>
<option value="red">Class / Work</option>
<option value="blue">Definite Availiability</option>
<option value="green">Possibly Available</option>
<option value="yellow">Sleeping</option>
</select>
</div>
</form>

<table width="680" cellspacing="0" cellpadding="1" id='mainTable' onselectstart="return false">
<thead id='mainHead'>
<tr>
<td width="85" id="demonstrationCell"> </td>
<td width="85" class="noColor"><div align="center"><strong>Monday</strong></div></td>
<td width="85" class="noColor"><div align="center"><strong>Tuesday</strong></div></td>
<td width="85" class="noColor"><div align="center"><strong>Wednesday</strong></div></td>
<td width="85" class="noColor"><div align="center"><strong>Thursday</strong></div></td>
<td width="85" class="noColor"><div align="center"><strong>Friday</strong></div></td>
<td width="85" class="noColor"><div align="center"><strong>Saturday</strong></div></td>
<td width="85" class="noColor"><div align="center"><strong>Sunday</strong></div></td>
</tr>
</thead>
<tbody id='mainBody'>
<tr>
<td class="noColor"><div align="center"><strong>    7:00</strong><font size="-1">pm</font></div></td>
<td id="monday_7pm"> </td>
<td id="tuesday_7pm"> </td>
<td id="wednesday_7pm"> </td>
<td id="thursday_7pm"> </td>
<td id="friday_7pm"> </td>
<td id="saturday_7pm"> </td>
<td id="sunday_7pm"> </td>
</tr>
<tr>
<td class="noColor"><div align="center"><strong>7:30</strong></div></td>
<td id="monday_730pm"> </td>
<td id="tuesday_730pm"> </td>
<td id="wednesday_730pm"> </td>
<td id="thursday_730pm"> </td>
<td id="friday_730pm"> </td>
<td id="saturday_730pm"> </td>
<td id="sunday_730pm"> </td>
</tr>
<tr>
<td class="noColor"><div align="center"><strong>8:00</strong></div></td>
<td id="monday_8pm"> </td>
<td id="tuesday_8pm"> </td>
<td id="wednesday_8pm"> </td>
<td id="thursday_8pm"> </td>
<td id="friday_8pm"> </td>
<td id="saturday_8pm"> </td>
<td id="sunday_8pm"> </td>
</tr>
<tr>
<td class="noColor"><div align="center"><strong>8:30</strong></div></td>
<td id="monday_830pm"> </td>
<td id="tuesday_830pm"> </td>
<td id="wednesday_830pm"> </td>
<td id="thursday_830pm"> </td>
<td id="friday_830pm"> </td>
<td id="saturday_830pm"> </td>
<td id="sunday_830pm"> </td>
</tr>
<tr>
<td class="noColor"><div align="center"><strong>9:00</strong></div></td>
<td id="monday_9pm"> </td>
<td id="tuesday_9pm"> </td>
<td id="wednesday_9pm"> </td>
<td id="thursday_9pm"> </td>
<td id="friday_9pm"> </td>
<td id="saturday_9pm"> </td>
<td id="sunday_9pm"> </td>
</tr>
<tr>
<td class="noColor"><div align="center"><strong>9:30</strong></div></td>
<td id="monday_930pm"> </td>
<td id="tuesday_930pm"> </td>
<td id="wednesday_930pm"> </td>
<td id="thursday_930pm"> </td>
<td id="friday_930pm"> </td>
<td id="saturday_930pm"> </td>
<td id="sunday_930pm"> </td>
</tr>
<tr>
<td class="noColor"><div align="center"><strong>10:00</strong></div></td>
<td id="monday_10pm"> </td>
<td id="tuesday_10pm"> </td>
<td id="wednesday_10pm"> </td>
<td id="thursday_10pm"> </td>
<td id="friday_10pm"> </td>
<td id="saturday_10pm"> </td>
<td id="sunday_10pm"> </td>
</tr>
<tr>
<td class="noColor"><div align="center"><strong>10:30</strong></div></td>
<td id="monday_1030pm"> </td>
<td id="tuesday_1030pm"> </td>
<td id="wednesday_1030pm"> </td>
<td id="thursday_1030pm"> </td>
<td id="friday_1030pm"> </td>
<td id="saturday_1030pm"> </td>
<td id="sunday_1030pm"> </td>
</tr>
<tr>
<td class="noColor"><div align="center"><strong>11:00</strong></div></td>
<td id="monday_11pm"> </td>
<td id="tuesday_11pm"> </td>
<td id="wednesday_11pm"> </td>
<td id="thursday_11pm"> </td>
<td id="friday_11pm"> </td>
<td id="saturday_11pm"> </td>
<td id="sunday_11pm"> </td>
</tr>
<tr>
<td class="noColor"><div align="center"><strong>11:30</strong></div></td>
<td id="monday_1130pm"> </td>
<td id="tuesday_1130pm"> </td>
<td id="wednesday_1130pm"> </td>
<td id="thursday_1130pm"> </td>
<td id="friday_1130pm"> </td>
<td id="saturday_1130pm"> </td>
<td id="sunday_1130pm"> </td>
</tr>
<tr>
<td class="noColor"><div align="center"><strong>12:00</strong></div></td>
<td id="monday_12am"> </td>
<td id="tuesday_12am"> </td>

<td id="wednesday_12am"> </td>
<td id="thursday_12am"> </td>
<td id="friday_12am"> </td>
<td id="saturday_12am"> </td>
<td id="sunday_12am"> </td>
</tr>
</tbody>
</table>
<script language="javascript">

document.onmousedown = function ( event ) { setMouseDrag( event, this, null ) ; }
document.onmouseup = function ( event ) { setMouseDrag( event, this, 0 ) ; }
//document.onselectstart=function(){return false};
/*oTable = document.getElementById('mainTable');
if ( oTable != null ) {
oTable.onmouseout = function ( ) { forceMouseDrag( false ) ; }
} */

oBody = document.getElementById('mainBody');
var firstOneFound = false;
if ( oBody != null ) {
for ( var x = 0 ; x < oBody.childNodes.length ; x++ ) {
var oRow = oBody.childNodes[x];
var CellCounter = 0;
for ( var y = 0 ; y < oRow.childNodes.length ; y++ ) {
oCell = oRow.childNodes[y];
if ( oCell.tagName == 'TD' ) {
if ( CellCounter == 0 ) {
oCell.onmousedown = function ( event ) { changeMyRowColor( event, this ); }
oCell.oncontextmenu = function ( ) { return false; }
} else if ( oCell.className != 'noColor' ) {
oCell.onmousedown = function ( event ) { changeMyColor( event, this ); }
oCell.onmousemove = function ( event ) { changeMyColorDrag( event, this ); }
oCell.oncontextmenu = function ( ) { return false; }
}
CellCounter++;
}
}
}
}
oHead = document.getElementById('mainHead');
if ( oHead != null ) {
for ( var x = 0 ; x < oHead.childNodes.length ; x++ ) {
var oRow = oHead.childNodes[x];
for ( var y = 0 ; y < oRow.childNodes.length ; y++ ) {
oCell = oRow.childNodes[y];
if ( y == 0 ) {
// Blank Cell
} else {
oCell.onmousedown = function ( event ) { changeMyColColor( event, this ); }
oCell.oncontextmenu = function ( ) { return false; }
}
}
}
}

</script>
</body>
</html>

Harry Armadillo

05-28-2005, 11:16 AM

Did you figure out how you're going to save/serve the data stored in the database? Tweaking the highlighting is cool and a good exercise, but defining the API betwixt server and script is desperately needed.

canadianjameson

05-28-2005, 04:23 PM

i know :(

my problem is i don't know what i can do and what i can. and from there i don't know how to do it.

lemme ask you this. what would be the best way to do it, in your opinion

Edit
Regarding the point about tweaking the highlight script... from what I can see that is the only real part of this that is JS... the others are serverside and database... no? shouldn't we address that now and then perhaps move this to a serverside forum (again i don't know... so if i'm off base lemme know :))

Harry Armadillo

05-29-2005, 12:23 AM

Disclaimer: I'm not a server-side guy and I'm known to suck in a big way when comes to API's.

Yeah, most of what remains to do is server-side. Javascript will need to be written to bundle/unbundle data and deal with moving it to/from the server, but an API has to be decided first. Even the highlighting stuff is subject to change, based on how/what the data is.

Best would be to use XMLHttpRequest to post and get data, but would require IE users to allow ActiveX scripting. Less impressive (but not requiring ActiveX) would be to send data in the query-string of a request for new .js file, and receive data back in the body of the .js.

I have some idea fragments: let users create/edit a default-schedule. Then as they edit specific weeks, it starts with that default and things go from there. Or if they're happy with default, it can be their schedule ad infinitum.

But, yeah...the real meat is going to be server-side. Storing/serving the users' schedules for editing and viewing. Combining shedules to suggest the best times to play.

Does your server do php? From what little I know, it seem sufficiently powerful and easy to use. Plus it's popular, so help should be available. I suggest a post in the php forums, asking for API suggestions and difficulty estimates. There may even be existing script that will mostly do the job. If all goes well, then you start a cram-course in php! :)

canadianjameson

05-29-2005, 01:35 AM

and i was starting to think you were super-armadillo! its okay, i still find you usefull, purdy, and rather furry... so all is well.

I like your suggestions, and I will post in the php forums tomorrow... we'll see what I can come up with.

In the mean time... do you have any suggestions on making the necessary changes to allow the onDrag of times? i know its just a simple modification because the times and day names have the class of class="noColor"... and the script currently excludes that class when deciding whether or not to allow the drag-highlight... i tried removing the class tag but to no avail.

any idea how i can get it working?

Harry Armadillo

05-29-2005, 02:44 AM

Super-armadillo? Well, I do look good in tights... :D

The thing is, the 'necessary changes' depend on how the whole thing works.

For example, say that the updating is done with plain ol' form-posting and page-loading. You could have the server build the schedule table the desired size with all the mouse-over/out/up/down/move attributes in place, and post-back the entire table for server parsing/database-updating.

Or say that schedule data is in the page as an array in a script-tag, and javascript is used to build the table, with a modified array being posted to the server.

Or the page could be updated dynamically (without form-posting and page-reloading) by using xmlhttp or whatever, data arriving/leaving as complete tables or as arrays or as densely encoded-strings or whatever.

Implementing the drag-across-times would differ. With complete-tables, you'd continue to do the sort of thing your scripts already do -- directly modify the attributes of table-cells. Whereas if your data is moved via arrays, you'd have a function to go from array->table, and it would be best for the highlighting functions to modify the array, then update the displayed table with the array->table routine.

The overall scheme needs to be determined, then the scripts written to implement it. Writing scripts and hoping a coherent whole pops up -- that just results in a mess.

canadianjameson

05-29-2005, 09:08 AM

I had always figured the user would make whatever changes they saw fit and then hit a "save" button, causing the respective tables cells to be sent to the server... and base on their "id" and "classname" they would incur different results... hence the classes and their corresponding colors.

think its possible?

Harry Armadillo

05-29-2005, 09:53 AM

Possible? Yes. But remember, I lack the server-side experience to judge difficulty and efficiency.

So, you're thinking on-save have the client post a form back to the server, with id=class pairs. Then the server parses that into however the database wants it, shoves it in the database, and sends the client a fresh page an okay message plus whatever.

When the client decides to edit an existing schedule, how to you envision the data arriving? The table pre-built in the page by the server and ready to go, or make the client do some of the work and javascript building the table from value-pairs?

canadianjameson

05-29-2005, 05:19 PM

:D here be my envisions:

I see the user log in
Once logged in they will be presented with their schedual, which is the table (already made because the times / days displayed are static...). What the user does is make a selection from menu and then highlight the times and days they want that selection to apply to.
When they select the table cells and change its background color onclick, what they are actually doing is giving that cell a specific class. When they have highlighted all the cells they want in whatever colors they want, they hit save.
Hitting save (from my perspective) should transfer the table id's and classes to a table in a database. this table would be a mirror copy of the table they saw, just with the classes being the values placed in each cell, and the id's telling the script where to put each class. the id's are currently like id="monday7am".
when the user logs in at a later date to make changes, the page will read the table stored in the database and transfer the classes & id's back to the table on the page; reloading the previously saved page.
at this point we could make a function (if its easier) to make a record of only the table cells that the user changes, and when they save have it only pass those to the database... That being said I don't know if this is complicating things for no reason... it may just be easier to pass the entire table to the database again.
I also need to be able to allow users to enter a date range to apply certain selections to, although i think this will involve a lot more trouble. I want people to be able to say "Apply the changes from (Sept 1st) to (Dec. 21st)"... and have that particular selection (or grouping of selections) be automatically applied to the table each week from start date to finish date

I think i'm gonna post this in the php forum... it seems concise enough of an explanation to start the database thread

canadianjameson

05-29-2005, 07:18 PM

here's where i posted:
http://www.codingforums.com/showthread.php?t=60017