JQuery Loves DOM

A.k.a. …okay, I fixed it.

I don’t think I’ll become a poet any time soon, but I needed to release some stress stemming from a few CSS/jQuery bugs I’ve been dealing with; thus, the strange and beautiful(?) post from yesterday. (FYI: I’ve got nothing against ice cream, it just doesn’t do much for me.)

But before I get into the bad, a few things have gone well. You may notice a fancy new menu on the left (or above, for those on smaller screens). Nothing really significant, just the standard tree menu you would find on many sites, but I wanted to make it from scratch for a few reasons:

  1. To brush up on my jQuery.
  2. Ditto for CSS flexboxes.
  3. So I can make changes later.

The third point being somewhat important since a lot of premade menus will work quite well, but there’s often little to no customization possible. And, while it looks pretty good now, I want to play around with it some more and make it look really slick.

Flexbox is honestly a godsend and, once you get your head around it, you’ll save so much time with any kind of layout imaginable. Using floats to align items can be a little quicker sometimes (e.g., I use it for right aligning thumbnail images in posts — as seen in the T-Shirts! article). But for anything even slightly more serious, flexbox is the much better long-term choice. (If your interested in learning, I can’t recommend CSS-Tricks’ guide highly enough.)

And I just really like jQuery/Javascript. However, there are a few quirks I ran across (i.e., now for the bad), which mostly contributed to yesterday’s madness. For example, jQuery is a stickler for proper DOM, specifically meaning that you can’t add open HTML tags (i.e., no closing tag) — that would be invalid DOM. So you can’t do this:

some-html.before('<div class="newDiv">')
later-html.after('</div>')

This would result in <div class="newDiv"></div> coming before some-html with no closing tag (i.e., </div>) ever appearing later. JQuery really, really wants to close all tags ASAP. It’s not a big deal though, it’s easy enough to work around by using .wrap() instead of .before() and .after(), but it’s still kind of a pain for larger blocks of code.

There are still a few other bugs and additions to take care of before I can consider the theme complete (for now), but I’ll be putting those off for a bit in favor of adding more content and working on some shirts/wallpapers/etc.

[Edit: Just now noticing I need to update the CSS style for <pre><code> blocks (like for the bit above). Maybe tomorrow.]

So, in the meantime, just please don’t set your window size to exactly 927 pixels wide. Or, at least, don’t keep it there. The site doesn’t like that.

Leave a Reply