The code has been reworked to also; - Allow Close Off Canvas when you assign to an icons/link etc to also work :) - Allow Links to other pages or external links to also work :) - Added in Transition and Motion Effects for Slide-in-left and Slide-out-left :) www.codesnippets.cloud/snippet/WebSquadron/Off-Canvas-Widget-Anchors I hope Elementor put this all into the widget natively.
Pretty good! Just a few things: 1) If you have a "close" icon (eg. "X") in the Off-Canvas Widget, it doesn't work, although the Widget can be closed by clicking the overlay. 2) If you have closed the Widget on click, and then click the page toggle [icon] to re-open it, it won't work. 3) The code is a little buggy if the Entrance and Exit Animations are changed [in the code] (eg., slide in/out Right instead of Left).
I've redone the code to allow the 'Close' Icon to also work :) See the altered code: www.codesnippets.cloud/snippet/WebSquadron/Off-Canvas-Widget-Anchors
@@websquadron Very nice! By the way, if this is really Imran, you are a massively entertaining and generous guy to share your knowledge. Can't thank you enough for that. And (of course) I'm still experiencing one last issue. Regardless of the type of link (menu item, external, anchor ...) I click on inside the Off Canvas, the widget still slides out Left when code is tweaked to slide out Right. Sadly my JS is lacking so not sure what's going on there.
@@websquadron yes, I did that as well, but will keep playing with it and check for conflicts. no worries, I only mention it in case you're experiencing it as well.
Your videos are fantastic, I have learned so much from them. Question: Do you know of a way to make the Off-Canvas Container auto show on page load? The toggle button would still be great to show but I would like my Off-Canvas Container to show as default on Page load. Any help or suggestions would be appreciated.
Good one but one more thing to setup. You should make sure Your entrance and exit animation is either empty or same as in snippet. Otherwise You will have a glitch effect like the widget is opening/closing twice. At least I had this issue after applying this snippet
Many thanks for this great video! I'm trying to add anchor navigation within the same canvas-off or within a popup, but it's not working :( To explain in more detail, let's start from a basic page. On this page, when clicking on a group of images, I want to display a popup (or canvas-off) that shows a more comprehensive gallery of images. At the top of this popup (or canvas-off), 4 image thumbnails would allow quick access (like a mini menu) to the relevant section via scrolling within the same popup. With popups, the anchor is followed correctly and scrolling occurs, but the popup closes... And with Canvas-Off, it seems that anchor navigation within this canvas-off doesn't work because no scrolling is triggered :( I couldn't find this in your videos, have you already covered this topic? Is what I'm trying to achieve even possible? :)
Hello!! Thank you for your videos! One question. Can this be used for triggering a filter menu (categories) for a store in the actual store page? Thank you!
Let me start from thanking you for your efforts. Being an author, rather old in age, I tried to use the Off-canvas widget for reading the first chapter of my novels. The problem is that the max width is 500px not enough for reading a page. Any suggestions? Anyway thanks again.
Thank you for this solution! Have you had issues on mobile though? It seems to work fine when simulating a mobile device in my browser, but when opening the off-canvas an actual phone and clicking an anchor, the off-canvas doesn't close. Any ideas on what could possibly cause this and how to fix it?
imran , hope you doing good , i have made my icon which is anmited one it is also in html and when i add the class off-canvas-toggle-button in to the html animated icon , the code is not working,
You almost helped me hahaha but I think it's a small thing. My problem is that I have 2 off-canvas on the same page, one opens a menu, and inside the menu there's some links for example "ABOUT" and then when you click opens another off-canvas, but the problem is that when I click on the ABOUT off-canvas, the MENU off-canvas keeps open. There's any way to close the MENU and then opens the ABOUT?
Imran, have you had any success using an off-canvas widget on a loop grid (for example to show extra detail on a personnel bio)? There doesn't seem to be a way to call the widget.
Imran, this doesnt work for me. I'm using it for a popup. The menu link opens the popup, but doesnt't close even after applying the code. Can you help?
Great Script! Only issue I am having currently: Once I clicked a link from within the off canvas panel and returned to the page the anchor scroll and closing of the off canvas panel works great, BUT I need to click the trigger button twice to reopen the off canvas panel again. At first it is not even showing hover states. only after clicking it once it works. And somehow until I click it once I can not click on any other trigger button in my menu for other offcanvas pannels aswell. They are kind of blocked. Any idea why this happens?
I found the issue and a solution: In the styling section you need to change .e-off-canvas-overlay-hidden {display: none !important;} to .e-off-canvas-hidden {display: none !important;}
Damn... having multiple off canvas elements on the same page does not work with this script I even tried to modify the script by using the aria-label of each off-screen panel... but that did not work either.
Hey imran, i used the offcanvas for mobile to link on the same page but it does not go to that section that was anchored with. Have ypu alsp ran into this problem if so what did you do to solve it.
Just a small "Bug": If the off canvas contains both internal and external links, your script don't work. Often you have Onpage Links but also external links to pages like imprint, privacy and so on. How to handle this? 😅
The code has been reworked to also;
- Allow Close Off Canvas when you assign to an icons/link etc to also work :)
- Allow Links to other pages or external links to also work :)
- Added in Transition and Motion Effects for Slide-in-left and Slide-out-left :)
www.codesnippets.cloud/snippet/WebSquadron/Off-Canvas-Widget-Anchors
I hope Elementor put this all into the widget natively.
Yet again Imran solves a problem Elementor should have already figured out. Well done mate.
Pure madness to solve problems that drive us crazy! This code snippet is really helpful. Thank you!
You're welcome!
Another day, another Imran video for my SOP. Thank you, man!
My pleasure!
... and solve problems you certainly do.
Thanks again, Imran.
Thank you so much Imran, I indeed ran into this problem and it is now solved! Keep up your great videos and help!
Glad it helped
Thank you Imran. Excellent solution.
Thanks for another great snippet!
Thank you!!! I’ve run into this exact problem and couldn’t figure out how to fix it
Glad I could help!
Pretty good! Just a few things: 1) If you have a "close" icon (eg. "X") in the Off-Canvas Widget, it doesn't work, although the Widget can be closed by clicking the overlay. 2) If you have closed the Widget on click, and then click the page toggle [icon] to re-open it, it won't work. 3) The code is a little buggy if the Entrance and Exit Animations are changed [in the code] (eg., slide in/out Right instead of Left).
Yup that's where the code will need adapting for the animations. This is a start and hopefully the code will be refined especially for the close icon.
I've redone the code to allow the 'Close' Icon to also work :)
See the altered code: www.codesnippets.cloud/snippet/WebSquadron/Off-Canvas-Widget-Anchors
@@websquadron Very nice! By the way, if this is really Imran, you are a massively entertaining and generous guy to share your knowledge. Can't thank you enough for that. And (of course) I'm still experiencing one last issue. Regardless of the type of link (menu item, external, anchor ...) I click on inside the Off Canvas, the widget still slides out Left when code is tweaked to slide out Right. Sadly my JS is lacking so not sure what's going on there.
@skywebdesigndevelopment6818 it is me :) did you adjust the transform values?
@@websquadron yes, I did that as well, but will keep playing with it and check for conflicts. no worries, I only mention it in case you're experiencing it as well.
Your videos are fantastic, I have learned so much from them. Question: Do you know of a way to make the Off-Canvas Container auto show on page load? The toggle button would still be great to show but I would like my Off-Canvas Container to show as default on Page load. Any help or suggestions would be appreciated.
Hmmmmm.... good question. I'll have to check.
Would you still have a close button?
Or could they re-open it?
Thank you very much, please do you have the code for the Mega Menu too?
Good one but one more thing to setup. You should make sure Your entrance and exit animation is either empty or same as in snippet. Otherwise You will have a glitch effect like the widget is opening/closing twice.
At least I had this issue after applying this snippet
Great tip
This is perfect. But i have 4 off-canvas widgets on page… will this work for all? Or the closed ones will open because of the toggle?
Hmmmmmm.... have a go....
Many thanks for this great video!
I'm trying to add anchor navigation within the same canvas-off or within a popup, but it's not working :(
To explain in more detail, let's start from a basic page. On this page, when clicking on a group of images, I want to display a popup (or canvas-off) that shows a more comprehensive gallery of images. At the top of this popup (or canvas-off), 4 image thumbnails would allow quick access (like a mini menu) to the relevant section via scrolling within the same popup.
With popups, the anchor is followed correctly and scrolling occurs, but the popup closes... And with Canvas-Off, it seems that anchor navigation within this canvas-off doesn't work because no scrolling is triggered :(
I couldn't find this in your videos, have you already covered this topic?
Is what I'm trying to achieve even possible? :)
Hello!! Thank you for your videos! One question. Can this be used for triggering a filter menu (categories) for a store in the actual store page? Thank you!
Yes, I tested this in a previous video.
@@websquadron great! Thank you, I'll search for the video
@@sergio_grez th-cam.com/video/_x4CqMp6zRg/w-d-xo.htmlfeature=shared
Thanks for sharing Imran😊
My pleasure 😊
Let me start from thanking you for your efforts. Being an author, rather old in age, I tried to use the Off-canvas widget for reading the first chapter of my novels. The problem is that the max width is 500px not enough for reading a page. Any suggestions? Anyway thanks again.
You can overwrite and change it to 100%
@@websquadron It was that easy!!!! Thanks for your immediate reply.
Thank you for this solution! Have you had issues on mobile though? It seems to work fine when simulating a mobile device in my browser, but when opening the off-canvas an actual phone and clicking an anchor, the off-canvas doesn't close.
Any ideas on what could possibly cause this and how to fix it?
Hmmmmm it should be fine for mobile too.
hi i have this problem too.... did u find any solution?
yes i also have the same problem, the code works when as admin. if not admin the code doesn't work
imran , hope you doing good , i have made my icon which is anmited one it is also in html and when i add the class off-canvas-toggle-button in to the html animated icon , the code is not working,
You almost helped me hahaha but I think it's a small thing.
My problem is that I have 2 off-canvas on the same page, one opens a menu, and inside the menu there's some links for example "ABOUT" and then when you click opens another off-canvas, but the problem is that when I click on the ABOUT off-canvas, the MENU off-canvas keeps open. There's any way to close the MENU and then opens the ABOUT?
Let me have a think about that
Imran, have you had any success using an off-canvas widget on a loop grid (for example to show extra detail on a personnel bio)? There doesn't seem to be a way to call the widget.
See the video I did yesterday on calling dynamic data in a loop grid like a pop up - you could use the same to summon a container
Thank you Imran!
But this doesn't work on mobile. Please, any fix for that?
Genius 😅 Thank you. 🙏
Sr. Your Solution awesome, one question , you posted a video about how yo get clients using LinkedIn but i can' t find It, did you delate It?
th-cam.com/video/2gSsDLaxM1U/w-d-xo.htmlfeature=shared
Imran, this doesnt work for me. I'm using it for a popup. The menu link opens the popup, but doesnt't close even after applying the code. Can you help?
This only works for off canvas,
I have a separate video for pop ups
Great Script! Only issue I am having currently: Once I clicked a link from within the off canvas panel and returned to the page the anchor scroll and closing of the off canvas panel works great, BUT I need to click the trigger button twice to reopen the off canvas panel again. At first it is not even showing hover states. only after clicking it once it works. And somehow until I click it once I can not click on any other trigger button in my menu for other offcanvas pannels aswell. They are kind of blocked. Any idea why this happens?
I found the issue and a solution: In the styling section you need to change .e-off-canvas-overlay-hidden {display: none !important;} to .e-off-canvas-hidden {display: none !important;}
Damn... having multiple off canvas elements on the same page does not work with this script I even tried to modify the script by using the aria-label of each off-screen panel... but that did not work either.
Hey imran, i used the offcanvas for mobile to link on the same page but it does not go to that section that was anchored with. Have ypu alsp ran into this problem if so what did you do to solve it.
Not had that problem as this solution sorted that out for me
How the hack did you figure this out? 😳Thanks for sharing! 🤠
ChatGPTTTTTT :)
@@websquadron 😅 We should inform the Elementor team so that they can also use this secret weapon.
Thank you very much Imran
You should have also pushed the content (behind the off-canvas menu) in the same direction as the menu when it extends out.
Well done sir!
Brilliant!
1:33 having watcher this part i am now thinking i can i incorporate this on my website 😅
Good job 👏
Thanks 😅
Just a small "Bug": If the off canvas contains both internal and external links, your script don't work. Often you have Onpage Links but also external links to pages like imprint, privacy and so on. How to handle this? 😅
Yes, I’ve run into this same exact “bug”. 🙁
@@Winstonbee3366 Currently working on a solution for this
@@Winstonbee3366 fixed it ... Hope it works for you as well
What was your fix?
@@websquadron Just checked if the href got an # inside or not and than run your scroll to code
OffCanvas is bit buggy right now.
I'm sure it will improve over time. I hope. I think.