How to simulate a "min-top" in css

Asked

Viewed 229 times

0

Someone knows a way to simulate a "min-top" in an element? Maybe using JS or Jquery... I’m using the scale() in an object, but the function causes the element to change position. I would like you to apply scale() the object always stays below this element of position Absolute... It would be possible ?

<style type="text/css">
    .papel {width: 297mm;height: 210mm; background-color:#CCC;border: 3px solid gray;top: -45%;left: 0%;position: absolute; overflow:hidden;transform:scale(0.5) translate3d(0px,0px,0px); margin-bottom: 80px;transform: translate3d(73px,521px,0px);}
    .mover{position:absolute; cursor:move;}
    #menu{width:100%;height:150px;background-color:blue;}
</style>

<div id="range-input">
        <input type="range" id="zoompapel" min="0.1" max="1" step="0.1" />
</div>

<div id="menu">
    MENU SUPERIOR
</div>
<div class="papel mover" id="papel">
  TESTE
</div>

<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">

$('#zoompapel').change(function(event) {
        var value = $('#zoompapel').val();
           $('#papel').css({
              '-webkit-transform' : 'scale(' + value + ')',
              '-moz-transform'    : 'scale(' + value + ')',
              '-ms-transform'     : 'scale(' + value + ')',
              '-o-transform'      : 'scale(' + value + ')',
              'transform'         : 'scale(' + value + ')'});
            $("#papel").css('position','absolute');

 });
</script>
javascript jquery css html5

  • pass the code and help, there are several advanced css min, see also SASS.

  • @Kingrider Displayed the code for better understanding... Wouldn’t want the paper div to exceed the div menu...

  • _user48796: I saw code, why are you using val() ? and see position difference http://i.imgur.com/X2mobbg.png ... you want animation move mouse to open menu side box is that it? I can do for you.

1 answer

1

CSS:

#div1 {
    min-height:50px;
    background-color: #fee;
    margin-bottom:-50px;
}
#div2 {
    margin-top:50px;
    background-color: #efe
}

http://jsfiddle.net/vVsAn/5051/

Upshot:

When the div1 is hidden, div2 has the top property of 50px

When the div1 is not hidden:

If the div1 is less than 50px in height, then div2 is positioned at 50px.

If the div1 is more than 50px high, the div2 is positioned just below the div1.

Translation of: https://stackoverflow.com/questions/15552358/is-there-a-css-min-top-property

Browser other questions tagged javascript jquery css html5

You are not signed in. Login or sign up in order to post.