Small but Useful Improvements

With my Datatable project finished, I've been looking around for things to do. I decided to go back to my main site and just, look it over to see if I could find anywhere that could use .. improvement.

One things I found the left side navigation panel. When I first set it up as a dynamic expanding tree, I was just barely started to learn jQuery. I was also still struggling with some aspects of html, such as more advanced positioning methods. To get it to work, I made some compromises.

For example, the arrows that I use to indicate if a submenu is closed or not were created using an empty container with the background set as that image. But if a container is empty, it just doesn't appear. The easiest way to fix that is to put a space character in. It's invisible and the background image is then displayed. But if you drag select across the screen, you can see it. And, you need enough in a row to set the correct width for the container. This is what I had before: (  is the space character.)

<font class="inactive">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font>

I can fix this though, by changing the font tag to a general purpose div tag. By setting the div to display:block, I set it to display even if there is no content inside it. No spaces. The reason I didn't do this originally is that left to itself, anything that is displayed block pushes everything after it down a line. And the image of the arrow needs to be directly left of the text for that option. Enter float:left. If you set something to float, then the item that appears directly after it will not be below, but instead appear to the left or right. So using those two, I was able to change the above to:

<div class="inactive"></div>

Less code, plus the benefit of looking better to the user. Amazing what 4 months of learning can do.