Off Canvas from Custom Button

[cmdiggs]

Hey Themeco

I have used this function in the past but can’t seem to get it to work now. I am working on a test page (will add to a secure note below) and nothing is working. Any help would be appreciated.

[tristup]

Hi @cmdiggs,

Thanks for reaching out.
If I am able to understand your requirements, you want to open an Off Canvas using a Button. If that is the case, please go through the following thread which will help you acheive that.

Make button trigger modal, but only upon click (not at pageload)

Hi @nblund, You can use the following code to trigger the modal on the button click. Here open-modal-button is the class assigned to the button and the assigned id of the modal my-content-area-1. Remember that, the anchor-toggle suffix will be added to the given id of Modal. [Screenshot-2021-12-17-183402] [Screenshot-2021-12-17-183420] jQuery ( document ).on ('click', '.open-modal-button', ( e ) => { e.preventDefault(); jQuery('#my-content-area-1-anchor-toggle')[0].click(); } )…

Thanks

[cmdiggs]

Hey @tristup

I have a custom button. On that page I sent, the Request a Demo button. I had the code a little different on last save but put the ones in on the directions you sent and it didnt work. It also nullified the CSS to hide the off canvas modal button I had put in.

[tristup]

Hi @cmdiggs,

I have checked before I refer it to you and it worked perfectly fine. In place of the class used in the code shown in the reference thread, you can use the classes you have added to that button. If you still facing the same problem, please try it on a new test page and then implement it to the page you want. If that does not help, you can provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[cmdiggs]

Sending info now. It’s still acting weird and I can’t get the off canvas button to disappear now. Essentially want the Request the demo custom button to open the off canvas modal

[tristup]

Hi @cmdiggs,

I have checked the page and found that you are using the Button shortcode which has the class squarebutton I have replaced the .open-modal-button to .squarebutton in the JavaScript code. I also found that you have added the ID for the Off Canvas to the class, I moved it to the ID and it start working. I have also removed the Graphics option from Off Canvas > Toggle set the Background Color to transparent and set the width & height to 0 to make that invisible.

Thanks

[cmdiggs]

Thanks so much. Lifesaver.

Y’all the best

[tristup]

Hi @cmdiggs,

Glad that we are able to help you.

Thanks