は、どのように私は4つのdiv要素を持っている

左と私はjavascriptのトランジションプロパティ]ボタンをクリックしたときに、幅と高さを高めるために適用されているから、CSSの移行を開始しますが、私は、同じ画面は、どのように私は4つのdiv要素を持っている

Iに高さと幅を大きくする必要がありますボタンをクリックするとこのdivがこの画面に残るはずです。今は、トラッキングボックスのボタン（+）を押すと、画面の外に出て行く幅と高さが増えます。同じ画面に残り、他のdivと重複していることを示します。

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>

出典

2016-07-15 Sarthak Tuteja

私はあなたが望むものを、本当にわからないんだけど、これは私が思い付いたものです：

<!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' 
     }); 
    } 
}

私はそれらをすべて1つの関数に入れました。なぜなら、良いプログラミング実践氷は冗長コードに反する。あなたはそれを避けるべきです。

出典

2016-07-15 14:07:27

cssに以下を追加してください。 '。第3ボタン{ }位置：絶対; bottom：0; } ' '。第4ボタン{ 位置：絶対; bottom：0; 権利：0; } ' –

Thanxはたくさんありました。まさに私が望んでいたことです.Div内にボタンを固定しておいて、div内の誰かがスクロールすると、ボタンremiansが上に固定されました。ページに敬意を払います –

うん、これはわかりません。しかし、あなたは[これを]試すことができます（http://stackoverflow.com/questions/7846161/fixed-positioned-div-within-a-relative-parent-div） –

ボタンを右に浮かせて、右端が表示領域から外れている場合は、ボタンが表示されます。

これを避ける方法の1つは、左または右のどちらかに相対的な位置を指定してから、jQueryで対応するオフセット距離を追加してボタンを希望の場所に保持します。

jQueryを使用してウィンドウを変更しないでください。また、それを使用して、必要な場所にボタンを配置します。

代替方法は、浮動小数点ではなく、左端で離散的にボタンの位置決めを行うことです。

出典

2016-07-15 14:23:07 gladiola

は、どのように私は4つのdiv要素を持っている

答えて

関連する問題