With the transition to the complete new blog design I initially had to leave away some features which I had on my old blog layout. One which I personally found most important was the ability to
extend the blog post content area s.t. the full width of the blog can be used for reading the post.
I experimented a bit with jQuery which made it extremely easy to add the kind of effects I needed. What I had to do is to just include the jQuery script which can be downloaded from the
official jQuery site. The remaining could be solved with these lines of jQuery enhanced JavaScript.
<script type="text/javascript">
var isHidden = false;
$("#resizeBar").click(function(){
if(isHidden){
$("#sidebar-column").fadeIn("slow");
isHidden = false;
}else{
$("#sidebar-column").fadeOut("slow");
isHidden = true;
}
});
</script>
Click on the small gray bar that separates the (white) post content area from the navigation area to see the result :)
I tested the feature on Safari, Chrome, Firefox and Internet Explorer and it works on all of them. However I found a strange behavior in IE7 (not related to this new feature here). I opened the blog on IE7 and strangely the small bar which separates the two areas was not shown, the navigation area was pressed on the left corner and the main content area where the posts are written filled more than the available space on the web-page s.t. a horizontal scrollbar appeared on the page (really ugly). Initially I though of a CSS incompatibility but then I notice an interesting thing. When you load this blog in IE7 till it's fully rendered, then you open another tab, browse a bit around and then you switch back to the tab with my blog loaded...and suprise...the blog is rendered perfectly as it should be. It's really strange, it seems as IE7 takes a bit till it renders the entire CSS completely?? Does anyone have a suggestion?
Questions? Thoughts? Hit me up
on Twitter
