Hi jmburnz!

I placed a button in my main-content to show/hide the sidebar-left div located to the left of the main-content div. Here's the code:

$(document).ready(function(){ $('#butShowHide').click(function() { $('#sidebar-left').toggle(); }); });

Show/Hide Legend

The effect works but the issue is when the sidebar-left div disappears, I want the main-content div to expand its width over where the sidebar-left div just was. So in other words, I want the main-content div to stretch across the whole page when the sidebar-left div is hidden. This does not happen in the subtheme.. the sidebar-left div disappears but the main-content div stays in place. When I switch to Garland theme, however, the main-content div does slide over. Any ideas why I'm not getting it to slide in my Genesis subtheme?

Thanks for your help :)

Comments

mxer269’s picture

mxer269 CreditAttribution: mxer269 commented

sorry I didnt add the code to the post correctly.

see http://drupalbin.com/10959

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

the layout method is different to garland, because Genesis is content source ordered and garland is not, you need to do more, addClass or similar to the #container to override the left margin on .content-inner.

mxer269’s picture

mxer269 CreditAttribution: mxer269 commented

thanks for the suggestion! got it to work.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

well how about sharing your solution, I helped you (many times I believe), so how about helping out others who might be interested in this feature... glad you got it to work, but please make a habit of sharing back the solution.

mxer269’s picture

mxer269 CreditAttribution: mxer269 commented

Hi, here's the code that made it work.

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
   var clicked=true;
$("#butShowHide").click(function(){
	if(clicked){
                $('#sidebar-left').toggle();
		$("#container .content-inner").css("margin-left","0px");
		clicked=false;
	}else{
                $('#sidebar-left').toggle();
		$("#container .content-inner").css("margin-left","180px");	
		clicked=true;
	}
});
});
</script>   
<td align="right" colspan="3" style='text-align:right;'>
<input type="button" id="butShowHide" value="Map Legend" />

A question I also have related to this... how whats the correct div id for the four column gpanel?

Thanks again!

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Thanks for sharing dude, that may well come in helpful to others!

By default Gpanels don't have id's, basically so you can add your own if you want to. I add my own and usually name them after what they are being used for, such as #footer-menus or something like that.

mxer269’s picture

mxer269 CreditAttribution: mxer269 commented

glad I might be of help for a change :)!

For the Gpanels question.. I used firebug to determine the div id which it's telling me is .four-col-25 gpanel clear-block and I can't seem to get it working. I've tried:

.four-col-25 gpanel clear-block {}
.four-col-25 gpanel {}
#four-col-25 gpanel clear-block {}
#four-col-25 gpanel {}
.four-col-25 gpanel section-1 {}
.four-col-25 gpanel section-2 {}
#four-col-25 gpanel section-1 {}
#four-col-25 gpanel section-2 {}

and so forth.

I'm a little confused by your response. Do I need to declare the div somewhere else other than page.css?

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

CSS 101:

Classes are preceded by a . (period).
id's are preceded by a # (pound sign).

The four column Gpanel only uses classes, this is because its possible to print a Gpanel more than once on a page, and to have valid CSS you can only print an id once per page (id must all be unique on the page).

The full set of classes for the 4 column are as follows:

/* 4 column */
.four-col-25 {}
.four-col-25 .region {}
.four-col-25 .region .inner {}
.four-col-25 .section-1 {}
.four-col-25 .section-2 {}
.four-col-25 .col-1 {}
.four-col-25 .col-2 {}
.four-col-25 .col-3 {}
.four-col-25 .col-4 {}
.four-col-25 .col-1 .inner {}
.four-col-25 .col-2 .inner {}
.four-col-25 .col-3 .inner {}
.four-col-25 .col-4 .inner {}

You would only use the .gpanel class if you wanted to target ALL gpanels, which is nice to be able to do, but probably an edge case.

If you wanted more granular control over the styles you *could* add an id, such as:

<!--//   Four column Gpanel   //-->
<?php if ($four_col_first or $four_col_second or $four_col_third or $four_col_fourth): ?>
  <div id="footer-menus" class="four-col-25 gpanel clear-block">
    <div class="section-1">
     ... rest of Gpanel code....

As you can see I have manually inserted id="footer-menus", and in my stylesheet you would use #footer-menus {}.

Styling the actual Gpanel can be useful, however I tend to find myself styling the actual blocks inside the Gpanel, so I use selectors more along the lines of:


.four-col-25 .col-1 .block {}

mxer269’s picture

mxer269 CreditAttribution: mxer269 commented

thanks for the thorough explanation! I was able to adjust the 4 column gpanel to how I wanted it. At first, I was trying to add the code to page.css.. but once I saw the four-col-25 code in layout.css it helped me a lot. thanks again for your help.