The Web Wizard's Guide to JavaScript

My husband found Steven Estrella's The Web Wizard's Guide to JavaScript on a shelf in his office at work and, knowing that I wanted to learn JavaScript and that it had been highly recommended, he brought it home to me.

Now, I've read the w3schools' JavaScript tutorial, and I completed all of the little examples successfully, but I still couldn't think of a way to implement stuff I wanted to implement. Part of this has to do with the fact that so far, I haven't WANTED to implement any JavaScript aside from some menus and some automatically rotating images. I found code to do that before I'd even read the tutorial.

Part of it also has to do with the fact that I think in sentences, and this guide seems to recognize that that's a pretty common way to think. The first chapter alone has been really helpful in helping me understand the different parts of a JavaScript "sentence" and helped me realize that the punctuation in JavaScript isn't really punctuation - it actually tells you a lot about what part of the sentence you're looking at.

As a for instance, say you have this line in your JavaScript:

document.link.color = "blue";

The period is a lot like an apostrophe s - it shows ownership, so you have the document's link's color. We know that color is a property, not because it comes last in this series, but because of the treatment of blue. We have an equal sign followed by blue in quotation marks. That means color is a property of link, which means the value can be thought of as an adjective or quantifier. A different set of marks might indicate that color is a method (think verbs) rather than a property (though I don't think there are any methods called color in JavaScript).

All in all, the first chapter alone has been worth reading, and I'm looking forward to going through more of the book.

Until tomorrow or the day after or whenever you next see me, don't laugh so hard the milk spews out your nose. That hurts.

What's Shakin'

I’ve been away for quite a while now – Andy and I have returned to the States and are back in Chicago after a dreamlike month back home. Returning to Chicago at the beginning of a cold and snowy January from a warm and sunny Texas is a bit like slamming your forehead into a brick wall. At least it gives more than granite…

The up and coming bit is pretty exciting – I’ve made some modifications of my personal website and am working on some new stuff for TLC.

The best part about the TLC work is that the website will look brand new, but most of the underlying CSS and Html is the same, making for a smooth transition. Now that Tiffany has added pelvic dysfunction as a specialty (that girl is always learning something new!), we’ll also be working on an intro page to better direct newcomers their first time through.

If you’re interested in taking a look at my website, head on over to cheryl.terrel.us. I’m really pleased with it except for the little title text at the top. It looks perfect in Firefox and is somewhere around 10 pixels off in IE. Raise your hand if you’re surprised. That’s what I thought. If IE supported .png my life would be simple – I’d just do the text without a background, and it wouldn’t matter if one was slightly off from the other. Of course, if I didn’t want the text to be clickable AND I didn’t want the text to be in a nifty font, this also would not be a problem. We’ll see what happens.

I’ve also just had a tiny little epiphany for performing further edits to this page’s header. I may have mentioned, though I don’t recall, that I wanted to change the photo’s edges to look as though sand were falling onto the photo from the background sand. I’m going to try making a border using the background sand, adding a black border around that, using Gaussian blur (Gimp) on the black border to create a faded effect that crosses over the sand border, and then doing whatever it is that I’ve now forgotten how to do (the intertubes are a wonderful place!) and combining the images. Hopefully it will be exactly what I’m looking for. Stay tuned!

Until next time, don’t burn your candles on flammable surfaces.

Firefox & IE continued

Mozilla Firefox

Internet Explorer 7

I finally convinced everything to be a little more well behaved in both IE and Firefox. For reasons I may never understand, IE always seems to add some sort of unremovable padding to my divs that causes them not to nest the way I want them to. I had to shrink everything down a bit in order to get it to fit, but the change isn't too noticeable.

As I mentioned in the last post regarding this design, I wanted to see about having the menu stationary on the page, so that it moves when the page moves. I had some trouble pulling this off because of the layered effect I'm currently using. Once again, the primary difficulty lies in the differences between IE and Firefox. I could get one to work, but not the other. If I thought this were an important enough feature, I could run a Javascript ummm script at the top of the page to check for IE versus Firefox, then direct the browser to the appropriate CSS file, but it's not that important.

If you'll check out the little comics menu sitting just above the last comic boxes, you'll notice that IE isn't displaying the menu. That's fun, isn't it? I haven't looked into this problem yet, but I'm sure it will make me want to bang my head against the wall at least once or twice more.

I also added a white background to the footer in order to make that a bit more legible, as well as making it stationary, so that it's always at the bottom of the page. In this way, the menu is always accessible, and I don't have to make it cooperate with any other divs.

I'm having two issues with this, as you can see. The first is something of a perennial problem - centering a horizontal, unordered list. You've probably seen lots of centered menus on websites. I've used the technique in the past, actually, but not using an unordered list. The problem is unique to standards compliant coding, which tries to use code that makes sense - a menu is a list, so its code should reflect that. Unfortunately, lists don't like to be horizontal AND centered. I haven't done too much digging to solve my problem, but thus far all recommendations have failed. Right now I can solve the problem in Firefox OR IE, but not both. We'll see what I can do to fix it up before the next installment.

The second issue involves mouseover effects. My first menu turns yellow when a menu button is moused over. The footer menu shouldn't do this. The code tells it not to, but for whatever strange reason known only to the browser designers, this portion of my list code insists on duplicating itself. When I took the shot, I made sure my mouse was sitting over one of the menu items in the footer menu to display the problem. What I want is a simple underline to appear, without changing the background color or anything else. That, obviously, is not happening.

Following

For the sake of learning who my one and only reader is (I hope there's one of you anyways), I've added the Followers Gadget to my sidebar. Once you've added my blog to your list, Blogger will update my list and stick your profile photo in my sidebar. It's pretty nifty and gives people an opportunity to learn about your blog while perusing mine. It's also a nice colorful addition when there are many faces there, so it's aesthetically pleasing to boot!

The only drawback as far as I'm concerned is if you're using Google Reader already (which I am), then it adds another folder for the Blogger blogs that you follow. Those blogs are, of course, already in Google Reader (which is grrrrrrrrrrrreat!), so I now have them twice, in folders that I want them in. Not a big deal, just a little annoying. Maybe they'll eventually make that an option. Even with the annoyance, I clicked to follow blogs to let folks know I think their blogs rock enough to let them put my face on it.* =)

All that being said, if you'd like to follow this blog, just go to Regular Readers** on my sidebar and follow the instructions!

*Followers just makes me feel like I've got some sort of crazy messiah complex...

**You don't have to think my blog rocks, I just want you to stick your face on my blog. 0=)

Creative Commons Licensing

Image licensed by Wikimedia Commons

For a while now I've been using images for content that have Creative Commons Licensing - always those items that are free for use for non-commercial purposes, and, if I plan to edit them, free for editing. But I was never certain how to credit them, so, since most of my work is on the web, I've been crediting them in my blog posts whenever they were put to use.

Happily for me, my How To of the Day gadget for my iGoogle homepage has a how to for crediting such items.

In the upcoming weeks you'll see a few changes around my blogs as I try to work these credits into the design without making them invisible or especially eye-catching. I want them to be available for anyone looking for them, but not anything that anyone else will find especially noticeable. I'll be sure and point them out as I go along.

Great Googly Moogly!

As you know, I've been working on the Math Rox design. Since I always start by coding for FireFox, sometimes I don't notice until pretty late in the game that things are TOTALLY JACKED in Internet Explorer. Since I'm with only one computer (not counting my husband's Mac), I only get to see the painful destruction wreaked by IE7 rather than IE6 and earlier.

That being said, you've probably guessed that I just opened the design in IE for the first time. I think this is the most messed up anything has ever been! At least it gives me something to do and keeps me from wandering the Dutch streets, getting into trouble, right? Right.

So without further ado witness the devastating wrath of Microsoft:


Compare that to the lovely Firefox edition of the exact same code:


Impressive, ain't it?

Math Rox III

Things are looking a lot better, though they've changed a good bit. I decided the best thing to do with the boy would be to have him resting on the comic itself, though I'll have to see what I can do to keep the boxes from moving out from under him as soon as someone increases the font size. I think I'm also going to recolor his clothes. Who wears that??? I changed the background to just a sky blue, to give a sensible background to the boy and get rid of the cluttersome rocks.

I also had to find something to do with the girl besides stick her on top of a rock resting at the bottom of the screen. That works out fine for anyone with a wide screen like mine, but for most desktop monitors, she and the menu would wind up at the bottom of the screen, which is not optimal. To get around this, I hung her upside down from a pole. If you to to my website where most everything has been uploaded, you can change the width of your browser window to watch the pole increase in length. I didn't want to stick the main content all on the left side while leaving the right side completely empty. That would be a bit tacky. =) So in order to center the content, and keep the pole, I added another div to sit behind the logo flag, both of which are ordered using absolute positioning and the z-index property.

I'm tempted to have the girl and the menu stay in place if possible. I'm not sure yet if I can make a menu stick in the same place on the page, but I'm going to find out. =) The optimal back end (database) of the page doesn't and won't exist, so a bit of the coding that I would need to do to implement that won't be done, but I intend for it to be possible for someone who was crazy enough to take this layout and make lots and lots of comic pages, all of which actually link together and look the same.

I'm happy that the mental block I'd developed for this page has departed, this is turning out to be a much cleaner, less crowded layout than the original.