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
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.
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,
});
I'm currently trying to figure out the best way of making a ui-view slide out of the header when it is triggered.
Basically I have navigation buttons and a view appears when they are clicked. It is the same view for each, but with different content. I am using NgAnimate. My problems are: 1) The animation is triggered each time the button is clicked and I only want it to be triggered when the view is NOT active. 2) I want to make it slide out and push the other content down and I'm struggling with that right now. Any tips or plnkr's would be greatly appreciated.
EDIT: I have created a small plnkr to show what I'm trying to do here:
http://plnkr.co/edit/5eW6aN?p=preview
When the user clicks on link 1, 2 or 3, I want the grey box to slide out but ONLY if it is not visible. If it is visible, I just want the content to change without it sliding out.
If possible, when the user clicks "Home", I want the grey box to slide back in too.
Edit 2: added animation - still not working: http://plnkr.co/edit/5eW6aN?p=preview
Hi i have a slider which will slide from side if i scroll down certain amount in browser and it will slide back if i scroll up. Also i have a close function it will close the slide once i click.
I used (window).scroll to measure the scroll amount based on this i have given a condition to make the slide happen.
Now the problem is if I am at the bottom of the window when i click "close" it closes the slide but after that when I scroll up the slide again coming this is because the scroll amount condition which i given to slide.
So i went to store a cookie when a click function triggered. By checking the cookie value i let the slide function to happen.
Cookies are created once i click the close then also the same problem happening but when i reload page the slide function is not happening.
Is this Because of (window).scroll function priority or Something?
Do anybody know on what problem am I struggling?
I'm not totally sure if I do understand you correctly.
Why don't you just set the overflow css property of the element to hidden when the trigger calls?
Isn't that your problem?
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.