Triggering content area off canvas element via arbitrary method

[aap]

Hi
Can I assign the exact same functionality to a button or a tex link?
THANKS

[ruenel]

Hello @flashfog,

Thanks for writing in!

A button element is a button element. It is an independent element which DO NOT have modal popup or off canvas features. If You need a modal or off canvas features, you will have to use dedicated elements such as the content area modal or the content area off canvas element.

If you have added the content area modal or the content area off canvas element into a page, you can trigger it with a button or link. Simply insert the my-toggle Toggle Hash in the “Customize” tab and then use it as your link URL #my-toggle.

Hope this helps.

[aap]

hi.
I don’t see a Toggle Hash in the “Customize” tab of the button element.
This is what I see; https://www.screencast.com/t/hLZM1KeR6
Please let me know what I am doing wrong
THANKS!

[prakash_s]

Hello @flashfog,

Please make sure you have set the “Advanced Mode” as “ON” to see more design controls when inspecting an element in the builders. Please have a look at the screenshot given below.

Now click on the "Content area off Canvas " element. Please check the screenshot given below.

Thanks

[aap]

Thank you, it works now.

[aap]

Hi
I can see I can only put HTML into this modal. Is there any way to create a page using xtheme elements, then take all that html and drop it into the offcanvas area?
thanks
Alfredo

[friech]

Hi Alfredo,

You can create a Global Block, and then use the shortcode of that global block to place it inside the off-canvas area.

Hope it helps,
Cheers!

[aap]

Very cool! thanks.

Question: I got this to work, but the trigger only works once. Please see attached video on private note.

[friech]

Hi @flashfog,

That is because you use toggle hash to trigger the modal which is not design for.

The toggle hash is for the address bar’s hash and it has no direct connection to the button. It only triggers the modal since the button changes the address bar’s hash upon the first click.

There is a workaround, but it requires customization, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

Instead of using the toggle hash, use the jQuery function .on(click) event and .trigger() event.

It sounds like ( on button click , trigger modal)

Thanks,

[aap]

@friech

address bar’s hash

Amazing, thanks for getting me started. This functionality is quite desirable; please put it down as a feature request

[friech]

Sure, I already did actually

Cheers!