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

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

Related

jQuery carousel slider with auto widths and direction based dynamic alignment

I'm looking for a responsive jQuery carousel content slider with custom/different/auto widths that scrolls by one item and aligns based on the direction.
For example if the user clicks on the right navigation arrow it should slide slide by one item to the first not fully visible item and it should be aligned to the right end of the viewport and if the user clicks on the left navigation arrow the slider should slide by one item to the first not fully visible item on the left end of the viewport and align it to the same end.
I've spent a couple of days searching for such carousel but so far with no luck. Some of the sliders/carousels I've looked into are: LightSlider, slick, Flickity, Glide, UIkit (getuikit) and more. I've even written a new navigation logic for Flickity using its API which almost does it but it's buggy and with a lot of animation problems.
$(document).ready(function() {
$('#autoWidth').lightSlider({
autoWidth:true,
loop:false,
pager:false,
prevHtml:'<',
nextHtml:'>',
onSliderLoad: function() {
$('#autoWidth').removeClass('cS-hidden');
}
}).goToSlide(6);
});
As a behavioural example open this link http://codepen.io/matthewd/pen/BKvjWM, click the left and then the right arrow.
Any suggestions would be highly appreciated.
Thank you!

BX slider auto and click issue

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.

fullpage.js go directly to clicked slide

I'm making an one-page website with fullpage.js.
http://alvarotrigo.com/fullPage/examples/continuous.html
If you look at the above example, when switching between 'First slide' and 'Third slide' using the navigation, the animation will jump from the first to the third slide with also going throught the second slide. Is it possible to jump (but still showing animation) directly to the correct slide without showing the slides inbetween?
silentMoveTo(section, slide)
Exactly the same as moveTo but in this case it performs the scroll without animation. A direct jump to the destination.
/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.silentMoveTo('firstSlide', 2);
source: https://github.com/alvarotrigo/fullPage.js#silentmovetosection-slide

AngularJS slide right / left animation

I'm trying to create a simple slide animation with AngularJS.
I have a feedback tab that when someone click on it it will slide from right to left and will open, another click will do the animation again and will close it.
The thing is i'm not sure how to create the slide animation.
I read about that that ng-animation is obsolete and now i need to use class and it automatically hook on ng-hide and ng-show
I have 2 div elements:
<div class="feedback-close" data-ng-hide="feedback_open" data-ng-click="feedback_open = !feedback_open"></div>
<div class="feedback-open" data-ng-show="feedback_open" data-ng-click="feedback_open = !feedback_open"></div>
i need some code that will make the slide animation from close to open and from open to close.
can anyone help me out ?
a nice slide example will be in here : http://feedback-me.appspot.com/example_bootstrap.html

Automatically showing div on mouseover

This is probably a simple problem I'm having, but for the life of me, I can't seem to figure it out. If any of you could help me with this, I would be much obliged.
I'm using JQuery to make a menu appear when a user hovers over a certain div. The menu will be displayed on the top left of the div.
I got this to work, but when I try to click on a menu item of the div that appeared, the div disappears again, because the mouse is technically not over the div, but over the menu.
In the example below, "#blockMenu" is the menu that dynamically appears. I fade the current div ($this)) out a bit, to emphasize the menu as well.
I use the following code to make this happen:
$("div.editable").hover(function () {
$(this).fadeTo(500, 0.25);
$('#Menu').css("position", "absolute");
$("#Menu").css("top", $(this).offset().top);
$("#Menu").css("left", $(this).offset().left);
$("#Menu").css("zIndex", "10000");
$('#Menu').show();
}, function (e) { // on mouseout
$(this).fadeTo(500, 1);
$("#Menu").hide();
});
I want the menu to disappear when the cursor leaves the div, while the div remains faded out when the cursor is on the menu. When the cursor leaves the menu AND the div at the same time, the div should fade back in and the menu should disappear.
Does anyone have an idea of how I could edit my code to make this work correctly?
Thank you very much for any help you can give me.
Just use the :hover pseudo class, that's likely to help the situation. You'll lose animation effects, but it could sure make things easier, and take javascript out of the picture
Add a hover function for the menu and set some state when the mouse is hovering over the menu and only take the menu down if the mouse is not over the div AND not over the menu.

Categories