Class 2 - Assignment 1

Here is the image from assignment #1 in our second class this semester = our first XHTML/CSS layout.



This is the link to the file in my folder in onepotcooking.com.

Class 1 - Assignment 1

Here is my image of the first assignment in our first class several weeks ago = the wireframe diagram for the "Pet Shop" application.

The .ppt file in onepotcooking.com/johnpennisten is "Pet_Shop_Wireframe.ppt".

Class 5/6 flickering: a better way?

I went to the NYU Computer Lab in Room 210 at 48 Cooper Square today and blasted away for five hours straight at the "mouseover" flickering in assignment 5 but could never get it to go away cleanly in all situations. This was true even using Amos' "relatedTarget" approach in his email yesterday (Sunday!)

I puzzled over it on the subway home and at dinner. I came up with a new approach which I tried out tonight and which really works simply, cleanly and crisply. (Maybe we'll have Rice Krispies bars to celebrate at lunch this Saturday!) Unfortunately I'm now at the office using my grubby IE6 browser; the URL's for Mozilla Firefox are blocked on our computers. I'll be very busy the next few days at work but I'll try to get back to the lab soon to upload everything to onepotcooking. In any event, I have a vacation day on Friday when I can redo everything at NYU.

Meanwhile all the relevant code (html, css, js) is cut & pasted below. As for php, the nine thumbnails can be loaded via parameterized "includes", as we did in class on Saturday and which interested readers can already view under my id (johnpennisten) on onepotcooking.

The basic idea to stop the flickering is to have for each thumbnail one "outer" div which holds two "inner" divs, one for the thumbnail image and one for the thumbnail description. When the page first loads, the inner image div has "display: block" and the inner description div has "display: none". Event observers are set up on the OUTER thumbnail div for the mouseover and mouseout events. When you mouseover the OUTER thumbnail, the INNER image div is reset to display:none and the INNER description image is reset to display:block. When you mouseout, the reverse occurs. (display:inline can make things come up truncated.)

This way there is NEVER ANY REPOSTIONING OF ANYTHING; it's the repostioning that is likely the root cause of all this flickering business. Here is the code:

HTML ("tnail" is the outer div; "tnimg" and "tndat" are the inner divs):

div class="tnail" id="tn01"
div class="tnimg" id="tn01_img"
img title="image01" alt="thumbnail01" src="http://www.blogger.com/images/emandems.bmp" /div
div class="tndat" id="tn01_dat"
p strong use ems today! strong /p /div
/div

CSS:

".tnail { float: left; width: 125px; height: 90px; margin: 5px; padding: 0px; border: 0px;}"
".tnimg { display: block; background-color: aqua; width: 125px; height: 90px;}"
".tndat { display: none; background-color: white; width: 125px; height: 90px;}"

The ENTIRE javascript:

"// main event observer for window load"
"Event.observe(window, 'load', function() { setTnailMouseovers(); setTnailMouseouts(); });"

"// event observers for thumbnail mouseovers"
"function setTnailMouseovers() { var els = $$('.tnail'); els.each( function(el) { Event.observe(el, 'mouseover', function() { var tnimg = el.id + "_img"; var tndat = el.id + "_dat"; $(tnimg).setStyle({display:'none'}); $(tndat).setStyle({display:'block'}); }) })}"

"// event observers for thumbnail mouseouts"
"function setTnailMouseouts() { var els = $$('.tnail'); els.each( function(el) { Event.observe(el, 'mouseout', function() { var tnimg = el.id + "_img"; var tndat = el.id + "_dat"; $(tnimg).setStyle({display:'block'}); $(tndat).setStyle({display:'none'}); }) })}"

Class 5 - Assignment 1

Here is my solution for the Class 5 assignment with JavaScript. Especially helpful was Jack Pax's model solution using the "setStyle" method for screen elements.

Here is the link.

Class 4 - Assignment 1

I added a "Reset" button to my screen. This is a big help during testing. You type some data into the screen; it doesn't work right. You just clear the screen with "Reset" and promptly try again.

This is the link.

Class 3 - Assignment 1

Here is my version of Class 3 - Assignment 1. Unfortunately I had to do it using IE6 on my office workstation, which doesn't have WinFTP or Mozilla Firefox because of office security policy. So it's not yet in onepotcooking.com and any IE7 kinks haven't been worked out. But SCPS has an open lab in Room 210 of 48 Cooper Square each Friday, so I'm going to try to get there tomorrow and see if I can upload it before Saturday class.

Meanwhile, Joel Linder did a really good job with his assignment. Following what he did really helped me, not least the logo in the upper left corner!! I haven't had a lot of html experience, so seeing what others have done is a big help.

Google Reader > Netvibes

Google Reader is much better than Netvibes!!

I followed Amos' instructions in his Oct 02 blog. His instructions were easy, brief and worked perfectly. Everyone should switch as soon as they can.