We Keep Coding

Get Object to Fly From the Left Side to the Right Side of the Screen

Starting with this fiddle we see a basic animation of a box flying from its start position to its finish position. This is the known good code. (I tried it as a stackoverflow snippet, but it didn't work here for some reason.)
HTML
<div id="start">Start</div>
<div id="finish">Finish</div>
<div id="fly">Fly</div>
CSS
#start{
position:absolute;
background:red;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:0px;
}
#finish{
position:absolute;
background:blue;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:200px;
}
#fly{
position:absolute;
background:yellow;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:0px;
transition:1000ms;
}
#fly.finish{
left:200px
}
JavaScript
document.getElementById("fly").className = "finish";
-
Unlike the fiddle above this fiddle below however does not work. Rather than transitioning gently from the start location to the finish, it starts at the finish. This is because it should transition from a "left" property to a "right" property.
HTML
<div id="start">Start</div>
<div id="finish">Finish</div>
<div id="fly">Fly</div>
CSS
#start{
position:absolute;
background:red;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:0px;
}
#finish{
position:absolute;
background:blue;
height:100px;
width:100px;
line-height:100px;
text-align:center;
right:0px;
}
#fly{
position:absolute;
background:yellow;
height:100px;
width:100px;
line-height:100px;
text-align:center;
left:0px;
right:auto;
transition:1000ms;
}
#fly.finish{
right:0px;
left:auto;
}
Javascript
document.getElementById("fly").className = "finish";
Although I understand why this doesn't work, I need a box to fly to the right of the screen from just off the left edge of the screen. Most solutions to this issue either look strange on extremely wide screen devices, or have a slow response time on narrow mobile devices. I want an animation that's responsive to browser width, travelling more slowly across narrow screens and more quickly across wide screens.
What is the most elegant solution for this?
Ideally I'd like not to use any external libraries, but if I must, the page is already using jquery, so that would be the ideal one to use if that helps.
I'm not opposed to writing extremely long JavaScript functions, but shorter is always better.

As you know that the animation doesn't work cause can't animate two different attributes, in this case, changing left and right value in hope for the element to be animated.
My suggestion would be this:
#fly.finish {
left:calc(100% - 100px);
}
this is assuming that the box is always 100px width. Hope it helps!

Change your flying elements "left" property to (100% - elements width) as shown below.
#fly.finish{
left: calc(100% - 100px);
}

Make a div position relative to another that is static

I'm trying to make a fullscreen site, also responsive, but on smaller screens the elements in the container overflow making it not 100% it varies depending on how many items are in it. Using:
top:100%;
position:relative;
width:100%;
height:100%
works, only if the screen is a certain size, on mobile devices using that it doest work, and appears half on the previous container.
Is there a way to position from the bottom of the element rather than top?
http://jsfiddle.net/q8tvwm2k/2/
Update:
Never minds found a pretty bad but working solution.

I'm pretty sure you really want a position:absolute to have another div relative to it. You just didn't word the question correctly. position:relative sets the point to which its children can be position:absolute, which is where you want to use top and the like. This is the structure you need to see:
HTML
<div class='surround'>
<div class='inside'>
<div class='outer'>
<div class='inner'>
</div>
</div>
</div>
</div>
CSS
.surround{
position:relative;
}
.inside{
height:100px; width:100px; position:absolute; top:100px; left:100px;
}
.outer{
height:100px; width:100px; position:relative;
}
.inner{
position:absolute; top:30px; left:10px;
}

Grid Height Issue between divs?

I have created div grid system with HTML and CSS using the float:left method.
It works fine, however whenever there is a variable height difference between two divs in the same row, the next div starts at the bottom most position just below the div that has the greatest height.
Here's the codepen:
http://codepen.io/anon/pen/GJZWoX
CSS:
.parent{
width:330px;
}
.red{
float:left;
width:150px;
height:150px;
margin-bottom:10px;
margin-left:10px;
background-color:red;
}
.blue{
float:left;
width:150px;
height:300px;
margin-bottom:10px;
margin-left:10px;
background-color:blue;
}
Is there a way to solve this error using just css? Any good answer would be appreciated.
This is what I'm looking for:
Thank you

