Class 5 Assignment: Store Website

Here is my project so far. I was able to use the hide and show, but there seem to be some kinks in it which I don't know how to address. It looks fine when it first loads, but if you mouseover or mouseout quickly, some images don't return.


http://onepotcooking.com/annmariegatti/class5/cd_store.html

Request

I am hoping that we can spend more time on JavaScript as I know it's a critical building block for our future work. I am trying my best to understand it, but it's conceptually confusing for me at this point and I do want to get a much better grip on it.

Homework 4 Register Now Part 2

Okay, I finally got it -- BUT I have to admit that this was a trial-and-error 'shot in the dark' process for me -- and I'm sure that I wrote way too much code. My unsuccessful attempts included playing with W3S's example for onkeypress events (which I just didn't understand at all), plus mimicking W3S's onkeyup event (which didn't work) and finally mimicking W3S's onclick event (again which didn't work). I reviewed notes from class about Changing Classes but that was unsuccessful too. I finally ended up using the html code from W3S's onclick event AND the js code from W3S's onkeyup event. I'm sure this can't be right...

I suspect at this point that my js code in the html doc is what's driving everything right now -- as nothing seems to relate to my external js script??? My biggest concern right now is that I still fundamentally do not understand how html and js drive AND relate to each other (I think I'm getting confused with how the variables in the external js script 'match' with the information in the html doc) -- for example, I understand what 'x' means in my external js sheet (the id), however when I tried to call the function within my html code by typing in onkeyup="copyTextInput (id);" /> or onkeyup="copyTextInput ('username_field_2') ;" /> or onkeyup="copyTextInput ('username_field_1');" /> the script just didn't work (and I'm not sure why because this made more sense to me then what I ended up doing). Also, in my external js script -- I don't get where the 'y' comes in as I'm certainly not referring to a 'y' anywhere in the html code...


here's a sample of my html code:

input id="username_field_1" class="field_box" type="text" name="username" onkeyup="document.getElementById('username_field_2').value=
document.getElementById('username_field_1').value;"


and here's a sample of my external sheet js code:

function copyTextInput(x) {
 var y = document.getElementById(x).value;
 document.getElementById(x).value = y.toCopyTextInput();
 }

Here's the link to my webpage:

http://onepotcooking.com/annmariegatti/class4/register_now_rev.html

Homework 4 Register Now

Well I'm having a really hard time with JavaScript. Every so often I think I have a glimmer of insight and then it dissolves. I tried going thru the W3S tutorials and the Webmonkey tutorials that Jack posted -- I even bought JavaScript: The Missing Manual by David McFarland -- and I 'sort of' get some of the examples, but overall I just am not understanding the logic (i.e. and what needs to go into the html vs the js page -- and more importantly how they drive each other). That said, I am just posting this assignment without the JavaScript for now because the last version I did with JavaScript just gave me one big green page with absolutely nothing on it (luckily I saved my first html file!). Anyway, I'll keep trying tonight, and post again if I'm at least marginally successful.

http://onepotcooking.com/annmariegatti/class4/register_now.html

Homework class 3 assignment 2 MTV

I had a tough time with this one as well. I understand floating to a certain extent -- but I don't seem to understand how to stack two big div columns side-by-side. I could only do it now by using absolutes for the right-hand column. I'm sure there's an easier way, but I tried every combination of floating that I could think of, and nothing seemed to work.

I also had trouble containing divs within divs within the first column -- particularly at the bottom of the page where The Wall section was. For some reason all of my info extended out of the first column and into the outer container.

Still had trouble with fonts across the board. No matter what I did, hardly anything changed.

Lastly, I had an issue with the Ad in the lower right column -- it kept positioning itself over everything in the upper right column (over the Playlist area). Again, I could only solve this with absolutes.

I spent so much time on this one -- literally going round in circles -- that I just couldn't finish it. I tried to rough a few things out, but there's some more work to do.

Here's my link:
http://onepotcooking.com/annmariegatti/class3_mtv/mtv.html

Homework from Class 3, Assignment 1 Blackbook.com

I had a tough time with this one. It took me a while to 'get' absolute positioning -- at first all of the list information was floating haphazardly on the page! I played with padding and margins for hours before I realized that absolute positioning would solve the problem.

I had trouble with three issues (that I haven't solved yet):
1) Couldn't get the font color of the word 'submit' on the submit button to turn to white.
2) Couldn't get the background color of the alternate divs to turn grey. I created a special div for this, but whenever I added the background color, only about 3/4s of the div turned grey -- there was always a section of white across the top of the div. Very frustrating! I played with the div height, padding, etc. but could not find a solution.
3) Had a difficult time finding the right fonts, boldness, etc. Many times, the changes seemed insignificant -- not sure why.

http://onepotcooking.com/annmariegatti/class3_blackbook/blackbook.html