Client-Side Class Assignments

Here are the links to my class assignments to date:

Class1: My Petshop Wireframe JPG
Class2: HTML Coded Wireframe
Class2: My Petshop (based on Amos' wireframe)
Class3: WEBDEV Directory Page
Class4: Shipping/Billing Form with Javascript
Class5: ECommerce Store with Javascript
Class6: Ecommerce Store - Now with PHP!
Class6: Ecommerce Store - PHP - Page 2

Some notes about the PHP: both pages of my store use the same HTML, CSS, and Javascript. I used PHP includes for nearly everything. Each of the two pages have a few PHP variables set at the top which then flow into the Pagetitle and Breadcrumb sections. I used PHP to make background image change based on the Subcategory. I was tempted to do it with Javascript, but chose PHP instead since the background doesn't really change after it is set. It seemed like the sort of thing PHP would be perfect for.

Also, I tried incorporating Amos' solution for the blinking of the info overlays, but so far no luck. I'll keep at it.

Oh yeah, I should probably cite Jon R.'s fabulous Audio Amazon page as the inspiration for my new background images and transparent center section. Mine is nowhere near as good-looking as his, but hey... imitation is the sincerest form of flattery.

Javascript is Frustrating and Sneaky

Thanks to Jung for mentioning the position:absolute detail. I was working on my page for days (with mostly correct Javascript) and none of the positioning succeeded until I set position:absolute in the CSS.

My final assignment is here.

So the moral of the story is that sometimes the Javascript is just fine and the real problems lie elsewhere.

I sure hope future lessons are learned with less pain involved.

CSS Resets

Oh, and another thing...

I was looking at some existing websites out there and found that some of them use a bit of CSS code to normalize cross browser rendering behaviors. It seems like a good idea to me. You explicitly declare everything to be zero at the beginning so all your defaults are the same between IE and Firefox.

I don't know much about it, but it's working so far! (See my earlier post about my page finally looking the same in both browsers.)

At this link you can find further information. Below is the current recommended CSS Reset.



/* NORMALIZE Cross browser rendering inconsistencies

----------------------------------------------- v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* End Normalization */

Plodding Along...

Hi everyone,

I am happy to report that I finally made something that translates from Firefox to IE! This was the first time I have been able to do it, so I'm extremely pleased.

That was the good news. The bad news is that I'm still working on the basic layout. :( I guess I'm a very slow div-maker. I haven't done a speck of the Javascript yet which is really frustrating. I'm looking forward to giving it a try but I still have a bit more layout to do before I can get there.

Here's how my page looks so far:
http://onepotcooking.com/sharonnikfarjam/class5/inclass5_store.html

The Really Big Red Button That Doesn't Do Anything

Does anybody remember that website called The Really Big Red Button That Doesn't Do Anything?




I used to think it was an amazing zen-like place. Now the magic is gone. :(

Success! Beware of your Javascript variable names...

Yes! My validation finally works! The problem was that I was using variable names like "first-name", "last-name", etc. Apparently, you cannot use the dash within a variable name. It seems to be ok within IDs, but not ok within Javascript variables. The function interprets the dash as a minus sign and causes the function to subtract "name" from "first". This is obviously a big no no. So the moral of the story is to beware of the names you use for your variables. Don't use dashes!

Here are some additional rules for naming your Javascript variables as taken from this link:

1.
A variable name cannot start with a numeral. For instance, 3x or 2goats or 76trombones would all be illegal variable names.

You can, however, have numbers within a JavaScript variable name; for instance or up2me or go4it would both be perfectly valid variable names.

2.
You cannot have a mathematical or logical operator in a variable name. For instance, 2*something or this+that would both be illegal... because the * and the + are arithmetic operators. The same holds true for ^, /, \, !, etc.

3.
You must not use any punctuation marks of any kind in a JavaScript variable name, other than the underscore; for example... some:thing or big# or do'to would all be illegal.

The underscore is the exception, and it CAN be used at the beginning, within, or at the end of JavaScript variable names. You can use names like _pounds or some_thing or gallons_ as variable names and they are perfectly legal.

4.
JavaScript names must not contain spaces. Ever.

5.
You cannot use JavaScript keywords (parts of the language, itself) for variable names. Thus window or open or location or string would be illegal. Check a JavaScript reference if in doubt as to whether something is or is not part of the language -- JavaScript has grown into a fairly fully-fleshed language, so you may get some occasional surprises.

You can, of course, use what are otherwise keywords as parts of variable names. For instance, thatWindow or someString or theLocation would all be perfectly acceptable.

6.
JavaScript variable names are CASE-SENSITIVE. Programmers in other languages are often tripped up by this one, as some languages are not sensitive to case in variable names.

For instance, all of the following names would be considered completely different variable names in JavaScript: gasbag Gasbag GasBag gasBag

(just kidding, all you really need is more cowbell)

Sharon's Billing/Shipping Form

I totally don't get Javascript yet, but I am excellent at making my code match other people's so here is my assignment.

It works, but I really don't understand how or why it works. In order to give myself some more practice, I am trying to add some functionality to validate the form and check for blank fields. Unfortunately, the only thing my formValidate function seems to do is break the otherwise working address-matching function. Argh.

So far no luck, but stay tuned...