Toggle sidebar with a click on the white space

[hkalant]

In order to expand/hide the sidebar you need to click on the icon. How can I hide the sidebar by clicking on the white space and not necessarily on the icon?

For example: http://benplum.com/

Thanks.

[laymonk]

On your site, you have an additional issue: with the side-bar expanded, the scroll bar vanishes, and so you cannot scroll down in the displayed post.

At first I thought this might have had something to do with your switching layout to layout-reverse. But I just tested this on my local install, and that problem is not there.

So, I reckon this is to do with the ordering of your markup or something you have introduced .. the base lanyon config is not displaying this behaviour

[laymonk]

OK, using firebug light, what I can see is that your shifter-page div has enclosed the shifter-navigation div .. I suspect this is not what you are seeking to do. Try and seperate the two divs ..

Disclaimer: I have not looked thoroughly through the rest of the setup, so I could be wide off the mark.

[hkalant]

You are off topic I guess for two reasons:

1. You are not making a suggestion on my issue (how to click on the white space and hide the sidebar)
2. benplum.com is not my website. It is just an example I found of what I would like to do, not how I would like to do it.

For the record this is my blog: http://hkalant.github.io/

Thanks.

[laymonk]

OK .. it was not clear from your post.

was just trying to offer what I thought was useful input .. the site you
want to emulate is broken though and what you think is a feature is
probably a result of that.

On 8 June 2014 00:46, Harry Kalantzis notifications@github.com wrote:

You are off topic I guess for two reasons:

1. You are not making a suggestion on my issue (how to click on the
   white space and hide the sidebar)
2. benplum.com is not my website. It is just an example I found of
   what I would like to do, not how I would like to do it.

For the record this is my blog: http://hkalant.github.io/

Thanks.

—
Reply to this email directly or view it on GitHub
#42 (comment).

[hkalant]

Let's see another more popular website: https://medium.com/
which was built by great designers and developers.

When the sidebar is expanded (click the 'M' icon), the scroll bar vanishes as well. It's hard believe this is a bug. Because when the sidebar is being expanded, it pushes the scroll bar, which is actually a part of the website, not a built-in browser addition.

Anyway, I don't really care if the scroll-bar vanishes. I just want to click anywhere on the site to hide the sidebar. That's all.

Thanks.

[laymonk]

Yeah, I have understood what you mean. The intention seems to just be to
expand the side-bar primarily to be able to make a navigation choice and
nothing else ..

If you are determined to understand how this is implemented, tools like
firebug/firebug-lite will help you quickly figure it out.

The feature that actually allows the ability to do this is a new CSS3
feature called transition, and it seems fairly straight-forward to .. the
more challenging thing is getting that to play nice with the rest of your
site's layout, and firebug can help you see how a given site is using it
(at least you get a clear view of the site structure) and can base your own
design or adjustments on that

On 8 June 2014 13:07, Harry Kalantzis notifications@github.com wrote:

Let's see another more popular website: https://medium.com/
which was built by great designers and developers.

When the sidebar is expanded (click the 'M' icon), the scroll bar vanishes
as well. It's hard believe this is a bug. Because when the sidebar is being
expanded, it pushes the scroll bar, which is actually a part of the
website, not a built-in browser addition.

Anyway, I don't really care if the scroll-bar vanishes. I just want to
click anywhere on the site to hide the sidebar. That's all.

Thanks.

—
Reply to this email directly or view it on GitHub
#42 (comment).

[hnrch02]

If you don't care too much about mobile, you can use this snippet:

var $checkbox = $('#sidebar-checkbox');

$(document).on('click', function(e) {
  var $target = $(e.target);

  if(!$checkbox.prop('checked') ||
     $target.closest('#sidebar').length ||
     $target.is('#sidebar-checkbox, .sidebar-toggle')) return;

  $checkbox.prop('checked', false);
});

If you want this to properly work on mobile you'll need to insert a backdrop and then listen for touchstarts on that element. See for instance the implementation in Bootstrap.

[mdo]

Yeah, I don't know if I'll be adding anything to account for negative space clicks. This is meant to be as simple as possible, using only HTML and CSS. As such, this kind of behavior is intentional and purposefully limiting.

[mdo]

I'd be open to adding a non-jQuery snippet of JS to the code to make this possible, if it's not too much overhead mind you.

[hkalant]

that would be great. thanks.

[hnrch02]

Here you go:

(function(document) {
  var toggle = document.querySelector('.sidebar-toggle');
  var sidebar = document.querySelector('#sidebar');
  var checkbox = document.querySelector('#sidebar-checkbox');

  document.addEventListener('click', function(e) {
    var target = e.target;

    if(!checkbox.checked ||
       sidebar.contains(target) ||
       (target === checkbox || target === toggle)) return;

    checkbox.checked = false;
  }, false);
})(document);

This should work everywhere, except IE < 9

(FYI: I used jQuery in my previous snippet, because I saw that @hkalant's site already uses jQuery.)

[hnrch02]

@mdo Ping.

[mdo]

Oh snap.