Hi everyone,
Please I have two bootstrap offcanvas on my page with different id’s. When one is active and I open the other, it closes the active one…
What I want to achieve:
The offcanvas with id:2 is not supposed to close unless its close button is clicked…
So I want a script to control it so that when the offcanvas with id:1 is toggled, it will not close the other but open on top of it.
Any suggestions will be helpful
Hey @REVEB,
I suspect that you copied/pasted the one offcanvas and have messed the offcanvas calling …
Check again the 2 offcanvas or please paste the code here to check
Thanks for replying…
I didn’t “copy paste” the offcanvas. The offcanvas work well is just like I want a script to control it when offcanvas2 is active, Offcanvas1 should open on top of it when is called…
In other words, it should open simultaneously when offcanvas2 is active…
Let me explain:
The offcanvas2 contains data that needs to be visible unless the user hides it using the close btn.(Displays at the bottom)
But when I open offcanvas1 which contains my page navigations, it hides offcanvas2 which is what I don’t want it to.
So I need a script that first check if offcanvas2 is active when offcanvas1 is being toggled, and if active should not hide it but open on top of it(simultaneously).
ohh… I’m sorry!
I wrote offcanvas but in my mind I had the “collapse”
So, I think that offcanvas works like modals…
When you need to overlap an oddcanvas you use the “toggle” and “show”…
When the second offcanvas is fired:
Thanks again…
This toggles the offcanvas2 and hides it…
Also it toggles it back even if its not active.
As I said , the offcanvas2 needs to close by the user alone when its active since it contains an info…
So I want to check if its active and should prevent from hiding whilst the other overlaps it unless the user intentionally hides.
The link for the 2nd offcanvas is inside the 1st offcanvas?
Can you share a short video or screenshots to understand?
You need to know if an offcanvas is open like the video below?
home-google-chrome-2024-01-05-14-29-53_Rep5RwwH
Yes and if true, shouldn’t close it but just overlaps it.
This approaches the code that you want:
document.addEventListener('DOMContentLoaded', function() {
var offcanvas1 = document.getElementById('offcanvas1');
var offcanvas2 = document.getElementById('offcanvas2');
offcanvas1.addEventListener('hidden.bs.offcanvas', function () {
var offcanvas2Instance = new bootstrap.Offcanvas(offcanvas2);
if (offcanvas2.classList.contains('show')) {
offcanvas2Instance.show();
}
});
offcanvas2.addEventListener('hidden.bs.offcanvas', function () {
var offcanvas1Instance = new bootstrap.Offcanvas(offcanvas1);
if (offcanvas1.classList.contains('show')) {
offcanvas1Instance.show();
}
});
offcanvas1.addEventListener('show.bs.offcanvas', function () {
var offcanvas2Instance = new bootstrap.Offcanvas(offcanvas2);
if (offcanvas2.classList.contains('show')) {
offcanvas2Instance.show();
}
});
});
You set a variable to true on offvanvas show event and to false on offvanvas show event…
And check that:
<dmx-value id="varOffCanvas" dmx-bind:value="false"></dmx-value>
<div class="offcanvas offcanvas-start" id="offcanvasFilters" is="dmx-bs5-offcanvas" tabindex="-1" dmx-on:show-bs-offcanvas="varOffCanvas.setValue(true)" dmx-on:hide-bs-offcanvas="varOffCanvas.setValue(false)">
</div>
Now as far as i know you can trigger the second offcanvas when the first is already open ONLY by using the mouse click event…
<div class="offcanvas-body py-2 px-0">
<div class="card-body pt-3 px-2 pb-1 collapse show bg-white" id="collapseFilters">
<button id="btn1" class="btn" data-bs-toggle="offcanvas" dmx-on:click="offcanvasFilters1.show()">Button</button>
Play with it the way you want exactly and you will get there!
If yoiu need help tell me
@ben, @famousmag, I have tried but still getting the same results.
@ben, somehow its will behave as if its working and then it closes again in a second.
Below is a video of what I want to achieve:
The offcanvas displayed at the bottom is what I don’t want it to be closed when the one on the left is open.
20240105_142755
Question my friend…
Your project is a web or mobile app and it is nodejs or php?
Is both mobile and web
I’m not so familiar…
But:
About the navbar collapse:
The problem I think is that the navbar is automatically structured because the navbar toggler collapse option:
Can you please try to change it to none:
and handle the navigation offcanvas triggering via the button.click dynamic event as I told you?
OK its actually not a collapse. Its a button that toggles the offcanvas on the left. It looks like a navbar collapse toggler because of the font awesome icon class used but it’s just a button.
can you screenshot that navbar? Mine is a collapse…
Have a look at
Especially Methods and Events.