how to start css transition from left

Question

I have four divs and i have applied javascript transition property to increase the width and height on button click but i need to increase the height and width in the the same screen

I want on button click these divs should remain in this screen.Now when i press the button(+) for tracking box it increases the width and height to the right which goes out of screen, ineed the width and height to increase in the left so that it remains in the same screen and overlaps other divs.

function changec() {
   var xDiv = document.getElementById('div1');

   if (xDiv.style.height == '') 
       xDiv.style.height = '480px'
   else 
       xDiv.style.height = ''

    if (xDiv.style.width == '') 
       xDiv.style.width = '850px'
   else 
       xDiv.style.width = ''
}
function changec2() {
   var xDiv = document.getElementById('div2');

   if (xDiv.style.height == '') 
       xDiv.style.height = '480px'
   else 
       xDiv.style.height = ''

    if (xDiv.style.width == '') 
       xDiv.style.width = '850px'
   else 
       xDiv.style.width = ''
}
function changec3() {
   var xDiv = document.getElementById('div3');

   if (xDiv.style.height == '') 
       xDiv.style.height = '480px'
   else 
       xDiv.style.height = ''

    if (xDiv.style.width == '') 
       xDiv.style.width = '850px'
   else 
       xDiv.style.width = ''
}
function changec4() {
   var xDiv = document.getElementById('div4');

   if (xDiv.style.height == '') 
       xDiv.style.height = '480px'
   else 
       xDiv.style.height = ''

    if (xDiv.style.width == '') 
       xDiv.style.width = '850px'
   else 
       xDiv.style.width = ''
}

.gh{width:96%;height:auto;padding:10px;border:1px solid #aaaaaa;clear: both;margin:10px 10px 10px 10px;overflow:none;
  position: relative;
  display: block;

}

.leftbox{clear: both;
  border:2px solid green;
  float: left;
  width: 100%;
  height: 280px;
  margin: 5px;
  overflow: none;
  overflow:scroll;
  transition: all 0.2s ease;
  z-index: 1000;
  background:white;
  position: absolute;



}
.leftbox2{
  border:2px solid green;
  float: left;
  width: 100%;
  height: 280px;
  margin: 5px;
  overflow: none;
  overflow:scroll;
  transition: all 1s ease;
z-index: 1;
  background:white;
  position: absolute;



}
.rightbox{clear: both;
  border:3px solid red;
  float: left;
  width: 100%;
  height: 280px;
  margin: 5px;
  overflow:scroll;
  transition: all 2s ease;



}
.rightbox2{clear: both;
  border:3px solid red;
  float: left;
  width: 100%;
  height: 280px;
  margin: 5px;
  overflow:scroll;
  transition: all 2s ease;



}

ul{
  list-style-type: none;
}
.go{
min-height:300px;
height: 800px;
width: 100%;
overflow:scroll;

  }
  .btn{
    width: 100%;
  }


<div class="col-md-8 red">
<div class="col-md-6">
 <h4 style="text-align:center">Done</h4>

<section class="leftbox" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" >
 <button id="menu" onclick="changec()" class="pull-right fixed-top">+</button>
   </section>
</div>

<div class="col-md-6">
<h4 style="text-align:center">Tracking</h4>
<section class="rightbox" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
 <button id="menu" onclick="changec2()" class="pull-right fixed-top">+</button>
 </section>
</div>
<div class="col-md-6">
<h4 style="text-align:center">Pursuing</h4>

<section class="leftbox2" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">

   <button id="menu" onclick="changec3()" class="pull-right fixed-top">+</button>
</section>
</div>
<div class="col-md-6">
<h4 style="text-align:center">Dropped</h4>

<section class="rightbox2" id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">

   <button id="menu" onclick="changec4()" class="pull-left fixed-top">+</button>
</section>
</div>
</div>

score 0 · Answer 1 · answered Jul 15 '16 at 14:07

I'm not really sure what you would want, but this is what I came up with:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="js/animate.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h2>Done</h2>
                </div>
                <div class="col-md-6">
                    <h2>Tracking</h2>
                </div>
            </div>
            <div class="row boxes">
                <div class="col-md-6">
                    <div class="box first">
                        <button class="left btn btn-default" onclick="change('.first')" type="button">+</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="box second">
                        <button class="right btn btn-default" onclick="change('.second')" type="button">+</button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h2>Pursuing</h2>
                </div>
                <div class="col-md-6">
                    <h2>Dropped</h2>
                </div>
            </div>
            <div class="row boxes">
                <div class="col-md-6">
                    <div class="box third">
                        <button class="left btn btn-default" onclick="change('.third')" type="button">+</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="box fourth">
                        <button class="right btn btn-default" onclick="change('.fourth')" type="button">+</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS:

.container {
  height: 1000px;
}

.col-md-6 {
  position: relative;
}

.boxes .col-md-6 {
  max-height: 280px;
  min-height: 280px;
}

.box {
  position: absolute;
  border: 2px solid black;
  width: 100%;
  height: 280px;
  transition: all 0.5s ease-in-out;
}

.right {
  float: right;
}

.first {
  top: 63;
  left: 0;
  z-index: 1;
}

.second {
  top: 63;
  right: 0;
  z-index: 2;
}

.third {
  bottom: 0;
  left: 0;
  z-index: 3;
}

.fourth {
  bottom: 0;
  right: 0;
  z-index: 4;
}

jQuery:

function change(box) {
    if ($(box).css('height') == '280px') {
        $(box).css({
            'width': '850px',
            'height': '480px'
        });
    } else {
        $(box).css({
            'width': '100%',
            'height': '280px'
        });
    }
}

I placed them all into one function because good programming practice is against redundant code. You should try avoid it.

add the following into the css: '.third button { position: absolute; bottom: 0; }' '.fourth button { position: absolute; bottom: 0; right: 0; }' — Liang-Shih Lin, Jul 15 '16 at 14:20
Thanx a lot,thats exactly what i wanted.Can i keep the button fixed in the div so that if someone scrolls inside the div the button remians fixed on top.I tried using position:fixed but the button became fixed with respect to the page not that div — Sarthak Tuteja, Jul 18 '16 at 09:38
Hmmm, this one I'm not sure. But you can try [this](http://stackoverflow.com/questions/7846161/fixed-positioned-div-within-a-relative-parent-div) — Liang-Shih Lin, Jul 18 '16 at 10:36

score 0 · Answer 2 · answered Jul 15 '16 at 14:23

If you float the button to the right, and the right edge goes out of the viewing area, then you can expect the button to go with it.

One way to avoid this: position relative to either the left or right, and then add in a corresponding offset distance in the jQuery to keep your button in the desired place.

Don't just use the jQuery to change the window. Also use it to put the button where it needs to go.

An alternative method would be to base button positioning not on float right, but on the left edge by a discrete amount.

how to start css transition from left

2 Answers2