So I've got a little problem (similar to this one I posted the other day: http://bit.ly/11JpbdY) with using SlabText on a piece of content that is hidden on load. This time, I'm trying to get slabText to update the display of some content that is in a slider (using Twitter Bootstrap's Carousel plugin).
Following Twitter's documentation (http://twitter.github.com/bootstrap/javascript.html#carousel) for Bootstrap's Carousel plugin, I'm trying to use slide event so that I re-call SlabText to make it display correctly.
Using developer tools I can see that Carousel adds a .next class as it processes the slide of one .item element to the next. This is then removed before the .active class is transferred.
I can access the "slide" event without any issue, but trying to get hold of the .next element is proving troublesome. Here is a JSFiddle of my code thus far: http://jsfiddle.net/peHDQ/
To put my question simply; how should I correctly use the slide event to trigger a function?
Please let me know if any additional information would be useful.
Further notes:
As I've been unable to get hold of the .next class, I'm attempting to do this with some jQuery. Here is my code thus far:
$('.carousel').carousel({
interval: 5000
}).on('slide', function (e) {
$(this).find('.active').next().find('.slab').slabText();
});
From what I understand this should be grabbing each .slab element and triggering the SlabText plugin.... alas I get an error:
"Uncaught TypeError: Object [object Object] has no method 'slabtext' "
Can anyone advise what I am doing wrong here...? I've used the exact same process to add a class and it works fine (as per this JSFiddle: http://jsfiddle.net/peHDQ/2/)
I identified the problem. The issue is that the event 'slide' is called before the next slide is made visible. I added a little delay, and it works fine now. Try this:
$('.carousel').carousel({
interval: 5000
}).on('slide', function (e) {
var xx = $(this);
setTimeout(function() {
xx.find('.active').next().find('.slab').slabText();
} , 0);
});
Per the documentation you should be using Slid not Slide
https://getbootstrap.com/docs/4.3/components/carousel/#events
Event Type: slid.bs.carousel
This event is fired when the carousel has completed its slide transition.
Related
I have a website that is using bootstrap 3 and is doing an collapse panel when images are clicked. I have code in place that watches for the 'show' event that will 'hide' all panels. The issue im having is that the transition animation is not waiting for eachother to be completed resulting in some weird animation happening. example page is here ( http://urbantimber.ca/newsite/product-flooring.html).
my function looks like:
$(function () {
var active = true;
$('#accordion').on('show.bs.collapse', function () {
if (active) $('#accordion .in').collapse('hide');
});
});
I have also tried to negate the transition by setting the speed to 0.001s but the blip still shows.
looking for any ideas on how to watch that the animation is completed before the show event is finished. im thinking it needs to be a click event that happens before the show even starts but im not sure how to go about this. any ideas or comments are greatly appreciated.
I'm wondering if you're not better off just creating your own implementation. You're not really using any of the 'accordion' like functionality. Perhaps it would be easier to just have a click event handler attached to each of your images that checks if the details panel is displayed, if not, you would just display it using jquery show method. If it is displayed already, you could just replace the panel html with the item's details. (btw, nice looking site).
I'm looking to create a slider where one image fades in, then another fades in next to it, then the slide changes. Thus far I've tried using "wowslider" and "rhinoslider" and googled it extensively... however I cannot seem to find a slider tool where this can be accomplished. Every tool I've tried and read about allows for a fade in effect - but only for one image per slide - I need to fade in two images [one, then the other] then change slides.
How might this be accomplished? (either with an existing tool such as wowslider - or perhaps using pure code)
Any suggestions are GREATLY appreciated!
you could use http://getbootstrap.com/javascript/#carousel Bootstrap Carousel Plugin.
it has an event handler for between slide times:
$('#myCarousel').on('slide.bs.carousel', function () {
// do something…
// This event fires immediately when the slide instance method is invoked.
})
or
$('#myCarousel').on('slid.bs.carousel', function () {
// do something…
// This event is fired when the carousel has completed its slide transition.
})
you can use the second one and instead of //do something you can write your fade function. I mean by this: you put two images under each slide. after slide is complete, faceOut the first shown image and fadeIn the second hidden image.
Once the carousel has slid, I want to add a value to an input outside of the ID myCarousel.
The function to implement an event once the carousel has slid is this:
$('#myCarousel').bind('slid', function() {
$('input[name=linkOnly]').val('Test')
}
I want to fire an event once a particular slide slides. I've tried something like $('#myCarousel li[data-slide-to=1]').bind('slid', function() ... but it doesn't register.
Any help appreciated, thanks.
You could just setup an event handler on the appropriate event and then choose to do anything based on which slide is .current. For example, to trigger some javascript when slide 1 cycles in:
$(document).on("slid", function(event) {
if ($(event.target).find(".active").data("slide-to") == 1) {
// do stuff
}
});
From a quick test, this doesn't seem to work unless it attached to an element above the carousel (you'd also need to change things a little if you had more than one carousel).
EDIT: After a quick look, the reason the above doesn't work if bound to the carousel itself is that the active class isn't added until immediately after the slid event is triggered (it seems that if the handler is added to a parent element, the active class gets added while the slid event bubbles up). You can get around this by using setTimeout to delay the triggered behaviour (works even with a timeout of 0):
$("#myCarousel").on("slid", function(event) {
var carousel = $(event.target);
setTimeout(function() {
if (carousel.find(".carousel-indicators .active").data("slide-to") === 1) {
// do stuff
}
}, 0);
});
Whether the extra code is worth it is up to you, although it may be a little more stable. It may even be worth putting in a small delay (instead of 0), just to make sure that things do work the way you expect them to.
I have created a simple drop-down menu with JQuery, following a tutorial. LINK :
http://wabism.com/development/jquerydropdown/
Its jQuery code is this:
$('body').ready(function() {
// Add the 'hover' event listener to our drop down class
$('.dropdown').hover(function() {
// When the event is triggered, grab the current element 'this' and
// find it's children '.sub_navigation' and display/hide them
$(this).find('.sub_navigation').slideToggle();
});
});
Drop-down works fine with 1 error. If you rollover and out a menu item 3 or 4 times quickly, it does all the 3 or 4 slidetoggle() 's. How can I overcome this problem ?
Use .stop() method before animation.
As you described, animations in jQuery would be queued and all of them would be executed, unless you explicitly specify that you want any pending animation to stop. You would do this using .stop() function. In your case you should write:
$(this)
.find('.sub_navigation')
.stop()
.slideToggle();
It has some parameters too which would give you more granular level of control. See here.
$("#" + id).hide(2000);
I have a div I'm trying to hide thusly, but doesn't seem to be doing the animation properly.
Just disappears.
Based on your comments, my guess is that your code is deleting it right after the animation STARTED. The animation is an asychronous process. Your code will continue to run right after the animation is started. If you are then removing the object after the call to hide(), then you will be removing it before the animation has completed and it will "just disappear" rather than fade out slowly.
To fix that, you will need a completion event on the animation and you will need to remove it upon completion.
You will need something like this:
$("#" + id).hide(2000, function() {
// remove it from the page here upon completion of the animation
});
Just to show people that the .hide(2000) function works just fine, here's a working example: http://jsfiddle.net/jfriend00/XDQwU/.