Sleazily rolling over

ha (that would be a "ha" of joy...with a tinge of madness...)

In the end, I had to rely on someone else's code. I used Jack's and changed my div classes and ids to match the ones he used. After doing that, not only did I have rollovers but the .js file made a lot more sense. More sense...but not entirely.

updated draft of site

Draft of e-commerce site

The javascript part did not work out well. Being short on time this week did not help. I was able to get a rollover effect using the visibility property in CSS, but that also resulted in flickering. Also, when I used zoom in and zoom out on the window, the divs for the product description shifted. I abandoned using CSS to achieve the rollover effect and began using the prototype examples covered in class but...yeah... I still need go over the material again and again.

I was trying not to rely heavily on anyone else's code, but it looks like that is the best bet for a successful outcome.

link to e-commerce page (w/o rollover)

Class 4 assignment

I'm still struggling with javascript syntax, which is not too much of a surprise. Nevertheless I feel better off than the previous week. This is not to say that the homework came from me successfully arriving at the answer on my own.

I found this link helpful. It gives the basic format and you can adapt it to your form.

Looking at it, I realized that I had made things unnecessarily difficult for myself by creating 3 forms. But I was able to adapt the example without redoing my HTML. In the end it worked out well and I understand a little more than I would have had I just done one form. Whether the lesson will stick or not is another issue. I believe, in my case, it is better to start compiling a library of scripts.

Here is my result.

NYU Web Directory

I, for some reason, decided to use an imaginary person for my assignment.

Strangely enough, the biggest headache was getting the heading of each bit of directory information to look the way I wanted (with a burgundy border and flush against the top of their respective div containers, with no space to the left and right showing the background of the element behind it). Hope that makes sense.

I realized that I had to make the headings (basic info, contact info, links, and interests, etc) block-level elements in order to make the background color extend past the words. After using h4 tags, I then had the text being pushed down away from where I wanted it to be. I removed the padding from those sections and then adjusted the size of the div containers to make up for the removed padding. I still had the h4 tag pushing the text down from the top of the div containers. I used relative positioning to move the text (and the list items following it) up. Problem solved. There probably is an easier way, but this is what occurred to me after scratching my head…furiously.

While working on this assignment, it occurred to me that it really is going to be hard for me to remember the syntax for the various properties without looking at my old files or looking up information in a text or online. Perhaps it will get better with time, but it was only after checking my results against other sites did I go “Oh! I should do such-and–such”. ~bows to sources of information~

In terms of checking the assignment in the browsers… Only one div container looked slightly different in Safari. It was the one containing the “about me” blurb. I used relative positioning to move the container up and there is more space under it Safari than in Firefox. I will have to wait until class to check it in Internet Explorer. (I was dragging my feet about installing IE on my mac only to find out there has not been a new version since 2003…indeed.)

Class 2 Homework - Petshop wireframe and CSS

I'm certain there are bags under my eyes, well-earned ones. It was a journey of tea-guzzling, swearing, and indigestion.

http://www.onepotcooking.com/kathleenhaywood/class2/c2a2.html

It was based on the wireframe below. (made some changes though)



I've looked at it in FireFox and Safari and I haven't spotted anything glaringly odd. I'm curious as to how the colors are going to look on a Windows machine. (I'm on a Mac.)

Oh Yeah...

I found an alternative program to Fireshot (Windows only) called Webshot. Can't quite compare the two since I haven't had a chance to play with Fireshot during class breaks. As far as I've seen with Webshot, it would be nice if you could choose the file extension for your capture or if you could determine which part of the site you wanted to capture. For instance if you simply wanted part of the first page.

[EDIT] I was able to have a look at the site in Internet Explorer ,and strangely enough, a problem that I was having with the Featured Pet div box appeared to have fixed itself. The problem is still visible in FireFox. (The issue was with the rabbit's name overlapping with the bottom border of the box)

Also in IE, the paw print used in the logo looks shabbier than it does in FireFox. I can't really understand how that would be. Differing browser interpretation of a .gif with a transparent background?