Slidebars creates extra space in certain circumstances

[nickpish]

Hi Adam-- I've seen a couple threads related to the issue I'm experiencing, but I haven't been able to figure out a solution in my case. In certain circumstances, I'm seeing additional space created after the footer in my page that corresponds to the margin I'm adding to the main #content div in my fixed nav bar layout. You can visit my beta site here.

I'm using Slidebars throughout the entire site, and interestingly the issue does not occur in the main artist pages (with the image sliders), however, if you visit one of the main sectional pages, i.e. "artists" or "exhibitions" you'll notice the extra space after the footer that prompts a vertical scrollbar to appear. I see that if I remove my top margin in div#content the issue goes away, but I would like to preserve the margin if possible as opposed to using padding.

I'm not sure why it's happening in one case and not the other-- do you know how I might go about addressing this issue?

Thanks!

p.s. I'm using the current distribution release, i.e. 0.9.4

[adchsm]

Hey,

Yeah i've been experiencing some height issues for a while.

This should be fixed in the upcoming 0.10 version. If your up for testing, you can download the master, and try the development version. Or if your open slidebars.js 0.9.4 on line 114 and

replace this:

$site.css('minHeight', $('body').height() + 'px');

with this:

$site.css('minHeight', $('html').height() + 'px');

If you could let me know if that works for you, that would be great.

Thanks, Adam

[nickpish]

Hi Adam-- thanks for your response; I tried the edit you mentioned and unfortunately I'm still experiencing the issue. The main thing that baffles me is why it's happening in one instance and not in another...

Perhaps I'll give 0.10 a shot-- in the upgrade, would I need to change anything in my markup, or should I just be able to drop in the new CSS & JS files?

[adchsm]

Hmm rather than setting a margin on the top of your content, does it happen if you set a padding on the top of #sb-site?

[nickpish]

hm, I will give that a shot; I also saw in a different thread someone suggesting the addition of a negative margin to offset the extra space; I'll try a couple approaches and report back.

Also-- not sure if anyone else has reported this: I've noticed in certain circumstances that opening a submenu within slidebars causes the primary page being viewed to scroll to the top, instead of staying in the position in view prior to initiating the menu. Have you experienced this? For instance, I'm seeing this occur on this page both on the desktop and on my Android phone (i.e. when clicking the "artists" slidebars submenu, the main page at right jumps to the top.)

[adchsm]

Ok cool, let me know how you get on with that.

I was about to say your toggle jumping back upto the top may be due to a hashtag in the link, but the Slidebars website has the same and seems to work ok, so I'm not sure why. I dropped the Slidebars theme because there were too many errors with it, and I didn't have time to fix it or support it. Sorry about that.

Thanks, Adam

[nickpish]

Hi Adam, thanks for your response; when you say the Slidebars "theme" are you referring in particular to the submenus? I ask because I believe that's the only modification I made to the CSS (with the jQuery click function) that comes built-in with 0.9.4; do you think it's the hashtag link that's creating the issue? If so, I can just find a different way to implement the drop-down functionality.

[adchsm]

By the Slidebars theme, I mean the menus, submenus and js. This came as separate files: slidebars-theme.css and slidebars-theme.js with version 0.8. You seem to be using bits of in your stylesheets and run this when initating slidebars, which was from slidebars-theme.js.

$('.sb-toggle-submenu').off('click').on('click', function() {
 $submenu = $(this).parent().children('.sb-submenu');
 $(this).add($submenu).toggleClass('sb-submenu-active'); // Toggle active class.
  if ($submenu.hasClass('sb-submenu-active')) {
   $submenu.slideDown(200);
  } else {
   $submenu.slideUp(200);
  }
}); 

Unfortunately this was dropped from 0.9 as it was buggy, and I didn't have time to fix it or support it.

It could be from an empty hash, so perhaps you could use the toggle class in a span instead of a link.

[nickpish]

Ah ok, now I see; thanks for the clarification, Adam!