Hiding page columns on the fly with javascript

Hi,

my boonex site has 3 columns created with the admin page editor. I would like to add a small button on the left and right columns, so when clicked it hides/shows the column to give more space to the central column.

I've seen the 3 columns are already enclosed inside a "div" tag (example: DIV#page_block_314) , so via javascript should be possible to hide the column with something like:

<script>page_block_314.style.display='none';</script>

The problem is the central column has a width=50% tag, which is probably added by the page editor itself and so even with the two other columns hidden, it stays at the former size.

Did any of you create something like this or do you have a suggestion/example how to do it?

Thanks,
  Luca.

I am liking the idea. Need jquery for this.

EDIT: Are you looking for something like this? http://www.boonexdolphin.com

Interesting....ummmm. I thought BoonexExpert has designed something like this recently? Or is that a different beast?

I guess he wants it on the fly where user can slide the columns...

nice one Prashank25 ...

Add a button or any element with id set to "hide_left" and "hide_right".

and add this jquery code anywhere in the page, like page_1.html if only needed for index page or _sub_header.html for site wide or in the block itself.

<script type="text/javascript">

$(document).ready(function(){

$('#hide_left').click(function(){

firstDiv=$('.page_column:eq(0)');

secondDiv=$('.page_column:eq(1)');

firstDivWidth= firstDiv.width();

firstDiv.animate({width: '0px'},

{duration: 2000, queue: false});

secondDiv.animate({width: secondDiv.width() + firstDivWidth},

{duration: 2000, queue: false});

});

$('#hide_right').click(function(){

lastDiv=$('.page_column:eq(2)');

secondDiv=$('.page_column:eq(1)');

lastDivWidth= lastDiv.width();

lastDiv.animate({width: '0px'},

{duration: 2000, queue: true});

secondDiv.animate({width: secondDiv.width() + lastDivWidth},

{duration: 2000, queue: true});

});

});

</script>

Clear cache if edited a file and done :D

 er....you asked for download before so i posted it lol

 yes, but then i just copied your code ;)

 cool 

I think the best result you can get by pasting this code at very bottom of your site, like in _footer.html

Actually it's good idea to put javascripts at the end of the page, so all information part of the page will be loaded faster, then scripts will be loaded after.

I think its a small piece of code that can't effect page rendering even near noticeable. And it will be served with all html and not separate file. Separate file blocks page rendering in IE specially (you guessed it right :P). But putting it in _footer.html will also not hurt :D, So, good advise. Thanks

Wow, looks very similar to what I wanted!! Do you have a way to then keep a button to make the column visibile again?

 Put the button somewhere else? Where ever you like.

 EDIT: er....sorry i understood your question wrong. I will look into this to allow to open the column too.

Ok, I will try that shortly on my installation. I guess I will have to make it somehow permanent in a cookie, so if you have hidden the left column and you reload the page it remains hidden, until you press the show button again. This will ensure people can navigate with the layout they want and don't have to press the button at every page. Do you have anything in mind for that?

Added 2 cookies to store the state of the left and right columns.

Added option to open and close the columns.

Take a look here http://www.boonexdolphin.com/

If it meets your requirement than only i will post the code here.

Gorgeous!! That's definitely a big help, you've done 90% of what I needed!! Please post the code, including the declaration of the buttons. What I will add on top of it is to change the content of the button based on the state. In my case it will most likely be a small arrow pic pointing to the left for the left column, then when you click it, it changes to a small arrow pointing to the right. I think should not be too hard. Thanks a lot for your help!

Here a file is attached with all code needed. Good Luck 

Although I dont have a use for this at the moment, I must say Prashank, that you are a freakin genius. These small pieces of code and help that you provide are such a contribution to this community.

Thanks for all that you do for us.

NAthan : )

Happy to help