Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.10.2010, 13:44
Интересующийся
Отправить личное сообщение для Larne Посмотреть профиль Найти все сообщения от Larne
 
Регистрация: 08.10.2010
Сообщений: 11

Открывающийся блок перекрывает нижележащие
Есть два дива, допустим A и B, диву В в стилях прописано display:none. И ниже их кнопка типа "развернуть-свернуть". При нажатии на кнопку запоминается высота дива B, затем высота задается 0px, затем display:block и высота дива плавно увеличивается до значения, которое было запомнено ранее. В результате получается что-то типа выползающей панели. Все замечательно, только, выползая див В не смещает нижележащее содержимое ниже, а наползает на него, сломал голову... Что я делаю не так?
Ответить с цитированием
  #2 (permalink)  
Старый 08.10.2010, 14:09
Аспирант
Отправить личное сообщение для MikhailGirshberg Посмотреть профиль Найти все сообщения от MikhailGirshberg
 
Регистрация: 27.07.2010
Сообщений: 72

Larne, похоже, либо position (absolute имеет полное право наползать на static, к примеру), либо z-index у дива В и "нижеследующего" (кнопки?) разные.
Ответить с цитированием
  #3 (permalink)  
Старый 08.10.2010, 14:14
Интересующийся
Отправить личное сообщение для Larne Посмотреть профиль Найти все сообщения от Larne
 
Регистрация: 08.10.2010
Сообщений: 11

Z-index принудительно поставил одинаковый каждому диву. position нигде в стилях не прописывался, то есть дивы просто идут один за другим, но потом я ставил разные position в порядке эксперимента, ничего не изменилось...
Ответить с цитированием
  #4 (permalink)  
Старый 08.10.2010, 14:38
Аспирант
Отправить личное сообщение для MikhailGirshberg Посмотреть профиль Найти все сообщения от MikhailGirshberg
 
Регистрация: 27.07.2010
Сообщений: 72

Тогда, пожалуй, в код смотреть надо...
Ответить с цитированием
  #5 (permalink)  
Старый 08.10.2010, 15:09
Интересующийся
Отправить личное сообщение для Larne Посмотреть профиль Найти все сообщения от Larne
 
Регистрация: 08.10.2010
Сообщений: 11

функции 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;
});
})();
}
})
Ответить с цитированием
  #6 (permalink)  
Старый 08.10.2010, 15:19
Интересующийся
Отправить личное сообщение для Larne Посмотреть профиль Найти все сообщения от Larne
 
Регистрация: 08.10.2010
Сообщений: 11

прошу прощения что выложил код таким образом. уверен на форуме есть способ выложить код корректно со всеми отступами, но я на форуме новичок... будем учиться
Ответить с цитированием
  #7 (permalink)  
Старый 08.10.2010, 15:54
Аспирант
Отправить личное сообщение для MikhailGirshberg Посмотреть профиль Найти все сообщения от MikhailGirshberg
 
Регистрация: 27.07.2010
Сообщений: 72

у меня сдвигает...
"ниже" лежит тэг <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

Последний раз редактировалось MikhailGirshberg, 08.10.2010 в 15:57. Причина: додумал
Ответить с цитированием
  #8 (permalink)  
Старый 08.10.2010, 15:58
Интересующийся
Отправить личное сообщение для Larne Посмотреть профиль Найти все сообщения от Larne
 
Регистрация: 08.10.2010
Сообщений: 11

да в диве находится <p>, в этом дело? И если да то как с этим бороться
Ответить с цитированием
  #9 (permalink)  
Старый 08.10.2010, 16:05
Аспирант
Отправить личное сообщение для MikhailGirshberg Посмотреть профиль Найти все сообщения от MikhailGirshberg
 
Регистрация: 27.07.2010
Сообщений: 72

теперь в дивах ничего нет
но кликать в рамку надо всё равно
<!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>


Думаю, дело в размерах
Ответить с цитированием
  #10 (permalink)  
Старый 08.10.2010, 16:14
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Сообщение от Larne
прошу прощения что выложил код таким образом. уверен на форуме есть способ выложить код корректно со всеми отступами, но я на форуме новичок...
http://javascript.ru/formatting
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Показать/скрыть блок Lelja_05 jQuery 10 01.07.2013 20:05
Блок с сообщением - Javascript или jQuery qwermjk Общие вопросы Javascript 3 12.07.2010 09:48
Фиксированный блок kakarotto Элементы интерфейса 2 09.07.2010 00:20
Всплываюший блок! daron jQuery 5 14.05.2010 11:20
Неподвижный блок snapik (X)HTML/CSS 4 23.03.2008 00:52