Develop Reference

Vue and Vuetify Animation Content Jump

When the Vue animation ends the content "jumps" back up as you can see in this example:
https://codepen.io/propsoft/pen/PRYjBZ
<transition name="slide-y-transition">
<div v-show="compare">
Here is the hidden {{ content }}
</div>
</transition name="slide-y-transition">
Any ideas on how to fix this issue?
Cheers!

The problem with the animation is that it uses transform: translateY(-15px);, which causes only a visual translation of the content but the div is still occupying the same space. One way to fix that is to animate other properties, like height for example. The drawback with that is that the div needs to have a fixed height, which may not be possible in all situations.
You can test different approaches without animating anything, see what causes the div below to actually be displaced or not. And then you can animate that.
Check out this codepen with your example animated using height: https://codepen.io/noeldemartin/pen/ommxZG

Animating Width of Flexbox Parent Doesn't Affect Children?

I'm trying to use TweenLite to tween in the width of the blue sidebar down to zero. Unfortunately, the content of the blue sidebar breaks outside of the bounds of the parent.
This is something that really should never happen with Flexbox, but the child elements are also Flex containers so I'm sure what I'm doing wrong here. :( If anyone has any suggestions please let me know. Thanks!
Here a link tot he live demo: https://jimtheman.github.io/Flexbox-Push-Drawer-Example/#/
And here you can read the source code: https://github.com/JimTheMan/Flexbox-Push-Drawer-Example/tree/gh-pages
ps. Id like to get this working, but I'm wordering if there is a way to get the center green piece to stretch to fill the container as the blue column shrinks without using Flexbox.

Setting overflow:hidden on the `.whole-app-container' element solved my problem.

positon element relative to parent.parent container in JS? no absolute/fixed positioning?

I have a tough problem where I'm desperately trying to find a working solution.
A article#post and a aside#sidebar are floated left side by side - fairly simple.
Inside my article#post is a h1 and a div.post-entry.
I wonder if I can somehow determine the relative offset of the div.post-entry to the outer container section#content. The reason I want to do this is so I can position the floated sidebar with a margin-top on the same height as the ´div.post-entry` is.
Here is a model of my current html structure:
<section id="content">
<article id="post">
<h1>Title of the post</h1>
<div class="post-entry">
<p>Something</p>
</div>
</article>
<aside id="sidebar>
Something
</aside>
</section>
So again, I'd like to find any solution to get a pixel-value of how far from the top div.post-entry is positioned inside section#content.
The main problem I have is that I can't even seem to post-entry.offsetTop to work. This should get the offset of div.post-entry relative to the article.post since this is its parent. That should actually work for me too.
var articleOffset = $('.post-entry').offsetTop;
console.log($('.post-entry')); //found and exists
console.log(articleOffset); undefined
Any ideas why this does not work for me either? Why do I get undefined for the offsetTop value here. There is a big <h1> with a padding of at least "30px" that offsets div.post-entry.
Any ideas on that matter?
Maybe any other cool solutions on how to do that? I just want to have the aside#sidebar starting on the same height as div.post-entry but I don't want to change the markup.

You need to select the DOM element from the jQuery object.
var articleOffset = $('.post-content')[0].offsetTop;

CSS placing elements without affecting one another dynamically using javascript

I was trying to create an image map tool as part of my project
http://jsfiddle.net/MBThE/12/
Full screen result : http://jsfiddle.net/MBThE/12/embedded/result/
I tried to place the links as divs and positioning using css..
But the problem is that adding or deleting new hot spots reults in repositioning of other elements..I found the solution for this as
position:fixed for hot spot divs ..But this makes the hotspots remain there itself even if user scrolls down or up....So is there any way to find the number of pixels scrolled up or down using javascript and trigger an event when scrolling happens,so that i can increment or decrement the divs positions according to scrolling ?
I consider another alternative as HTML5 canvas....But that results in unwanted resizing of image...
So is there any way to make the divs does not affect each other but also place them inside the container div?
Note:- click 'add hot spot' button and click on the image to add hotspot..hover the hotspot to edit the hotspot

Yes, position:absolute will position absolutely based off of the closest parent that is either position:absolute or position:relative. So you could use the following to create a parent and then position within it.
<div style="position:relative" id="parentDiv">
<div style="position:absolute; top:15px; left:15px">I am 15 pixels from the top and left side of my parent div </div>
<div style="position:absolute; top:30px; left:30px">I am 30 pixels from the top and left side of my parent div </div>
</div>
hope that helps

Container div over its content

I've got this HTML. Flash# divs are for flash objects (swfobjects). There is a container div container2 which I want to place it over its content, like a curtain when flash objects are updated and rebuilt to prevent the user from clicking them.
//rest of html code
<div id="container2">
<div id="flash1"></div>
<div id="flash2"></div>
<div id="flash3"></div>
<div id="flash4"></div>
</div>
//rest of html code
I've tried an absolute positioned div over the flash divs to achieve this but this doesn't work with jQuery slidetoggle effect which I use in a previous div (it has a weird width behaviour that narrows the page) therefore I've decided to try this different approach, which also seems to be more efficient.
Any idea of how to achieve this? I'm open mainly to jQuery but also to strict Javascript or whatever.

Delete div when slide up.
Add div when slide down.
Good luck =)

For me you have to add another div inside the container and use it to overlay the flash objs. Leave the container in position:relative and overflow:hidden and use a div child to cover the content!
Marco

I eventually follow the workaround proposed by mkk. This is to completely delete any applied rule to the slid div and have just worked for me.
Simple but effective.