I spent the day tearing my hair out. It doesn’t matter too much, I don’t need hair anyway. As with most things in this world, the simple solution is often the best. Unfortunately sometimes the simple solution doesn’t pop into your head until you have spent days exhausting more elaborate solutions. The latter has been the case so far with the Gideros website remake, especially with the API Reference that I keep swearing is working, and then it turns out there is some strange case where my tricky code fails and it all falls over on it’s virtual face.
So resizing columns has been driving me crazy. As the user drags the resizing handle about I get the windows width, do some funny calculations, and then set the right columns width, the left columns width, and the folder trees width. The sticky part is with the folder tree because they can have content that goes outside the left column. So that required recalculating the left column with variables for scroll bars and such. This worked mostly but in the end did not work consistently 😦
So about an hour ago I had a crazy idea. When the user is dragging the handle there is no need to even see the scroll bar in the left column so why not just turn it off with CSS (overflow-y:hidden;) and then when the mouse is released, turn it back on (overflow-y:scroll;). And you know what? It just works and magically does all the hard stuff for me!. There are no strange scrolling bugs at all just with these two lines of code. OMFSW!!!!
That has made the code for the API Reference smaller and cleaner which is nice. I also mashed up some code that resizes the columns and stuff when the user resizes the browser window. Currently this seems to be working as intended.. fingers crossed 😉
I also had fun with some of the API documents themselves. It turns out that if you use < and > characters in HTML the browser starts to process the next text as HTML instructions, doh! It took a long time to realize this and the solution was to replace all occurrences of < with < and > with >. This works nicely and the documents are looking mighty fine.
I tweaked the look and feel of the API Reference page so it looks nicer and now I’m pretty much thinking it’s complete. A good days work I think, and it seems to work in FireFox, Chrome, and IE 11 🙂