BX slider auto and click issue - javascript

I have made this slider with auto slide show. I also need manual controls working well on it, even if used with regressively slide switching. Problem comes when I click on labels for navigation very fast and randomly, it gets stuck at some point and doesn't switch to clicked slide instead it moves to its next slide. Please refer this fiddle: http://jsfiddle.net/Bhumika107/zbrcww6a/10/.
I also tried stopping auto and then replaying it on click event of labels:
$(document).on('click','.bx-pager-link',function() {
slider.stopAuto(); // stops auto on click of pager
slider.startAuto(); // starts auto on click of pager
});
But it doesn't make any difference.

Related

fullPage.js scroll to a specific Slide on click of button

I am using FullPage.js plugin, When on slide 2, 3, 4 and when the menu bar is visible and when i click the Signup link on the Menu bar i want to have a smooth scroll to the first slide. But the following code seems to jump to the slide 1 directly. Is there a way to make it a cool scroll sliding effect.
Also i want to focus on the Email Text Box upon reaching the slide. That does not seem to happen either.
$('.highlight a').click(function(){
$.fn.fullpage.setAllowScrolling(true, 'all');
$.fn.fullpage.moveTo(1, 0);
$('.input-hero').focus();
});
Testing

First slide doesnt show in jQuery Royal Slider within tabs

I am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks
The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.

Jquery Remove Clear Top CSS attribute

I am creating a hover over button, once hovered it will scroll up to unreal more content over my slideshow, but when I hover over the button it pulls up but wont come back down.
Click here to see live, hover over Contact Our Team Button on slider
jQuery(".buttontwo").hover(
function(e){
jQuery('.buttontwo').animate({top:'0px', bottom:'auto'}, 200)
},
function(e){
jQuery('.buttontwo').animate({bottom:'75px', top:'auto'}, 200)
}
);
Any ideas guys?
Thanks
Try adding a fixed value to the top property in the second function().
However you should be aware that as soon as you hover the button and the animation starts the second function will be triggered since you're not hovering the button anymore.
You might have to find a different way to animate that, perhaps adding aonMouseEnter / onMouseLeave event to the button's container.

Scroll up menu style with hover

Need help.
I have make some menus with vertical scroll on hover event, there are 3 menus (home,download,contact). The Scroll effect on hover event has worked, but on click event some bug occur (some menus can't scroll down/scroll to grey side with animation) when other menus has been clicked. the bug occur when i clicked menus in some sequence:
1. download then contacts
2. contact then download
3. contact then home
this is my code in jsFiddle
and when i run the code on firefox with firebug some error appear after i do mouse over and mouse out on clicked menu.
Error Print screen:
Thank for advance :)
The reason behind the freezing of the scroll event, when you click on a menu is that, after you click , the menu becomes disabled, hence your background-pos never changes and so , the method css(bg-pos) becomes undefined and you are again trying to do (undefined).split(), which is not possible and hence the animation freezes.
What you need to do is on click, you need to enable the menus again. This is done through this code:
$.fn.stopBG = function (x, y, speed) {
if(event.which == 1){
$("#home").removeClass('disable1').addClass('enable1');
$("#download").removeClass('disable2').addClass('enable2');
$("#contact").removeClass('disable3').addClass('enable3');
}
var pos = this.css('background-position').split(' ');
I have updated your fiddle, see this one : http://jsfiddle.net/VSTAm/3/
I have tried this fix in chrome...it works properly there.

Help needed centering thumbnail based on class name - Jquery

I have a slide show component I've been working on that is a mash up of jcycle and jcarousel. It works rather well, yet there is one last feature I'd to add that I cannot figure out. Right now if you click on a thumbnail it will center it in the carousel as long as it's not the first 2 or last 2 thumbs. This works great and I like centering the active thumbnail of the slide show.
The problem I'm running into is if the user hits the play button on the slide show or the next and previous slide buttons, the slide show cycles, yet the active slide thumbnail does not center in the carousel. I've tried unsuccessfully to check if the thumbnail anchor has class, activeSlide, and if so to center it, yet cant seem to get it to work.
Here is a link to the demo page I've been working on.
http://brettjankord.com/standards/slideshows/jslideshow-test2.php
Any help is greatly appreciated!
Put the following at the end of your onBefore method
var carousel = $('#mycarousel').data('jcarousel');
var activeIdx = $('#mycarousel img[src="'+next.src+'"]').closest('a').data('index') -2;
if (carousel)
{
carousel.scroll(activeIdx);
}
Demo at http://jsfiddle.net/JupPn/1/

Categories