Форум

Larne · #1 (**permalink**) 08.10.2010, 13:44

Есть два дива, допустим A и B, диву В в стилях прописано display:none. И ниже их кнопка типа "развернуть-свернуть". При нажатии на кнопку запоминается высота дива B, затем высота задается 0px, затем display:block и высота дива плавно увеличивается до значения, которое было запомнено ранее. В результате получается что-то типа выползающей панели. Все замечательно, только, выползая див В не смещает нижележащее содержимое ниже, а наползает на него, сломал голову... Что я делаю не так?

MikhailGirshberg · #2 (**permalink**) 08.10.2010, 14:09

Larne, похоже, либо position (absolute имеет полное право наползать на static, к примеру), либо z-index у дива В и "нижеследующего" (кнопки?) разные.

Larne · #3 (**permalink**) 08.10.2010, 14:14

Z-index принудительно поставил одинаковый каждому диву. position нигде в стилях не прописывался, то есть дивы просто идут один за другим, но потом я ставил разные position в порядке эксперимента, ничего не изменилось...

MikhailGirshberg · #4 (**permalink**) 08.10.2010, 14:38

Тогда, пожалуй, в код смотреть надо...

Larne · #5 (**permalink**) 08.10.2010, 15:09

функции slideDown и slideUp разворачивают и сворачивают div с классом "hide" при нажатии на href с классом "details". Сам toggle не вынесен в отдельную функцию, а идет прямо после domReady. Коряво, но уж как есть пока. Не уверен поможет ли код, так как согласно нему все работает отлично, кроме наползания на нижележащий текст, а тут дело видимо в CSS (стили для классов "begin", "hide", "details" вобще не прописывались, кроме .hide {display:none}, потом принудительно прописывались одинаковые z-index и были всякие эксперименты с position) или дело может быть в дочерних тегах дива hide (не уверен как они могут повлиять на стиль родителя), тогда смотреть надо HTML.

function slideDown(elem){
var pos=0, q, tim;
var h = parseInt(fullHeight(elem));
//var next=next;
elem.style.height="0px";
show(elem);
tim=setInterval(function(){
pos+=5;
if (pos>=100){
clearInterval(tim);
}

elem.style.height=((pos/100)*h)+"px";

}, 1);
}

function slideUp(elem){
var pos=0, tim;
var h = parseInt(fullHeight(elem));
tim=setInterval(function(){
pos+=10;
if (pos>100){
clearInterval(tim);
hide(elem);
elem.style.height=h+"px";
}
elem.style.height=(h-(pos/100)*h)+"px";
}, 20);
}

domReady(function(){

var begin= hasClass("begin");
var more=hasClass("hide");
var href = hasClass("details");

for (var j=0; j<href.length; j++){(function(){
var s=j;
var hrefText=href[0].innerHTML;
addEvent ( href[s], "click", function() {
var op = attr(more[s], "open");

if (op=="yes"){
slideUp(more[s]);
attr (more[s], "open", "");
href[s].innerHTML=hrefText;
href[s].className="more";
}

if(op==""){
slideDown(more[s]);
attr (more[s], "open", "yes");

if (language=="russian"){
href[s].innerHTML="свернуть";
href[s].className="more_back";
}

else {href[s].innerHTML="minimize";}

href[s].className="more_back";
}

return false;
});
})();
}
})

Larne · #6 (**permalink**) 08.10.2010, 15:19

прошу прощения что выложил код таким образом. уверен на форуме есть способ выложить код корректно со всеми отступами, но я на форуме новичок... будем учиться

MikhailGirshberg · #7 (**permalink**) 08.10.2010, 15:54

"ниже" лежит тэг <p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      div.a, div.b{
        height:100px;
        border: 1px solid gray;
        text-align: center;
      }
      div.b{display:none;}
      div.b.Expanding{display: block}
    </style>
    <script type="text/javascript">
      var b_h = 100
      function show_b(){
        var b = document.getElementById("divb")
        if(b.className.search("Expanding") < 0){
          b.style.height = 0
          b.className += " Expanding"
        }else{
          var h = parseInt(b.style.height)
          if(h >= b_h) return

          b.style.height = h + 10 + "px"
        }
        setTimeout(show_b, 100)
      }
    </script>
  </head>
  <body>
    <div class="a" onclick="show_b()"><p>div class="a"</p><p>Извольте кликнуть здесь...</p></div>
    <div class="b" id ="divb"><p>div class="b"</p></div>
    <p>just next paragraph</p>
  </body>
</html>

а ссылку на статью о форматировании я и сам как-то не нашёл :-0

Larne · #8 (**permalink**) 08.10.2010, 15:58

да в диве находится <p>, в этом дело? И если да то как с этим бороться

MikhailGirshberg · #9 (**permalink**) 08.10.2010, 16:05

но кликать в рамку надо всё равно

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css">
      div.a, div.b{
        height:100px;
        border: 1px solid gray;
        text-align: center;
      }
      div.b{display:none;}
      div.b.Expanding{display: block}
    </style>
    <script type="text/javascript">
      var b_h = 100
      function show_b(){
        var b = document.getElementById("divb")
        if(b.className.search("Expanding") < 0){
          b.style.height = 0
          b.className += " Expanding"
        }else{
          var h = parseInt(b.style.height)
          if(h >= b_h) return

          b.style.height = h + 10 + "px"
        }
        setTimeout(show_b, 100)
      }
    </script>
  </head>
  <body>
    <div class="a" onclick="show_b()"></div>
    <div class="b" id ="divb"></div>
    <p>just next paragraph</p>
  </body>
</html>

Думаю, дело в размерах

Sweet · #10 (**permalink**) 08.10.2010, 16:14

Сообщение от Larne

прошу прощения что выложил код таким образом. уверен на форуме есть способ выложить код корректно со всеми отступами, но я на форуме новичок...

http://javascript.ru/formatting

Форум

Справочник

Discord чат

Курсы javascript