11. Sidebar Toggle

11. Sidebar Toggle
(available for all boards... i think.)

This tutorial will allow you to add a button or image above your sidebar which when clicked will either hide or show the sidebar.
Thus allowing your users to choose whether or not they want they want the sidebar on the screen.

Its a fairly simple script for a fairly simple task but i think it shows some great techniques for you to learn. And since this is a learning forum i will be explaining parts of the script.

Code:


var copyrightNotice='Sidebar toggling script for forumotion boards. Copyright by LGforum, All Rights Reserved. Use and  modification of this script is not allowed without this entire copyright notice in the original, copied, or modified script. No distribution without consent.';
$(function() {
  var hideimg="URL OF IMAGE TO CLICK TO HIDE THE SIDEBAR";
  var showimg="URL OF IMAGE TO CLICK TO SHOW THE SIDEBAR";
  var x=$('#left');
  x.before('<div class="ToggleSide"><img class="toggleside" src="'+showimg+'" style="cursor:pointer;"><img class="toggleside" src="'+hideimg+'" style="display: none;cursor:pointer;"></div>');
  var toggleimg=$('.toggleside');
  var c=my_getcookie('side');
 if (c=='no') { $(x).hide(); $(toggleimg[1]).show(); $(toggleimg[0]).hide();
 } else { $(x).show(); }
 $('.ToggleSide').click(function() {
    $(x).toggle(); $('.toggleside').toggle();
    if (c=='no'){ c='yes' } else { c='no' }
    my_setcookie('side',c,true);
 });
});


The script first off is all encased within a self executing function. And that explains the first line and the last line.
The next 2 lines is where you'll need to put the URL's of your images. And thats what these two lines do, they hold the URL of your images inside variables called 'hideimg' and 'showimg'.

The next line shows a variable called 'x', which holds the the element with an ID of 'left'. This is the left sidebar. (if you have a right sidebar change '#left' to '#right')

The line after that adds in the necessary HTML before the sidebar.
Skipping ahead, variable 'c' gets the value of a cookie called 'side' which we will be setting to remember whether or not the user has the sidebar open or closed.
After checking the value of the cookie, it does the necessary changes depending on whether the users want the sidebar hidden or not. If its hidden it will hide the sidebar, and change the image to your 'Show Image'.

The next chunk, sets the click function of the images. It will toggle the sidebar and toggle the value of the cookie too, and then sets the cookie again.

The most important parts of this script are the cookie functions.
These are two of the most useful functions within the forumotion system script.
my_setcookie(name,value,permanent); - sets a cookie. 'name' is the name of the cookie, 'value' is the value of the cookie, and 'permanent' is whether or not you want the cookie to be permanent or just a session cookie.

my_getcookie(name); - returns the value of the cookie. 'name' is the name of the cookie to return obviously.

I hope you can look through the script and understand how it works.

What you can do with it:
You could change the HTML, so it isn't images but instead text or a button. You could duplicate the code to have this on both of your sidebars.

I love how you explain things and not just throw it in our face! very nice for learning.

So you want it that if a user closes it, and they refresh the page, the sidebar is open again?

Thats what this does. When they visit the site it will be open.
It may appear to always be closed for you because if you close it, it sets a cookie and remembers you have closed it. But if they haven't closed it, it won't be closed and they will have that choice

I just installed this today, but I have a question.

It seems that, although it successfully hides the sidebar, it still leaves a blank space there where the sidebar was? Is there any way to have the sidebar disappear and also to increase the width of the main central "column" so that the main forum view becomes wider and takes up the space where the sidebar used to be?

I don't think I am even going to use this feature, because I love the sidebar, but I'm just curious if this is possible.

The code will do that. If it doesn't then that means in your CSS you must have the width of the main section (everything not in the sidebar) set to a certain value.

Oh, that's interesting. I just looked through my CSS, and it doesn't look like the width of the main section is modified or set to anything.

The only thing I can think of is that I changed the default width of the entire page from the default of 98% (like it has it in the control panel) to 100%. Would that have affected anything?

If I can get this to work, then I might as well install the feature. It might be useful for some users.

May i take a look at your forum so i can try and find whatever is causing your main area to stay the same width?

Yes. Thanks for offering. Also, you'll be able to see my new "This post has been thanked!" bar that I created using your tutorial! I modified the width to 50%, and I think it looks better that way.

But let me give you the login details via PM, because it's a private closed forum.

I'll give you an admin account.

Also, if you look at my javascript area, the script is already there for toggling the sidebar (I used an ugle "sample" image for toggling, but I'll change that later). You just have to activate the script by applying it to "topics". Maybe I'll do that before you even log in.

The script at FM works better simply because this script have to insert html snippet before #left which DO creates a timelag
http://help.forumotion.com/t78898-show-hide-widgets-script