Link to off-canvas content

Hi,

I would like to link to off-canvas content from my homepage, but i can’t seem to make it work properly.

There is a contact form in my off canvas content which you can access. I would like to link to it from the button i placed in the beginning of my homepage

Homepage button: http://prntscr.com/fof9hp
Off-canvas content: http://prntscr.com/fof9xh

I tried linking to it via ID, but that not work.

2 Likes

Hi there,

Thanks for writing in. Is that button part of the header? If so, you could make that button the actual off canvas element. If it’s not, the desired effect is still possible but you’ll need a little javascript to wire things up.

  1. Give your button an id. For example: custom-trigger
  2. Give your content area element an ID. For example custom-target. If you inspect the header with developer tools you’ll notice we append a bit more to the IDs to ensure they are unique when added to both the toggle and off canvas area elements.
  3. Let’s hide that toggle with some CSS. #custom-target-anchor-toggle { display:none; } If you prefer, you could use a class to do this.
  4. Now for the javascript:
jQuery(function($){
  $('#custom-trigger-anchor-button').on('click', function(e) {
    e.preventDefault();
    $('#custom-target-anchor-toggle').trigger('click');
  })
});

This will effectively take clicks on your new button and propagate them over to the off canvas toggle.

1 Like

Hi @alexander,

Thank you so much for the great feedback. The button was not in the header itself, but your instructions worked perfectly.

1 question. I want to refer to the same off canvas content with several other buttons. So the button changes, the trigger changes, the target stays the same.

I already made it work. I copied the javascript, kept the target the same, but changed the trigger id. It works great, but it means i will end up with 10 copies of the same javascript in my ‘custom javascript’. Is that the correct way to do it, or is there a better way?

Thank you so much for the great feedback!

Great! Glad to hear that’s working. jQuery works off CSS selectors. Instead of an ID you could use a class. For example:

jQuery(function($){
  $('.off-canvas-trigger').on('click', function(e) {
    e.preventDefault();
    $('#custom-target-anchor-toggle').trigger('click');
  })
});

Now you can go to each button and ensure it has the off-canvas-trigger class. This will register the click event with every button, making them all trigger the target area.

Thank you so much for the great input.

One last thing. It works great on desktop, but the button’s don’t fire on mobile.

The button in the header works fine on mobile, but the buttons within the page refering to the off canvas content won’t fire. What can I do to fix that?

Images of the buttons: https://prnt.sc/fp2nw3 and http://prntscr.com/fp2o0r

Thanks for the reply

Hi there,

Would you please kindly change the code you have to this:

jQuery(function($){
  $('.off-canvas-trigger').on('click touchend', function(e) {
    e.preventDefault();
    $('#custom-target-anchor-toggle').trigger('click');
  })
});

We trigger a touchend event on mobile devices. My guess s that by adding that in the events list it should work ok on mobile.

Thank you.

3 Likes

@christopher.amirian @alexander,

Thank you so much for explaining this to me. It works perfectly, could not have done it without you guys!

Keep up the good work.

You’re welcome! Glad we could help.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.