Project please help

[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[COLOR=Red][B]#[/B][/COLOR]chalkboard

With

table.body td[B][COLOR=Red].[/COLOR][/B]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]

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.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/

 

[Twinkie]

I finally fixed it, thank for all your help. Wow, I was at a low today, I forgot the this keyword....

Thanks gomarc and mission.

+REP

 

[misson]

You did most of the work yourself, so kudos for that.

One last suggestion: rather than continually calling 'setTimeout' in fadeIn, call setInterval to run fadeIn periodically and call clearInterval when the fade-in completes (the links are to MDC, but setInterval and clearInterval are cross browser).

 

[Twinkie]

A quick css question: How could I make the images in the chalkboard disappear behind the boarders when the window size is changed instead of flying off the screen?

 

[misson]

You first need a suitable ancestor whose bounding box is the display region you want to limit the images to (td#chalkboard is a candidate). If no such ancestor exists, find or create one and (by some method) set its bounding box. Set the ancestor's overflow property to 'hidden'.

 

[Twinkie]

Yea, I tried simply setting the overflow: hidden property for td#chalkboard, but it did nothing. How do you bound an object that is positioned absolutely?

 

[misson]

Setting overflow on some node N clips descendents whose containing block is descended from N's padding block (that is, the containing block is the padding block of N or a descendent of N). The containing block for positioned elements (such as the absolutely positioned pictures) is the nearest positioned ancestor. td#chalkboard isn't positioned, which is why td#chalkboard's overflow isn't clipping the pictures.

The simplest way of setting a block to be the containing block for children is to relatively position the element. However, you can't relatively position a <td> element. More precisely, relative positioning is undefined for elements with a "display" of "table-cell".

You could try messing around with absolutely positioning td#chalkboard, or add an element between td#chalkboard and the photo holder <div>s and try to position that. It'll probably be a mess and you'll find it easier to scrap the table layout and use CSS, as per best practices. There are countless ways of making cornered boxes using CSS; Google will turn up many of them.

Edit: since the placeholder_* class attributes are unique, they may as well be IDs.