using the latest bootstrap 5 carousel, I am unable to pause the carousel from inside a slid or slide event.
const myCarouselEl = document.getElementById('carousel-large-background')
myCarouselEl.addEventListener('slid.bs.carousel', function() {
var carousel = new bootstrap.Carousel(myCarouselEl, {
interval: false
})
})
I have tried a variety of different solutions and am able to pause the carousel from the document.ready body, but not inside the slid or slide event.
I wonder if it might be a scope issue, and that the slid event handler has a different scope, but when I console.log(self) inside the event handler, it returns 'window'.
Any help gratefully accepted.
Cheers.
Any code relating to the bootstrap carousel should go inside a $(window).on('load'...) instead of $(document).ready(...)
otherwise any reference that you obtain to the carousel will be null, and calling methods will not work.
Related
I am trying to set up a JQuery Mobile 1.3 site that uses a panel and a slider.
Problem is, that using the slider triggers the panel, which opens on a "swiperight" event, as I am moving the slider to the right. The slider will be for pagination, the panel for a menu.
Code here:
http://jsfiddle.net/kMARn/1/
Move the slider to the right and the panel will open.
I have tried using the .not() selector for the panel to not react on the slider:
$(document).not("#slider").on("swiperight", function(event, ui) {
$("#myPanel").panel("open");
});
But it won't work, the panel opens when i move the slider to the right. Tried a bunch of variants too, but I'm lost...
Any ideas?
Thanks!
A bit late to the party, but you can disable swipe-to-close by setting the data-swipe-close attribute to "false" on the panel div.
http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/options.html
In my case I used this simple code, without data-swipe-close = "false" in panel.
Keeping panel close with swipe right, outside of the slider.
$('#panel').find('#slider')
.on('slidestop',function(e,ui) {
var value = e.target.value;
//...operations with slider value...
})
.parent().on('swiperight',function(e,ui) {
e.stopPropagation(); //block panel close
})
From the 1.3.0b1 Docs for Swipe:
"Triggers when a horizontal drag of 30px or more (and less than 75px
vertically) occurs within 1 second duration"
This applies to and can be configured for swiperight too. You can make the slider small in length and this would ensure that both the slider event stop and the swipe are not triggered at the same time, yet that may not be practical for all scenarios.
What might be better is to bind the swipe right to a DIV or section of the page. By this, I mean if you have a 75 px div box on the left hand side of the display, and when a swipe event occurred within that div, it could trigger the menu.
I feel the logic here might be better controlled by a button, much like used in the Facebook App to display there slide out menu. In the Dolphin browser on Android, this type of event also triggers a bookmark menu, so if a page has a swiperight event and trigger it, I sometimes get both the event and the bookmark menu from the App. Annoying!
I did fork your jsfiddle and will play with it more (http://jsfiddle.net/Twisty/Hg2pw/). FYI, they have JQM 1.3.0b1 in their available frameworks so you don't have to link it in your HTML. If I find some more info, I will comment here.
The following solution is more a workaround. It should be relatively reliable though.
$(document).ready( function () {
var menu_available = true;
$(document).on("swiperight", function(event, ui) {
if (menu_available) $("#myPanel").panel("open");
});
$("#slider").on("slidestop", function( event, ui ) {
menu_available = false;
window.setTimeout(function() {menu_available= true;},250);
});
});
The variable menu_available is false for a 250 milliseconds right after the slide stops. The window.setTimeout block will reset the variable so that the menu is available again.
This is a stupid workaround, but jQuerys function event.stopEventPropagation(), which IMHO would be the correct way to go, didn't work.
I want to automatically scroll to a particular div which is at the bottom of the page my [data-role="page"], but it's not working. The scroll bar still remains at the top but I want it to scroll down when the page loads. Let me know if you need better explanation. Thanks in advance.
You can bind to the pageshow event and then use the $.mobile.silentScroll() method to scroll the desired element into view. Here is an example:
$(document).delegate('.ui-page', 'pageshow', function () {
//get the offset of the element
var offset = $(this).find('[some-element]').offset().top;
//now scroll to the element
setTimeout(function () {
$.mobile.silentScroll(offset);
}, 0);
});
Here is a demo: http://jsfiddle.net/JNSRn/
The setTimeout allows the scroll to run after everything else that has been queued to run actually runs.
You can change the .ui-page selector to an ID or class to only run this code on a specific page or on a specific set of pages, currently it will run the event handler when any jQuery Mobile pseudo-page is shown.
Docs for $.mobile.silentScroll(): http://jquerymobile.com/demos/1.1.1/docs/api/methods.html (Bottom of page)
You can try creating a anchor tag and clicking it (you don't even need to attach it to the DOM, for example
var a = $('<a />').attr('href', '#myParticularDiv').click();
I use swipe events to change pages when swiping, that worked fine until using ScrollView plugin. I saw the help from jQuery Mobile: scrollview and swipe events but I don't know how to implement it now.
Any code snippets for me?
Thanks in advance.
You just need to comment out e.stopPropagation() in _handleDragStart function() to stop bubbling the parent events, like the JQM swipe events in your case.
OR you can disable according to condition, e.g., for vertical scrollbars, if you want to have swipeLeft and swipeRight events, use this
( this.options.direction == "y" ) ? "" : e.stopPropagation();
this should work.
So, I am using jQuery Mobile and I'd like to animate individual elements on a page change both before and after the change. I set transitions to "none" in jQuery moblie then try to add class to css3 animate individual elements. It works on pagechange, so when you go to a new page the transition on the elements appears, but pagebeforechange happens to quickly and the animation is lost. Is there a way to make the pagebeforechange function wait until the animation is done then go on to the next page? preventDefault(); stops the page from changing at all. I need like a call back or deferred obj or something? If I call changepage in pagebeforechange after the animation is done...the function runs recursively :(
transitions: function(){
$(document).bind( "pagebeforechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
$(document).bind( "pagechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
},
Thanks in advance!
you could try pageshow instead of pagebeforechange. Beaucse pageshow is fired before the pagechange event
I have a basic JQM page which displays a left side sliding menu when swiping (like the facebook mobile app). It worked fine until I started using scrollview (to properly keep the header fixed). The swipe event is not triggered when I swipe over my page content (it still works if I swipe on the header).
$('.ui-page-active').live("swiperight", function() {
if (!menuStatus) {
showMenu();
}
});
Does anyone has any idea on how to make it work?
Cheers!
I think you might find that the event is consumed in the scrollview control. You can override the javascript handler against that control to allow it to keep bubbling.
To override the function you can use this technique: Overriding a JavaScript function while referencing the original
Having a quick look at the file, it looks like this method could hold clues as to what you want:
_handleDragMove: function(e, ex, ey)
specifically:
var svdir = this.options.direction;
if (!this._directionLock)
I was using the version of scrollview shown here: http://jquerymobile.com/test/experiments/scrollview/scrollview-nested.html