KevinM1

Okay, this is really strange. I've tried two ways to do this - the JQuery way from the last example, and a more traditional way just now - and it's not working. I can see the class name changing correctly in Firebug, but you're right, nothing changes in Firefox (I orginally thought it worked right because I accidentally skipped over the active/inactive classes in your CSS). In IE, only the background for the actual input changes. I'm stumped. Here's both my new code and the previous JQuery code (commented out). Maybe someone else can point us in the right direction after looking at it: <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript"> window.onload = function() { var grids = document.forms["Grid"].elements["grid[]"]; for(var i = 0; i < grids.length; i++) { grids[i].onclick = function() { if(this.className == "active") { this.className = "inactive"; this.parentNode.className = "inactive"; this.parentNode.nextSibling.className = "inactive"; } else { this.className = "active"; this.parentNode.className = "active"; this.parentNode.nextSibling.className = "active"; } } } } /* $(document).ready(function() { $(document.forms["Grid"].elements["grid[]"]).each(function() { $(this).click(function() { if($(this).hasClass("active")) { $(this).removeClass("active").addClass("inactive"); $(this).parent().next().andSelf().toggleClass("active"); } else { $(this).removeClass("inactive").addClass("active"); $(this).parent().next().andSelf().toggleClass("active"); } }); }); }); */ </script> The HTML I copied directly from the source, so it's exactly the same as yours. I won't paste it here as it's very large. But man, this is puzzling.

I made a small change: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(document.forms["Grid"].elements["grid[]"]).each(function() { $(this).click(function() { if($(this).hasClass("active")) { $(this).removeClass("active").addClass("inactive"); $(this).parent().next().andSelf().toggleClass("active"); } else { $(this).removeClass("inactive").addClass("active"); $(this).parent().next().andSelf().toggleClass("active"); } }); }); }); </script> This adds the "active" class to the grid input, its containing <td>, and the neigboring <td> upon clicking. If it's already active, it removes that class from the two <td>'s and sets the grid input's class to "inactive." It should work in Firefox. I've been doing all my testing with Firefox 2 using the Firebug add-on. It shows the classes toggling correctly. If it's not working in FF, I'm not sure what to say.

Okay, try this: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(document.forms["Grid"].elements["grid[]"]).each(function() { $(this).click(function() { if($(this).hasClass("active")) { $(this).removeClass("active").addClass("inactive"); $(this).parent().next().toggleClass("active"); } else { $(this).removeClass("inactive").addClass("active"); $(this).parent().next().toggleClass("active"); } }); }); }); </script> One thing to note: you really should strive for more semantically-correct markup. I noticed that every table cell with an input has an ID of "ChangeMe". This is semantically incorrect because an ID is a unique identifier. If you were using JavaScript to access those elements directly, you'd be in a bit of trouble, as getElementById would either fail, or only return the first element. You should instead give them all the same class. Just something to keep in mind as you progress.

Hmm.... Mind giving me a link to your page, if possible? It's hard to diagnose without actually seeing how everything is layed out. If I could see it, I could then make a test page of my own to play with.

Okay, the easiest way to do this is probably to use the JQuery library to help us out: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(document.forms["Grid"].elements["grid[]"]).toggle(function() { $(this).prev().siblings().andSelf().addClass("active"); }, function() { $(this).prev().siblings().andSelf().addClass("inactive"); }); }); </script> Let me know if this works (or does anything at all ).

Oh, wait...you just want the cells that the inputs are in to change? Or do you want other cells to change as well?

Pro JavaScript Techniques by John Resig (http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273/ref=pd_bxgy_b_text_b).

Hmm... The cells you want to change have a class name of either 'active' or 'inactive' at the start, right? Are there cells belonging to that class that you don't want to have highlighted when the input is clicked? I ask because there are ways to get at elements based on their class names, but if you're trying to change a particular element out of many of the same class based on a single click, then things get difficult.

I think a more relevant question is this: Was this 'server' something provided by the university? Or is it hosting from a commercial, 3rd party source that some university admin got into by abusing their power? I ask because my university gave its students free web hosting, but we were pretty limited with what we could do with it. This could be a case of the OP posting copyrighted images, or dispensing other info (test info, etc) that the school deemed inappropriate.

Instead of using the id of the entire table, you need to give the <td>'s you want to change unique id's. Once you have a hold of those cells by calling getElementById() on them, then you can change their className property. If that doesn't work, let me know. Since you're using it on a checkbox input, you may need to use onchange rather than onclick.

<html> <head> <title>Increment by 1</title> <script type="text/javascript"> window.onload = function() { var myButton = document.getElementById("myButton"); var myInput = document.getElementById("myInput"); myButton.onclick = function() { myInput.value = parseInt(myInput.value) + 1; } } </script> </head> <body> Add 1 to: <input id="myInput" name ="myInput" type="text"><br /> <button id="myButton" value="Add 1!"> </body> </html>

Yeah, I should've been more clear. Sorry about that. The method I used utilized what's typically referred to as unobtrusive JavaScript. That's just a fancy way of saying that the script is completely separate from the markup. Separating the two is considered to be the best practice, as it makes both the code and the markup easier to maintain (they're both centralized), and it removes those pesky "what element am I actually using in my function?" errors as you're typically forced to use the explicit getElementBy... functions. So, all that said, you'll need to remove the onlick="changeState(this);" from the input as it's not defined in the <script> tags, and it's no longer needed anyway as there's another function (grid.onclick = function(){...}) that does the dirty work.

