Andrej Ilic February 2016

Is there any way to change an "anchor point" of a CSS attribute? (not of an element itself)

Since I'm not a "real" programmer, I apologize if I'm writing something undesirable. Give me negative points, delete my post, tell me I'm stupid, but please answer, I will really appreciate it :)

I'm animating these elements by changing their height attributes. As you can see, the anchor point of the element is on its bottom left corner, but the attribute "height" has its own "default" anchor point. Can it be on the bottom of an element? Can i do anything to make it happen without using the negative value for the "height" attribute?

function onmouseoverOne(){
  document.getElementById("one").style.height = "40px";
};
function onmouseoutOne(){
  document.getElementById("one").style.height = "50px";
};
function onmouseoverTwo(){
  document.getElementById("two").style.height = "40px";
};
function onmouseoutTwo(){
  document.getElementById("two").style.height = "50px";
};
function onmouseoverThree(){
  document.getElementById("three").style.height = "40px";
};
function onmouseoutThree(){
  document.getElementById("three").style.height = "50px";
};
@charset "utf-8";
*{padding: 0;margin: 0;}
body {
  background-color:white;
}
#container {position:fixed; top:50px; left:100px; width:300px; height:100px; z-index:1;}
#container p{position:absolute; top:100px; left:0px;z-index:3;}
#one {position:absolute; top:50px; left:0px; width:100px; height:50px; background-color:green; z-index:2; cursor:pointer;
-webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
        transition: all 300ms linear;
-webkit-tranform: translate(0,-50px);
   -moz-tranform: translate(0,-50px);
        tranform: translate(0,-50px);
}
#two {position:absolute; top:50px; left:100px; width:100px; height:50px; backg        

Answers


iulia February 2016

Here is an example for the first tab (you only have to apply it to the others by changing the correct heights).

Edit: Explanation

What you want to do is to remove the height and use margin-top css property instead. Calculate marginTop = initialHeight - wantedHeight and apply it onmouseoverOne() Then onmouseoutOne() reset to initial values again.

function onmouseoverOne(){  
  document.getElementById("one").style.height = "40px";
  document.getElementById("one").style.marginTop = "10px";  
};

function onmouseoutOne(){
  document.getElementById("one").style.marginTop = "0px";
  document.getElementById("one").style.height = "50px";
};

Post Status

Asked in February 2016
Viewed 2,668 times
Voted 13
Answered 1 times

Search




Leave an answer