Responsive grids on responsive images using JavaScript & CSS3: A Tale of Past Projects

The Problem: Why the Change?!

So back on March 13th this year, I did a blog post about a simple battleship game I made while learning with Head First’s JavaScript book.  Anyone who can recall also knows that this was quite possibly the ugliest, poorly synchronized, wreck of green I have ever seen.

On top of that, it wasn’t responsive, so when I’d pull it up on my cell phone thinking about adding AI to add some actual element of interest and challenge to it, I’d remember I couldn’t actually dink around with the 1024px background image at all in a reasonable manner on my cell.  The reasonable, time-sensitive solution would be to grab my laptop, but instead I decided to ignore time-sensitive solutions and instead update my website that no one but I use at this point.

After all, the fact that I’d link people to my questionably entertaining JavaScript game and they couldn’t get back to my homepage without editing the address bar was a bit of an issue.

This. Green. Black. Nothing like my homepage (not to say that’s a bad thing, since my homepage is white and gray and has the color inspiration of someone who enjoys staring at lightbulbs).

Superficial Improvements!

White and grey is apparently the color scheme I was rolling with, and there’s clearly no reason to change that.  Ever.  Grey and white has, as described above, has the artistic influence of staring at a lightbulb.  Clearly I should have it infect every portion of my website.

Consequently, I spent some quality time with photoshop to turn the green/black scheme to white/grey.  It’s simple, elegant, not green.

New layout!  Responsive and all!
This. White. Grey. Exactly like my homepage.

Coding the changes with CSS and JavaScript!

I had originally thought, “I can definitely use some magical functionality of CSS I’m unaware of to make it responsive!”  Turns out there isn’t a magical functionality, at least not that I could find, so I decided to use JavaScript and jQuery instead to query changes.  There were a few aspects of CSS that were helpful though.  For example, using the board as a background image and having it be responsive was slightly problematic, so instead I used it as a normal image and used the CSS attribute “z-index”.  This allows stacking of elements in different orders with smaller numbers being at the bottom and larger at the top.  Consequently, I stacked setting the board to have a z-index: -1 and the table’s z-index: 1.  This caused the board to act like a background image with the table placed above it.

Next, I used the width() and height() methods to query the image, setting the page to make this query whenever a resize occurs.  I then set the resulting size of the table and individual cells to be dependent on this height and width based on the proportion of the board it occupies.

One mistake I had made during this process was at one point I set the “height” CSS attribute for the image to 100% as well (rather than just “width”), which resulted in image warping and strange overlays at small sizes.  Most modern smart phones won’t get to that size, but I figured it’d be best to just avoid that all together.  Learning is fun!

Here’s a jsfiddle to see how it works and the actual code.  Feel free to resize the “results” section to see the army of ships move about.  All your guesses will be correct, sure, but it’ll take you 49 turns to defeat me!  Bwahahaha.  Ha.  …Ha.

The Results: It’s Prettier, Hooray!

It’s not hideous!  It’s responsive!  A resounding success!

Oh yeah, now I can dink around with it on my cell phone while contemplating adding features to actually make it interesting and perhaps even enjoyable to play.  Maybe even clicking guesses instead of typing them!  Perhaps a slightly stupid AI to compete with!  The possibilities.

More importantly, though, I’ve made it so my site overall flows together a lot better.  The Great Dalmuti has even been contained to the confines of the wrapper div, which is always a nice perk since it looks less ridiculous on larger screens where you have 12 tiny cards sprawled across the monitor in one and a half rows.  Don’t get me wrong, lots of UI improvements need to happen on both ends, but it does mesh in with the rest of the site better, and who doesn’t want that?!  Hooray.  Meshing!

Other Notes & Personal Progress

While I’m still continuing to work on The Great Dalmuti (you’ll notice it has taxes now and wild cards!), I’ve also started a couple courses on Coursera.  They’re the “Fundamentals of Computing” courses, though I’m doing them with a few alterations.  Rather than taking one at a time, I’ve decided to attempt stacking them all together.  I figure this won’t be too problematic since I’m adept in the ways of Google to help support gaps in knowledge, and so far that has been helpful.  My background in JavaScript has made picking up Python overall very simple, though there are some aspects of it I’m not as familiar with.

Then, naturally, I’m not paying for the certificate either since given the current attitude towards non-traditional education from businesses, I don’t think it actually has any value in a 1st world country.  Not to mention I’m just there to leech knowledge.  I won’t go into a long rant about the problems in traditional education with my former teacher hat on, but suffice it to say I think non-traditional education is a good use of resources and a good source of independent growth if you’re remotely disciplined.

I’m currently organizing a Seattle area (Eastside) study group if anyone would like to join us.

Shoulder still recovering.  Still have zero sense of body awareness.  One day, I will be body aware, just you wait!

Responsive grids on responsive images using JavaScript & CSS3: A Tale of Past Projects

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s