Just CSS? With flexbox you could http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox
But I would opt for Javascript as a more robust (and slightly better browser support at the time of posting) approach.
via JQuery Masonry http://masonry.desandro.com/ (supported from IE9+)

Is it possible to change z-index for a child element of a div even with some workarounds or hacks?

I have two divs, I need to visually placing the parent div on top (covering) the child div.
I read other questions, an I am aware that child is on a different flow, also I understand that the easily solution would be to place parent and child on the same level, nevertheless I am interested to know if there is any workaround/hacks that could make the trick.
I targeting only the latest version of Chrome and Firefox, any solution CSS3 also is welcome.
Notes:
I need to keep the z:index on the parent.
In my real code the parent is transparent, it need to grab user interecation.
Child cannot be hidden, must be visible.
http://jsfiddle.net/qn3n4ynw/1/
<div id="parent">
<div id="child"></div>
</div>
#parent {
position:absolute;
width:100px;
height:100px;
background-color:red;
z-index: 100;
}
#child {
position:absolute;
width:50px;
height:50px;
background-color:green;
z-index: 1;
}

Remove z-index from #parent and change z-index of child to -1
DEMO HERE
#parent {
position:absolute;
width:100px;
height:100px;
background-color:red;
}
#child {
position:absolute;
width:50px;
height:50px;
background-color:green;
z-index: -1;
}

I would not recommend to put a child div behind a parent div. Probable solution would be (if the parent is grater than the child and covering it entirely which is the case due to the above CSS):
make the child invisible and visible again
jQuery("child_selector").toggle(duration, function () { ... on complete });
Edit:
working demo here

Child image not allowing top layer change onmouseover

Running into a problem that seems to ONLY be an issue with IE, and I'm not sure how to fix it. I know a lot of people do this but I'm not sure how to make it properly work with IE.
I'm working on an ecommerce site where we want some details of a product to overlay over the top of the product image when hovering over the image. The containing DIV is the javascript trigger, but if your mouse hits the image before it hits the div, the div class change doesn't execute.
http://jsfiddle.net/eQMzg/
If you go to the jsfiddle, if you start the hover from the right or left side of the div, it works perfectly. If you start it from the bottom or top, where the image is expanded to, it doesn't.
<div class="product">
<div class="product_activitylayer" align="right" onmouseout="this.className='';this.className='product_activitylayer'" onmouseover="this.className='';this.className='product_activitylayer_hover'">
</div>
<div class="product_containertop" align="center">
<img src="images/demoimages/product.jpg" height="160">
</div>
</div>
.product {
width:244px;
height:221px;
display:block;
float:left;
margin:0px 3px 5px 0px;
border-top:solid;
border-top-color:#10B0E5;
border-top-width:6px;
}
.product_containertop {
height:160px;
width:244px;
background:#FFFFFF;
border-bottom:solid;
border-bottom-width:1px;
border-bottom-color:#C7EEFA;
margin-bottom:2px;
}
.product_activitylayer {
height:160px;
width:244px;
position:absolute;
z-index:999;
}
.product_activitylayer_hover {
height:160px;
width:244px;
position:absolute;
z-index:999;
background:#00CCFF;
opacity:.5;
filter:alpha(opacity="50");
}

John,
This one is a known bug in IE. If any element has transparent background - IE does not takes executes the hover on it. You can fix it by applying the background to .product_activitylayer and set it's opacity to 0
See I updated your fiddle.
http://jsfiddle.net/NETJ4/1/
.product_activitylayer {
height:160px;
width:244px;
position:absolute;
z-index:999;
background:#00CCFF;
opacity:0;
filter:alpha(opacity="0");
}
Or here is a improved version using jQuery
http://jsfiddle.net/zzLr6/2/