Your problem lies with: <input type="checkbox" name="grid[]" value="'.$row['Id'].'" class="inactive" onclick="changeState(this);"> The 'this' you're passing into the function -- and trying to change the background of -- is the input and not the table data. This particular hang-up tends to be common when people mix and match JavaScript with their markup. Thankfully, the code can be extracted, but not without two bits of info: 1. The ID or name of the form input that acts as the 'switch'. 2. The ID(s) of the table cells that need to be toggled. The basic structure, though, would be something along the lines of: <script type="text/javascript"> window.onload = function() { var grid = document.forms["formName"].elements["grid[]"]; //replace formName with the name of your form grid.onclick = function() { var tableData = document.getElementById("tableData"); //replace the tableData ID with whatever you want tableData.className = (tableData.className == "active") ? "inactive" : "active"; return true; //just to be safe } } </script>

The 'this' keyword refers to the current instantiated object. An example (using PHP 5 syntax): <?php class Example { private $myProp; public function __construct($input = null) //we set a default value for $input in case the user doesn't want to instantiate the object with its property already set { $this->myProp = $input; } public function setProp($input) //explicit method to set the property { $this->myProp = $input; } public function getProp() //method to retrieve the property { return $this->myProp; } } $obj1 = new Example(); $obj1->setProp("This is Example 1"); $obj2 = new Example("This is Example 2"); echo "Example 1: {$obj1->getProp()} -- Example 2: {$obj->getProp()}"; //should output: //Example 1: This is Example 1 -- Example 2: This is Example 2 ?> So, as you can see, the 'this' keyword refers to the current object.

Try: <?php class test { public $bir = 'win'; public $wind = 'th'; public function test() { echo $this->wind . $this->bir; } } $obj = new test(); ?>

I have the feeling it's because 'coords' is a string, thus splitting it also results in a string. Try running either the entire 'nums' array, or just 'nums[1]' through parseInt as well.

Okay, that shouldn't be hard, provided you keep track of the previous displayed div. The easiest/best way to do that would be to set a global variable that keeps that info: <script type="text/javascript"> window.onload = function() { var prev = null; //previous div that's been displayed...since this is the beginning of the script, it's null . . . var areaElem = document.getElementById("area1"); areaElem.onmouseover = function() //toggle function { if(prev.id == "some value") { prev = myDiv; //once you start switching the displayed divs around, you should store the old ones as reference var myDiv = document.getElementById("r12"); //get the new div. Note that it's not global...that saves some headaches down the road prev.style.display = "none"; //hide the old div myDiv.style.display = "block"; //show the new one } } . . . } </script> Obviously, there's more to it than that, but that's the gist of it.

Hmm...well, you could always go the longer route of setting each area element's onmouseover event: var area1 = document.getElementById("area1"); area1.mouseover = function() { var r1 = document.getElementById("r1"); r1.style.display = "block"; } area1.onmouseout = function() { var r1 = document.getElementById("r1"); r1.style.display = "none"; } You'd have to do give each area element an id, so you can obtain them individually. Then you'd need to manually assign the proper functions to the mouse event handlers. Tedious, but it can be done. It can still be done if you're pulling data from the DB. You'd just have to write the JavaScript using PHP, or whatever server-side language you're using.

I mean that for each area element, is there a corresponding r-something div? In other words, does area element 11 (if there is one) relate to r11?

Well, my high school didn't have a website until after I graduated. I'm an old fogey.

That can't be bolded enough. I hate JavaScript rollovers. Most of the ones I've encountered either have horrible animation, horrible sound (like these), or are so simple that the use of JavaScript is unnecessary. The thing I find so deliciously ironic about that site is that it violates a lot of very simple design concepts, yet this guy is being paid to teach students about design. Where can I get a job where I can fail so horribly at what I do, yet still get paid?

Yeah, but that function.... :shudder: A more elegant solution would be to scrap the original code and use modern techniques. <script type="text/javascript"> window.onload = function { var areaTags = document.getElementsByTagName("area"); for(var i = 0; i < areaTags.length; i++) { areaTags[i].onmouseover = function() { var myDiv = document.getElementById("r" + i); myDiv.style.display = (myDiv.style.display == "block") ? "block" : "none"; } } } </script> The above assumes that there's a 1:1 correlation between area elements and divs. If not, there's a bit more work to be done, but the basics are there.

Judging by that site, your teacher is a hack. Annoying movie that plays every time the site is loaded, which doesn't allow the user to control it in any way? Annoying mouseover sounds for the main navigation? A website whose actual size changes based on the rotating left column data? A layout that's a mashup of both divs and tables? Hell, he didn't even have the decency to write his own JavaScript (most likely because he can't). Earth to teacher -- 1998 was ten years ago.

I believe I've found the problem, and, thankfully, it looks like my hunch was correct. The problem is that the script is working before the document is fully loaded. So, the solution is to put the entire script into the window's onload event handler as a function. In other words: <script type="text/javascript"> window.onload = function() { //rest of the script goes here } </script> That should fix things. If it doesn't, let me know.

Hmm...I'll check it out. Are you using Firefox to test it? Because line 72 is merely a '{' character.