Hide that sidebar
A few years back I can remember visiting Sitepoint and reading an article about…something. What I distinctly remember is that I was able to hide the sidebar so that I wouldn’t be distracted by other page elements floating next to the content I was trying to focus on.
After discovering how cool that actually was, I quickly began trying to dig up how it was done but to my surprise - I came up empty handed when looking through their source.
Well, years later, my code hunting techniques have vastly improved…not to mention my code writing ;) With that said, here is a quick copy & paste job for you to play with (directly from this site)
For a quick demo of this code snippet, simply click the left icon directly above the sidebar of this page.
toggle sidebar (JavaScript)
/* used in conjuction with both the dollar $() function and addEvent */
// addEvent() found @ http://www.dustindiaz.com/rock-solid-addevent/
// $() found @ http://www.dustindiaz.com/top-ten-javascript
var togBar = {
bar : null,
nest : null,
init : function() {
this.bar = $('sideBar');
this.nest = document.createElement('div');
this.nest.id = 'toggler';
this.run();
},
run : function() {
$('body').appendChild(this.nest);
this.nest.innerHTML = '<a id="open" title="Open Sidebar">Show Sidebar</a>';
this.nest.innerHTML += '<a id="closed" title="Hide Sidebar">Hide Sidebar</a>';
this.togglers();
},
togglers : function() {
addEvent($('open'),'click',this.opener);
addEvent($('closed'),'click',this.closer);
},
opener : function() {
togBar.bar.className = 'opened';
},
closer : function() {
togBar.bar.className = 'closed';
}
};
function commonListeners() {
togBar.init();
}
addEvent(window,'load',commonListeners);CSS for Toggling
div#sideBar.opened { display:block; }
div#sideBar.closed { display:none; }What it’s doing
First you’ll notice that we’re appending the open and close links to the document with JavaScript. This is mainly so that we don’t have these links just lying around on our document that when you click them - do nothing. In other words, if they make it to the page, the user most likely has JavaScript enabled.
Next you can see in the CSS we have defined two classes. ‘opened’ simply has display:block; and ‘closed’ is display:none; appropriately.
Finally, we assign an event to each link that runs the togBar.opener method, and the togBar.closer method which simply swap out the className’s. That’s it! Easy sideBar toggling with unobtrusive JavaScript
Todays question and book information
The winner of today’s contest will receive a copy of Web Standards Solutions by Dan Cederholm.
Give me a match on Google Fights that will make me laugh.
December 22nd, 2005 at 7:19 pm
I got a few:
1) Mike Tyson vs. Vincent Van Gogh
2) Web 2.0 vs. Web 1.1
3) Steven Hawking vs. Spock
4) Starbucks vs. Colombian Farmer Union
December 22nd, 2005 at 7:19 pm
December 22nd, 2005 at 7:38 pm
Jesus Christ vs Cheese and Rice
Dustin Diaz vs Cameron Diaz
little kids vs Michael Jackson
December 22nd, 2005 at 10:59 pm
Cool - maybe even better if you save the hidden state in cookie so it’s remembered from page to page?
I’ve already got that book, but here goes…
December 22nd, 2005 at 11:03 pm
Yea Tony,
maybe the next version will take advantage of the cookie functions I described in my top ten list. This wouldn’t really be that difficult to do with them.
December 22nd, 2005 at 11:10 pm
Hey, I like how you can open and close the code boxes as well…as that new, or have I just never noticed that?
December 22nd, 2005 at 11:39 pm
Dating myself:
Crass:
My personal feelings are mirrored with:
December 23rd, 2005 at 2:11 am
After reading the UDASS article, I couldn’t resist:
December 23rd, 2005 at 6:25 am
Holy crap! The hide sidebar link crashed my Firefox 1.5 :\
December 23rd, 2005 at 8:26 am
[...] st 2005
Hide Your Side Bar
Dustin Diaz has a really cool tutorial on his site to allow a show/hide function for your sidebar. It’s just a little Java [...]
December 23rd, 2005 at 10:36 am
While I think the actual function itself is pretty decent, what I’m most impressed by is your elegant OO-JS. Awesomely done :)
December 23rd, 2005 at 11:49 am
These are some funny matchups. Way to go guys.
@Espen: It doesn’t appear that anyone else had that problem. I’m sure someone would have reported it by now seeing as how I’ve had that sideBar toggle for quite some time now - and most of my user base is browsing on multiple versions Firefox.
@Nate: Hey thanks man. I’m hoping that’s what folks are picking up with these. “Awesomely” is an awesome word ;)
December 23rd, 2005 at 12:11 pm
Don’t speak so soon Dustin…
Espen, I replied before giving i a whirl just again. Then I received an email from someone else also telling me that it crashed their browser.
Sure enough I had to try it again. Whada ya know. It crashed. Why? This is news to me. It’s been working every day until today…so thinking back on it, I didn’t upgrade firefox until last night. I’m wondering if there’s a bug in the browser. This totally used to work :o
December 23rd, 2005 at 12:29 pm
One too many slashes in that source comment (URI) to your add event article. It’s addevent not add-event.
December 23rd, 2005 at 12:40 pm
The homeless indeed are less than the rich Dustin:
http://www.googlefight.com/index.php?lang=en_GB&word1=homeless&word2=rich
December 23rd, 2005 at 1:00 pm
Alrighty, there seemed to have been an issue with Element.addClassname and Element.removeClassname. In my source I simply just used the .className property. That’s what I get for trying to take advantage of Prototype.js… now I’m wondering if it’s a bug in that.
December 24th, 2005 at 3:41 pm
Nice tutorial. It’s pretty cool that everything can be pre-styled, allowing for just a simple toggle. I’ve read Web Standards Solutions already, so I’m not looking to win a book here, but I just wanted to chime in with my Google Fight. This is one I often throw in Jonathan’s face, though it really has no bearing whatsoever:
Snook vs. Smith - A Deathmatch
December 24th, 2005 at 4:49 pm
Heh. That’s a good one.
You know, I’m trying this on another computer now…and it’s still crashing firefox. I’m really concerned now…
December 24th, 2005 at 6:52 pm
I’m on FF 1.5 and it’s not crashing here.
December 25th, 2005 at 11:10 am
I am also using FF 1.5 and it isn’t crashing for me either, although it will not toggle back visible. Maybe its just me or it’s not supposed to. Either way, very cool Dustin I can think of many uses for this!
December 25th, 2005 at 9:47 pm
I’m using FF 1.5 and it crashes.
December 27th, 2005 at 1:44 am
My 1.5 crashed! I’m really interested in figuring out why…
December 27th, 2005 at 9:51 am
Crashes my FF 1.5 too, and I don’t know why…
December 28th, 2005 at 2:15 am
Dave Winer vs Adam Curry: c’mon Dave, kick, punch, punch, come on! Put him on the ground!
December 28th, 2005 at 9:07 am
Same here… FF 1.5 and it crashes
December 28th, 2005 at 9:08 pm
Right folks. We got it. And yea, we got it. No more need to confirm that it crashes FF1.5.
There’s something really strange about this code because it works for some - and not others. The code is flawless - and if anything, it should throw a console error.
I’m going to play with it and see if it’s caused by any special reserved words or somethin’.
December 28th, 2005 at 9:10 pm
Oh. and btw, it works totally fine after rolling back to FF1.0. Weird.
January 4th, 2006 at 1:57 pm
Molly vs The Disney Store
You know who we’re rooting for! :-)
January 9th, 2006 at 3:34 pm
January 13th, 2006 at 12:23 am
[...] s that are in their character. 9) Hide that Sidebar Give a great match on Googlefight.com Dante http://pianoman.wordpress.com/ Dante mentioned Me vs Camer [...]