I have two containers:
<div class="left">
<div id="myDiv">A Div</div>
<div id="myDiv2">A Div</div>
</div>
<div class="right">
<div id="myDiv3">A Div</div>
</div>
The first contains div elements, which are moved with the following jQuery:
$(".left > div").click(function(){
$(this).appendTo('.right');
});
The above, however, provides no animation. I would like to use a CSS transition to animate each div between the two parent elements (From .left to .right).
By the way, this is my CSS:
.left, .right{
position: absolute;
display: block;
box-sizing: border-box;
width: 50%;
height: 100%;
}
.left{background:red;}
.right{background:green; left: 50%;}
.left > div, .right > div{
display: block;
height: 100px;
width: 100px;
margin: 10px;
float: left;
background: #fff;
color: #000;
}
And a Fiddle: http://jsfiddle.net/x270Lndz/
I figure I need to get coordinates and transition between them, outside both .left and .right.
This has already been answered: https://stackoverflow.com/a/974765/2725684
The problem is 2 parts, moving elements in the DOM, and animating that movement, but the suggested is:
Store the position of the div, in its resting state, in the first column.
Append the div to the second column, store that position.
Turn off the visibility of the div.
Create a clone of the div, positioned where the resting state one was at.
Animate this clone across to the position of the appended div.
Turn off the visibility of this clone.
Turn back on the original div that was appended.
The javascript/jquery will execute this so fast you won't see the turning off/on of the divs and it will just appear as if the div they are seeing is the only one that ever existed.
Try adding transition: 0.5s ease-in to the .left div
Ultimately, this is going to be a lot of work, and I don't think I have the time to write every step out in full. But, if you're committed, here goes:
Call getBoundingClientRect() or similar on the first element to get its absolute document position relative to the document / viewport.
Use the same function, and getComputedStyle()s padding to determine the exact pixel at which content would begin in the second div.
Determine the difference between the two coordinates, in order to fake the transition while the elements are still inside their first parent. (Or, move them first, and fake the transition after)
Apply the correct transform: translate style to the elements, so that they'll appear to move into the other container. (This is assuming you have the transition properties set up correctly in CSS)
On the transitionend event, turn off transitions, remove the transform property, and do the actual child move.
Pat yourself on the back and go home early.
So there you have it. There's likely going to be a lot of math involved and small additions/subtractions I'm not able to predict. Hopefully, that outline helps you get started at least. You might also be lucky enough to find an animation library that does all of this for you. (Also note that I assumed the presence of several functions not supported on all browsers, so check to make sure they're okay by your book)
I wrote a jQuery plugin:
$.fn.transitionTo = function(target){
this.each(function(){
$this = $(this);
marginLeft = parseInt($this.css('marginLeft').replace("px", ""));
marginTop = parseInt($this.css('marginTop').replace("px", ""));
offset = $this.offset();
$new = $this.clone().appendTo(target);
offsetNew = $new.css('opacity',0).offset();
$this.css({
position: 'absolute',
left: offset.left - marginLeft,
top: offset.top - marginTop
}).appendTo("body");
setTimeout(function(a,b){
a.css({
left: offsetNew.left - marginLeft,
top: offsetNew.top - marginTop
});
setTimeout(function(a,b){
b.replaceWith(a.removeAttr('style'));
},2000,a,b); //Anim time
},10,$this,$new);
});
};
It is called similarly to .appendTo:
$(".left > div").click(function(){
$(this).transitionTo('.right');
});
...and only requires transition: top 2s ease, left 2s ease; on the div.
Fiddle: http://jsfiddle.net/d9yxrmvo/1/
The only known issue with this plugin is the lack of support for animating the original element's siblings.
Related
im working on some graphic representation of journal issues. What I need is to display block of text using simple DIVs (or else) inside of other DIV, exactly the way they are organized on issue page. To do that I need to set coordinates of DIV element to exact number, but in relation to parent DIV. Is there any way to do that by using css or js??
If you outer div is set to position: relative, you can have the inside div as position: absolute and set its top, left, right and bottom properties to the pixels you need. For example.
.outer {
position: relative;
}
.inner {
position: absolute;
top: 10px; //your coordinate
left: 5px; //your coordinate
}
<div class="outer">
<div class="inner">Your content</div>
</div>
Otherwise, you can simply use padding on the inner element.
If you want the div to be display: block;, you can use simple margin-top and margin-left to set coordinates.
Lets say (for example) you need to set the coordinates of the div as <100,50>:
To do that, in CSS, set margin-left: 100px and margin-top: 50px
I'm using JavaScript's .toggle() to have this appear/ disappear:
{
display: none;
position: fixed;
top: 100px;
right: 0;
left: 0;
background: rgba(0,0,0,0.75);
padding: 15px;
}
However, over the duration of the animation it starts from the top-left corner and expands out to the bottom-right corner of the div.
Ideally, I'd like to start it from the both top corners and expand downwards to both bottom corners evenly.
I thought the CSS transition-origin property might have an effect, but it doesn't seem to be the case.
Any ideas? Thanks in advance. :)
I would start a height of 0 and the animate the height property.
function toggle() {
var el = document.getElementsByTagName('div')[0];
if (el.className) {
el.className = '';
} else {
el.className = 'grow';
}
}
div {
background-color: black;
width:200px;
height: 0;
}
.grow {
height: 200px;
transition: height 2s;
}
<button onclick="toggle()">Toggle</button>
<div></div>
I don't know much about jQuery's toggle method, so I looked in the docs, and sure enough it gives some helpful info. (This is a gentle hint that before coming to StackOverflow you should try solving the problem on your own, including looking at any relevant documentation online).
The .toggle() method animates the width, height, and opacity of the
matched elements simultaneously.
The documentation doesn't give any info about customizing how toggle does its animation, so it looks like you're stuck. If I'm understanding you correctly, it seems like you want the element to animate only the height and not the width, so it stays the same width as it toggles and just animates the height. I don't see any way of doing that with jQuery's toggle.
BUT WAIT! It looks like jQuery has another method called slideToggle which does exactly what you want. It's just like toggle except it only animates the height and keeps the width the same. Hooray!
http://api.jquery.com/slidetoggle/
Moral of the story: if you're using a third party Javascript library like jQuery, you really need to get comfortable finding the information you need in the online documentation my friend. :)
I have a problem with a CSS transition. I need to change the height of the parent div relative to the child divs in the transition.
I am using CSS which has a number of steps which slide from right to left as the user clicks continue (Magento onepage checkout with progress bar).
The problem is that the parent container .opc has a height of 970px but the heights of the additional steps vary so I need to find a way to make the parent DIV .opc change height to accommodate the sizes of the remaining steps.
.opc { position:relative; overflow:hidden; height:970px; padding-top:20px; text-align:center; }
I've tried adding height: auto; or height: 100%; but the remaining pages still don't fill the page and I am not sure how to solve it!
Is there a way to affect the height using jQuery or Javascript, maybe pure CSS?
I'm thinking jQuery to detect which step the user is on the adjust the height of the container to fit the content?
<script>
jQuery(document).ready(function(){
if('#opc-billing'){
jQuery('.opc').height(1200);
}
if('#opc-shipping'){
jQuery('.opc').height(500);
}
})
</script>
Although the above solution doesn't work :(
Any help would be appreciated guys!
Here is a quick demo that might help:
I am simply adding a CSS transition property to the parent as well, and adjusting the height at the same time as the position of the child.
http://jsfiddle.net/qF3u7/
.parent {
background-color: lightyellow;
-webkit-transition: height 2s;
height: 50px;
}
.transit {
position: relative;
top: 0;
width: 50px;
height: 50px;
border: 1px solid red;
-webkit-transition: top 2s;
}
PS: Run this in chrome as I didn't bother with the other browser prefixes for the CSS.
Although it is not a very dynamic function what you have is getting there. Try this:
$(document).ready(function{
var x = $("#opc-billing").height();
var y = $("#opc-shipping").height();
var opc = $(".opc");
if (x === 600){ // - The number values are just examples of course.
opc.height(1200);
}
if (y === 200){
opc.height(400);
} else {opc.height(300);} // - default height, could be left blank if set by CSS(example - else{})
})
DEMO
Keep in mind that when using the height() method results may be unexpected because height() returns the computed value of an element which does not include padding, border or margin and does not take into account something like when a page is zoomed in. Learn more about height() here. To get total height including padding, border and margins use outerHeight().
UPDATE: I added some extra bells and whistles to the JSFiddle. Check it out!
I've a problem, when I set container element:
position: absolute;
left: 10px;
bottom: 15px;
And initialize draggable, bottom part of the element gets stuck to the border, and it is basically resizing rather than dragging.
http://jsfiddle.net/JVSFS/83/
So what do I do?
jQuery draggable works by modifying the left and top css properties of an object.
Set the top property instead of the bottom.
I know it sounds like a cheap trick, but it's the fastest solution I found here.
You might want to go about it by removing
.popup_click {position: absolute
left: 10px;
bottom: 15px;}
and replacing it with: .popup_click {top: 92%;
left: 1%;}
Fiddle
Please note that the percentages are just estimates based on where you had it placed before.
It is doing what you told it to do. When you set bottom to be 10px on an absolutely-positioned element, the bottom of that element will stay 15px from the bottom of its parent container.
It might be better in your situation to set the CSS to position:relative using mousedown() in your jQuery.
display:none takes the element away from the layout flow and thus not taking up space on the page but its events get disabled.
visibility:hidden hides the element, but the element still takes up space.
I need a way to hide a file input element without taking up space and responding when I call its .click() event.
Example
Simply setting opacity to 0 should work. The element won't show up, and it wont take space either. And its events will work.
When giving opacity, also specify the opacity counterparts of all browsers (-moz.., -webkit, filter: ..) etc.. to ensure cross-browser compatibility.
EDIT
Your style should look something like:
.mydiv {
position: absolute;
left: 10px; /* change as needed */
top: 10px; /* change as needed */
opacity: 0;
}
Working demo here: http://jsfiddle.net/t2BHg/6/
Setting display: none; does not disable events for an element, but it will prevent it from being clicked because the element has no pixel dimensions to click into. You can still call its onclick events programmatically. See an example
How about making it invisible, but with absolute positioning off the left of the screen:
CSS:
#yourelement, .hidden {
visibility : hidden;
position : absolute;
left : -1000px;
width : 1px;
height : 1px;
overflow : hidden;
}
You could make it visibility: hidden and set width and height to 0
Less code:
position: fixed; z-index: -1;