I'm working on a opencart project. There i'm using fancy box plugin to show a video on the swiper slider. when i click the video button which on a slider, fancy box popping up and background slider getting stop. But after closing the fancy box, slider is not moving.
So please can someone suggest a solution to move the slider as usually after closing the fancy box ?
I have used this code to stop the slider moving when fancy box popped up
$("#video").click(function() {
.swiper-wrapper.noSwiping();
});
you can use this option for new version of fancybox to prevent swiper crashing.
fancybox places focus back on the trigger element after closing the gallery and sometimes carousel/slider scripts are sensitive to this feature.
Fancybox.bind('[data-fancybox="group"]', {
infinite: false,
backFocus: false,
trapFocus: false,
placeFocusBack: false,
});
Related
Quick note : I have read other similar questions, but they are all about modal opening up as overlay on body and they want to stop scroll on body.
But in my case, when I open the toggle the page autoscrolls and I don't want that to happen I want it to stay at same place.
Here is the link ( http://isma.tomorrowing.today/ ) where you can see the issue in test text 2 or 3 section by clicking any of the 'Read Text' button.
I want the webpage to stay at some position even when toggle is opened.
Although I am using elementor in Wordpress on the website, but custom CSS or JS works for me as well.
Highly appreciate any help.
My responsive menu is auto-collapsing to "display none" when I click the menu button, in both directions: when I click to hide or when I click to show it.
I tried modifying styles, and main js but had no result. I realy can't figureoute what could be the problem.
I am using Bootstrap as framework and have an autoscroller animation, maybe there is the problem.
I let the link here: https://davidpulido.com.mx/
I'll be glad if you can helpme.
I'm building a portfolio webpage and have incorporated W3School's Bootstrap Lightbox.
What I am trying to do now is make when you click outside the image, the modal closes; similar to other lightboxes. I also want to add in navigation by using the arrow keys and escape key.
I have searched Stack Overflow and have found questions similar to what I am asking but I do not understand how to add jquery to do what I want. Other lightbox modals work fine when you click outside the box to close it, but why not here? Thank you in advance.
From Bootstrap's page:
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})
What do I put in the // do something..?
I'm using Bootstrap 3 and I have a gallery on the home page and a modal. I have disabled the auto slide on the gallery by using:
function galleryCarousel() {
$ub('.carousel').carousel({
pause: true,
interval: false
})
};
My only issue is when someone clicks on the button to bring up the modal, the gallery suddenly starts to auto slide again and will continue until you close the modal. The strange thing this only happens after you click to go to the second image in the gallery will it start auto slide again.
I've tried several ways to fix this to no avail.
You can see the prototype working here: http://copy-writer-otter-74032.netlify.com/
Simply advance the gallery to the next slide, then click on "profile" button at the bottom of the page to bring up the modal - wait a few seconds and watch the gallery start auto sliding again.
The problem is that you are already initializing your slider with the data attributes. This means the default slider is applied. The reason it seems to be not on auto, is because the slider won't move when you hover over it by default. As soon as you open the modal, the slider does not receive a hover, and it will start to move. Just place your mouse on the header, or open one of the dropdowns, and you'll see it starts moving.
The easy solution would be to add data-interval="false" to your slider element. This also means you can remove that javascript.
Have a look at the demo I created.
Whithout the data attribute: http://codepen.io/anon/pen/rVRaeR
With the data attribute: http://codepen.io/anon/pen/JdzoKj
The issue I'm having is that when a modal is opened, the background body is scrollable using the mouse wheel.
Seems like this problem is known and people have suggested to set the body to overflow:hidden as stated in this link:
Prevent BODY from scrolling when a modal is opened
which works fine if your page is short and the modal link is on the initial visible page. However, if you have a longer page and you have to scroll down to see the modal link, once you click to open the modal, the background body shifts to the top.
The background does not scroll anymore, which is what I want, but is there any way to prevent it from popping back to the top when the modal is opened? It's inconvenient when you need to add multiple entries of something using the modal and you have to keep scrolling down to click the modal link to add another item.
In your onclick(I'm guessing you use onclick) event-method insert a return false; at the end, that will prevent the site from scrolling to the top.
I was having a similar problem in which modals larger than the window were cut off, and scrolling anywhere would scroll the background and not the modal.
This question pointed me to this plugin which is simple to use and fully addresses mine in addition to your problem of not permitting the background to scroll:
However this issue is said to be resolved in Bootstrap 3 and the plugin should not be needed if you're using the current version of Bootstrap.