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
Related
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
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.
Im trying to write a simple script that slides the next 'slide' div in on a button click, I have 3 divs all inline, left alligned. theyre all set to a width, on 'next' button click id like the next slide to slide in, ive made the following fiddle only I cant seem to get it working...
Can anybody see where im going wrong?
http://jsfiddle.net/x2qk7/
Thanks
I think the problem is the positioning and the initial value of left. Try something like this:
.slide {width:788px;float:left;left:0;position:relative;}
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.
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/