[Twinkie]

I have a school project due tomorrow, that for the life of me I cannot get to work. I made a web collage, with an image fade in function that fades the images in when they load. It gives me a generic error, $("chalkboard") is null when the ID is clearly declared. This generic sort of error can be set off by an error anywhere else on the page, and I cannot find it. Please help me out!

[gomarc]

In main.css

lines 25 and 31

replace

table.body td#chalkboard

With

table.body td.chalkboard

[Twinkie]

Thanks gomarc, but that is referring to the correct element, the <td> with the ID of chalkboard. I tried separating the id and the classes to see if that works, but that didn't help either.

[misson]

Originally Posted by Twinkie

It gives me a generic error, $("chalkboard") is null when the ID is clearly declared.

That particular line is executed before the body even loads. <td id="chalkboard"> doesn't exist yet. Either load the script at the end of the body or hook the load event for window.

If you don't have it instaled, get Firebug. I bet you would have figured this out on your own with it.

And you really shouldn't be using tables for layout.

[Twinkie]

Thanks for the catch mission

It still is not working even after I moved the javascript down below the table? Now it shows no error but it still does not fade in?

[misson]

Did you try Firebug?

[Twinkie]

Yes I did, and to be honest I don't know how to use it. I didn't see to red lights in any of the tabs, so I don't think it caught anything.

I will figure it out a bit later when I have the time, but as I said it is a project do tomorrow, so please help me if you can.

I know I said that yesterday, but I am pretty sure tomorrow is when I will have to present, so any help would be appreciated.

[misson]

If you don't understand how to do any of the following Firebug tasks, read a Firebug debugging (Michael Sync's tutorial looks good).

Switch to 'fadein.js' and set a breakpoint (that red dot) on the 'for' loop that adds the load event listener. First thing you'll notice is you can't inspect $('chalkboard') as an object and document.getElementById() is called repeatedly. This is a hint you should store $('chalkboard') in a local variable. Use a function so you don't pollute the global namespace.

(function () {
  var chalkboard = $('chalkboard');
  for (var i = 0; chalkboard.childNodes.length > i; i++) {
    ...
  }
})();

The second thing you'll notice is the "if (!$("chalkboard").childNodes[i].src)" test always succeeds. When you inspect the chalkboard variable (after you add it to the code) you'll find that none of its children are <img>s, they're all <div>s. If you loop over chalkboard's grandchildren, you'll find the images. Better is to loop over chalkboard.getElementsByTagName('img') rather than chalkboard.childNodes.

An alternative is to add a class to the images you want to fade in and loop over document.images.

Lastly, consider using addEventListener/attachEvent rather than the onload attribute. You can create wrappers around the browser native event registration methods to work with a consistent interface.

var addEventListenerTo, removeEventListenerFrom;
if (window.attachEvent) {
    addEventListenerTo = function(element, eventName, listener) {
        /* Proper implementation is non-trivial:
           + 'listener' should get the fired event as 1st argument.  
           + 'eventName' is the DOM event name, which doesn't start with 'on'.  'attachEvent' expects event names
               to begin with 'on'.  Not all DOM events can be mapped to an IE event by prefixing 'on'.  
           + IE will leak event listeners.  When you add a listener, hook window's unload event to detach the listener.
           + Within the listener, 'this' must be bound to the object the listener is registered on, which is 
           + 'element'.
           + The biggest issue (because it's not solvable using IE events) is that event capturing can't be supported.
               Oh, well.
           The more you implement, the more useful the library is.  Not all of the features need to be 
           implemented immediately; they can be added as needed.  Ain't separation of concerns grand?
        */
    }
    removeEventListenerFrom = function(element, event, listener) {
        // implementation is almost trivial.
    }
} else {
    addEventListenerTo = function(element, event, listener) {
        // implementation is trivial
    }
    removeEventListenerFrom = function(element, event, listener) {
        // implementation is trivial
    }
}

As this assignment has a close deadline, consider writing addEventListenerTo for the next assignment.

[Twinkie]

Thanks for the tip about the addeventlistner, but that over complicates the script. I have scriptors block right now, so I need the script to be very simple.

var chalkboard = $('chalkboard').getElementsByTagName('img');
for (i in chalkboard) {
	if (!chalkboard[i].src) continue;
	chalkboard[i].onload=function() {
		var obj = chalkboard[i];
		setOpacity(obj, 0);
  		obj.style.visibility = 'visible';
  		fadeIn(obj,0);
	}
}

Why is variable i not able to be read by the onload function declaration?

[gomarc]

Maybe this article can help you:

http://brainerror.net/scripts/javascript/blendtrans/