I have been trying to trigger two animations placed at two different places simultaneously to move them away from each other via JavaScript - {{id}}.className. But as soon as the animation begins, the second element with id - p2 displaces automatically from its original position just before the animation starts.
Here is my Codepen link. And yeah, I'm using Bootstrap with this.
Can anyone help me out?
UPDATED
You remove all the class values from your two divs when you click on button.
So just replace :
e2.className = "pop2";
e1.className = "pop1";
By :
e2.classList.add('pop2');
e1.classList.add('pop1');
That will add the new class (pop1 and pop2) to the others existing by default (col-sm-7 and col-sm-5) and it work perfectly.
Related
I am using cubeportfolio to get masonry filterable portfolio. Worked like a charm, but then I wanted to add a toggle inside the cbp-item.
This is the result (watch it on mobile): http://www.lichaamengeest.be/AA.php
You can see that, when toggling the content in the first cbp-item, the content comes up behind the cbp-item below, instead of the toggle content pushing the next cbp-item downwards. The height is not set fixed, so it should move freely.
The coder of cubeportfolio told me to add this code
jQuery('.cbp').cubeportfolio('layout'); But my unanswered question is: where and how to add that code? Here's the js file with toggle code: http://www.lichaamengeest.be/scripts/custom.js
I think your problem is the „position: absolute” on the „.cbp-item”. If you wrote the toggle function on your own try to get the height of the box and add this as new position for the following box, when you click on to toggle. So that it's recalculated it after every click.
I'm trying to create a custom carousel. The way it works is that the items are contained in two "piles", both piles contain the same items.
When you click the "next" button, the topmost item from the second pile moves to the top of the first pile. The last item in the first pile will then move to the bottom of the second pile, meaning both piles always contain the same number of items.
When clicking the "prev" button it needs to perform the reverse animation.
When moving items from the second pile to the first, this needs to happen with an animation.
I created a fiddle here https://jsfiddle.net/n109rpp0/3/ with the HTML I have produced so far, but I am struggling to work out a way to do the animation.
I'm not sure if I've taken the right approach, e.g. by having the items duplicated in two ul elements. Also how do I ensure the items are cycled in the correct order?
Does anyone have any ideas on how I should go about this?
Here is a quick idea how to achieve what you want. Add this:
$(prevItem).animate({left: '-345px', top: '-30px', width: '+=50px', height: '+=50px'});
$(prevItem).css('zIndex', '1');
to your next button functionality.
You need to play with the code to make perfect transition.
Here is an updated fiddle
Google animate function for jQuery and you will find more examples
I'm quite new at Angular and I am trying to create a small fadeIN/OUT animation for lists.
I have two lists, which i can toggle with a button on the top of the page. When a new list is coming, there is a small animation for fade-in and fade-out.
Please see following Plunker:
https://plnkr.co/edit/A8Aozfq2fHuUKQFaJm7l?p=preview
My problem is, that i want a "serial workflow". So when the first list is hided, then should come the second one - At the moment, there is a "parallel workflow". So how can i change that ?
Try increasing transition time. It can help.
I was wondering what could be the easiest way to add animation to some tab navigation.
I'm developing a small documentation website, Documentation, and as you can see I have that small arrow that adds up to the tab when navigation.
Well, what I was thinking is what if I can do it like this : Sample ; I tried something, I added a span via JS and then on click event ( applied to the li elements ) trigger the arrow animation. The thing is that doing that I stopped the script which is responsible for making the tabs work as they do stop.
So is there another way to achieve something like that ? And what would be the logic ?
Simplest would be to add a narrow absolute position div inside st_slide_container and position to the right. Inside that new element add another element that is just large enough for your arrow icon and is position absolute.
Either use callback of tabs change( depends on what is available in plugin API) or add another click handler to a.st_tab.
In this event handler you can get the index of current tab and apply animation of position top to the small arrow element
EDIT: Example of click handler to get index which would be multiplier for the top animation
$('a.st_tab').click(function(){
alert($(this).parent().index())
})
Greets,
First - this site is incredible. I've learned a ton of great things here!
I'm using a jquery based slider program to display a sequence of pictures (a series of books). Beneath the slider window I've positioned a "PDF" buttons. I'm trying to sort how to have the button download the file associated with whatever image is currently displayed in the slider box. So if "Picture #3" is showing in the slider window I need the PDF button to be associated with the respective #3 file. I believe I need to change each button's attributes dynamically to match what's showing in the slider window.
You can view the beta site at beta
I suspect I'll need some sort of javascript to snag the click event and feed it to the button's attributes. That's as far as my shaky legs can carry me with this one. Can anyone point me in the right direction? I'm a real noob at this and learning slowly so use small words!
Cheers,
TY
You're on the right track. I think this would probably work, but I'm not used to culling from arrays of jQ elements.
Put the filename into an alt tag in your list items, then use this script:
$('#download-button').click( function() {
var left_pos = $('ul').css('left');
var win_width = $('ul').innerWidth();
left_pos = left_pos * (-1) /* Will convert from negative to positive */
var slide_num = left_pos/win_width;
var slides = $('ul').find('li');
$(this).attr('src', 'path/to' + slides[slide_num].attr('alt'));
});
Also, upon checking the living DOM while playing around with the slider, I noticed that it seemed to jump a bit if you changed directions toward the end of/beginning of the slides. You may want to investigate that