bxslider wont stop - javascript

I am having an issue where the slider will not stop auto play when I click a link on my navigation menu. I start the slider via:
$('.bxslider1').bxSlider({auto: true,autoControls: true});
It auto plays and works, but if I try to stop the slider by creating an onclick function or .click() jQuery like:
$(".nav-portfolio").click(function() {
slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
It seems to do something for a split second and then start again. The reason I need to stop the slider is, I am using jQuery waypoints for anchor links to scroll smooth horizontally, and the panels start moving back and fourth by 1 or 2 pixels and its really annoying for the user.
Any help would be appreciated.

Try modifying your code to be:
$(".nav-portfolio").click(function() {
$('.bxslider1').stopAuto();
});
You were previously using the example from the bxSlider webpage which assumes you haven't already initialized the bxSlider. Since you previously initialized it perhaps the second initialization isn't handled gracefully.

Try adding var keyword before the slider declaration.
$(".nav-portfolio").click(function() {
var slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});

Related

foundation 6 orbit start autoplay on element click

I don't seem to find the controls for this, like for instance with reveal modals, where I can give any element the data-reveal.
What I'm trying to achieve is loading the page without autoplay, then setting the play of orbit on a button.
So far I tried to trick it using data-autoplay=true/false and data-timer-delay= really high/ 2000
$('#startOrbit').click(function(){
$('.orbit').attr('data-timer-delay',2000);
});
so the attr goes in but the orbit does not start...
what combinations of options can I use?
thanks
I've created a codepen example (link) with an orbit sample slider and the functionality that you want to achieve.
$(document).ready(function() {
var elem = new Foundation.Orbit($('.orbit'), {'autoPlay': false});
$('#startOrbit').on('click', function() {
elem.options.autoPlay = true;
elem.options.timerDelay = 2000;
$('.orbit').foundation('geoSync');
});
});
Firstly, i initialize the orbit slider with the auto play option set to false.
Then i attach a click event listener on the button element with the #startOrbit id, change the two options and finally call the geoSync method that sets a timer object on the orbit and starts the counter for the next slide.

Refreshing Owl Carousel 2

I have 3 divs that activate slide toggle when I click on them. And inside every div there is owl carousel slider.
If I trigger one div the slider shows, but when I click other div slider doesn't show unless I resize the window.
How can I trigger refresh on slide toggle for the slider in every div?
I tried with this on slide toggle but it doesn't work:
$('.owl-slider').trigger('refresh.owl.carousel');
You trigger with a class. You can try with a variable:
var $owl = $('.owl-carousel').owlCarousel({
items: 1,
loop:true
});
$owl.trigger('refresh.owl.carousel');
if .trigger('refresh.owl.carousel'); didn't work with you, you can use
window.dispatchEvent(new Event('resize'));
which will make the carousel refresh automatically.
I want to set new html content for my carousel and the above answers did not worked for me
so I solved my problem with another way
first, define a function to start owlCarousel and run that function
let myCarousel; //a variable thats hold owlCarousel object
function myCarouselStart() {
myCarousel = $('#my-carousel.owl-carousel').owlCarousel(setting);
}
$(document).ready(() => {
myCarouselStart(); // run owl carousel for first time
});
then when you want to refresh the carousel use the below code
myCarousel.trigger("destroy.owl.carousel");
$("#my-carousel").html(newHtmlContent);
myCarouselStart();

Slider with dynamic content is not working

I'm using Bxslider to display my images and it is working fine for the predefined images.But now, I want to get the images dynamically from the URL.
I used code like:
$('.bxslider').bxSlider({
onSlideNext : function($slideElement, oldIndex, newIndex){
$.get(myUrl,'',function(response){
$('.bxslider').html(response);
});
}
});
and it is appending the images to the slider, but the slider doesn't include those images.I also tried with reload like
var slider = $('.bxslider').bxSlider({
onSlideNext : function($slideElement, oldIndex, newIndex){
//do your ajax here, for example:
$.get(site_url + 'content/content/test','',function(response){
$('.bxslider').append(response);
slider.reloadSlider();
});
}
});
but still working.Can anyone suggest me any solution?
The slider loads slides during initialization. If reloadSlider() was not used then the slider does not know that there is a new slide was added. Also there is a newIndex property that sets the next slide.
newIndex: element index of the destination slide (after the
transition)
So when you click on Next at the end of the slideshow then newIndex=0 and even you will use reloadSlider() you will go to the slide #0. The only way here is to use goToSlide()
slider.reloadSlider();
slider.goToSlide(oldIndex+1);
Demo: http://jsfiddle.net/Gg2Sk/
Generally speaking, the idea to reload a slider on every new slide is not good at all. You might consider to load initially all slides but do not load images until they are not visible.

reload, refresh, unbind, destroy, live, javascript/jquery function... how should this be done?

My question title may seem confusing, let explain my situation. Any help would be much appreciated.
I have never done this before, hence why I can't pin point a solution in google.
I have a jquery slideshow, which I wrapped inside a function because I have some addition animation to go with it, please see below...
// my slider function
bikeSlider = function () {
var slider = $('#bike-minislider').bxSlider({
displaySlideQty: 5,
infiniteLoop: false,
hideControlOnEnd: true
});
$('#bike-minislider-fade').fadeIn();
};
// this runs the function
bikeSlider();
As you can see, immediately after the bikeSlider function, I run the function using... bikeSlider();
Now later on, I hide some slides within the slideshow using jquery .hide().
Because my jquery slideshow function, calculates the number of visible slides within the #bike-minislider div, it means that the new number of visible slides causes the slideshow to not work. I guess it needs to re-calculate the new number of slides.
In a nutshell, I think this can be resolved by running the bikeSlider(); function again.
So I tried this below, but it did not work.
bikeFilter = function (y) {
$('.bike').fadeOut();
$('.bike[data-group=' + y + ']').fadeIn();
bikeSlider();
return false;
}
As you can see I am trying to re-run the function bikeSlider(); - but it seems to be running this over the top of the old one, so my question is, how do you remove the original slide function before running it again.
Or reloading/refreshing the original function so it re-calculate the new number slides?
Any pointers would be so helpful.
Thank You.
As i understood you dont need re-create slider, but you do exectly this by calling twice
bxSlider()
According doc you need reinit slider by
reloadShow()
//Reinitialize a slide show
For more info take a look here bxslider in section Public functions
You need to call reloadShow() for slider-object
var mySlider;
$(function(){
mySlider= $('#bike-minislider').bxSlider({
auto: true,
controls: true
});
mySlider.reloadShow();
})

Image map with overlay not working in IE

I am trying to create an interactive map with an overlay using html image maps.
To see it, please visit: http://www.surge.ca/testing/WFA2100/index.html
The explanation:
When you hover over an <area> of the map, it bring up an overlay with links.
To prevent the overlay from closing when you move to it, as you are no longer hovering over the area, I am using a setTimeout before it closes the overlay.
The problem:
It works like I want in every browser but IE.
In IE 7 and 8, when you hover over an overlay that is above another <area>, it immediately switches to the overlay of that <area>.
At first, I thought it was a z-index issue where the <area>'s z-index was above the overlay, but I think my z-index is set up correctly. I am also thinking that it could just be how IE handles image maps?
The code:
Here is the code that sets up the events.
jQuery(function($){
// binds mouseenter and mouseleave to <area>
$('area').bind('mouseenter',function(){
sectionNum = this.hash;
sectionNum = sectionNum.replace(/#/,'');
showOverlay(sectionNum);
clearTimeout(timer);
}).bind('mouseleave', function(){
timerClose();
});
$('.map_info').bind('mouseenter', function(){
clearTimeout(timer);
}).bind('mouseleave', function(){
timerClose();
});
});
// sets timer before closing to allow cancel
var timer;
function timerClose(){
timer = setTimeout(function(){hideOverlay();},500);
}
The problem is that IE clear the setTimeout when hover ends. I didn't ran your code but I had same problem and cpuld fix it by passing the setTimeout function as an string.
For example setTimeout(alert('hi'), 1000) wasn't working on a function that was running in a hover state but setTimeout("alert('hi')", 1000) was working.
In your code maybe replacing
timer = setTimeout(function(){hideOverlay();},500);
with
timer = setTimeout("function(){hideOverlay();}",500);
solve the problem.
It seems IE run code that passed in string in global scope.
Also I can see you have jQuery in your page. There is a jQuery plug-in called hoverIntent that do hover delay very nice. Maybe plug-in writer wrote more cross-browser code.
Let me know if it works. :)

Categories