Show ^

Faulty's Blog

This blog will talk about programming in software, hardware and some electronics project that I've done in the past, current or in the future. I'll include some interesting personal content as well.

Wednesday, July 16, 2008

Blogger's Navigation Bar

One of the thing I first notice after I subscribed to Blogger is the Navigation Bar on top. Kinda obstructing, it seems. So, I figured there should be ways to remove that, and I have seen it done before on other blogs, but I really like to do this my way. Hopefully I didn't infringed any of Blogger's term and condition by doing that.

I fired up Firebug, a helpful extension that runs from within firefox to ease web developers of their jobs. After inspecting the page, I saw that the Navigation Bar has an id attach to it. It's call "navbar-iframe", and hence I coined the name Navigation Bar. I choose the highest level tag of the navbar, which is the iframe in this case, to avoid any leftover from appearing later. I did some test by executing some code in within Firebug (yes, you can do that if you haven't know) to hide the the navbar. Once the method is proven, I started with the coding.

WARNING: Don't do this just yet, best things always comes last. Unless you want to play around and learn some coding, then go ahead.

I head over to customize my Blogger under Layout->Edit HTML. Added a few things.
1. Right before </head><body>, I added a script section

<script type="text/javascript">
function remove_nbar()
document.getElementById('navbar-iframe').style.display = "none";

2. Then I added onLoad='remove_nbar() to the tag which should look like below:
<body onLoad='remove_nbar();'>

That's it, voila, it's that simple. Save the template, then preview, you'll see that the navbar will disappear, ... but ... after the whole page finish loading. It didn't really border me at first, as long as it works, who cares. Well, kinda like Malaysian mentality(sorry fellow Malaysians).

Much later, someone asked for the same solution in astahost, a free web hosting forum. I'm an active "hosted" member there, trying to post and earn some points to keep my free hosting alive. So it looks like another chance to show off and earn some points there. It didn't turn out to be a professional solution after all. Later, one of the fellow member(miCRoSCoPiC^eaRthLinG) suggested on using CSS to solve the problem. After a little bit of tinkering, finally got to a more "pro" solution.

I removed whatever that's added earlier. Then Look for
<div id='outer-wrapper'><div id='wrap2'>
and place the following code right after that:
<style type='text/css'>
#navbar-iframe { display: none; }

You might suggest, why not put it at the header section, much like the script before. Well, the style declaration of the navbar is after the header, so whatever before it will be overridden. Therefore it's best to put it right after the navbar, such that it will override the original declaration and hide the navbar even before the page finished loading.

That solution stays for quite a few weeks, until I started to post my first blog today. Well, I found another problem. I can't click on the "Customize" link when I went to my blog, it's hid away together with the navbar. It's a bit troublesome resorting to the dashboard, then edit profile.....

So I figured, why not, make it one more step further and ever. I kept the style declaration, then added the following script at the header section, like before (again).
<script type='text/javascript'>
function show_navbar()
document.getElementById('navbar-iframe').style.display = "block";
document.getElementById('hide_navbar_link').style.display = "block";
document.getElementById('show_navbar_link').style.display = "none";
function hide_navbar()
document.getElementById('navbar-iframe').style.display = "none";
document.getElementById('show_navbar_link').style.display = "block";
document.getElementById('hide_navbar_link').style.display = "none";

Then add these 2 links right after the <body> tag
<a href='javascript:show_navbar();' id='show_navbar_link' style='position: absolute; top: 0px; left: 10px;color: #000000; font-weight: bold;'>Show ^</a>
<a href='javascript:hide_navbar();' id='hide_navbar_link' style='position: absolute; top: 30px; left: 10px;color: #000000; font-weight: bold; display:none;'>Hide ^</a>

Should be be getting what it is showing in my page right now. Do remember that you still need the above style declaration to automatically hide the navbar. I configured the position of the link to 'absolute' to make it float and stay on top of other things. The floating link allows you to show or hide the navbar as you command. Cool?

First Post

Hi All,

This is my first blog post (ever), I've never did any blog before, so hopefully this will keep going on and on. I really wish my blog could turn out to be as popular (or at least half as popular) as those in my favourite list.

I really like the idea of blogging, as most of the time, I'm always talking to myself in my mind, as if I'm telling a story to someone who is sitting next to me. There's a lot of things in my life that I would like to share with people who might be interested. Well, I can share it with my friends, but the problem is that not all of them has the same interest as me, so my story might turn out to be boring. Most of the time, I would have to filter what I would want to share with my friends as I don't want to bored them to death. It turn out to be quite tiring considering I have to try to remember what they like and dislike, and always pay attention to whether they like the story that I'm telling them, and so on, so forth. Some of you might think that's kind of weird, but to me, it's important that I always keep my friends entertained.

You might have guess that I'm not a good PR person, yes indeed. I'm a geek actually. I hand pick my close friends, so basically I can count all of them with all my fingers. Life might have seems to be boring for me, but to me it's not. Some of my friends might consider me as snobbish. I don't really mind (seems like another snobbish remark :P ). More importantly, I only care for those who care for me.

So, with all these in mind, I think blogging might be a good choice for me to express myself, while not having to pay attention to who dislike my story and what not. Those who are interested will continue to enjoy this trip from me as a tour guide, and from time to time, they can give some feedback which I could take as advise to continue providing a good story telling service.

I'm not going to dedicate this blog as my personal story only. I'd be covering most of it to my hobbies such as electronics, hardware programming, software programming, books, movies and diy stuffs.

So, hopefully I do find someone from around the world who share the same interest as I do.