Project please help

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