За последние 24 часа нас посетил 20921 программист и 1136 роботов. Сейчас ищут 816 программистов ...

Раскрывающийся блок по клику - как зафиксировать ссылку?

Тема в разделе "HTML и CSS", создана пользователем newstarter, 19 сен 2012.

  1. newstarter

    newstarter Активный пользователь

    С нами с:
    3 сен 2012
    Сообщения:
    51
    Симпатии:
    0
    Здравствуйте, уважаемые Умельцы форума!

    Буду очень признателен за помощь в следующем.

    Имеется код блока, раскрывающегося и сворачивающегося по клику на ссылке:

    Код (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5. <link href="css/divopen_close.css" rel="stylesheet" type="text/css" />
    6. <title>Пример открытия/закрытия блока по ссылке</title>
    7. <script type="text/javascript">
    8. window.onload= function() {
    9.     document.getElementById('toggler').onclick = function() {
    10.         openbox('box', this);
    11.         return false;
    12.     };
    13. };
    14. function openbox(id, toggler) {
    15.     var div = document.getElementById(id);
    16.     if(div.style.display == 'block') {
    17.         div.style.display = 'none';
    18.         toggler.innerHTML = 'Имя альбома';
    19.     }
    20.     else {
    21.         div.style.display = 'block';
    22.         toggler.innerHTML = 'Закрыть альбом';
    23.     }
    24. }
    25.  
    26. </script>
    27. </head>
    28. <body>
    29.  
    30. <div id="box" style="display: none; border:1px solid #00cc00; min-height:100px; width:200px;">Отображаемый блок</div>
    31. <a id="toggler" href="#">Имя альбома</a>
    32.  
    33. </body>
    34. </html>
    Все работает очень даже, НО вот вопрос: как добиться, чтобы ссылка была "зафиксирована", т.е. не меняла своего положения, чтобы скрытый блок по клику раскрывался вверх и исчезал по клику, а ссылка оставалась на прежнем месте в любом случае? Какие средства CSS здесь применимы?

    Заранее СПАСИБО!!!
     
  2. uorypm

    uorypm Активный пользователь

    С нами с:
    3 мар 2012
    Сообщения:
    98
    Симпатии:
    0
    Ничего не понятно.
    1) Поменяйте местами две строчки перед "</body>" или
    2) Дайте <body> свойство "position: relative;", а <a id="toggler"> стиль "position: absolute; top: 0px; left: 0px;" или
    3) Напишите, что именно Вам нужно.
     
  3. newstarter

    newstarter Активный пользователь

    С нами с:
    3 сен 2012
    Сообщения:
    51
    Симпатии:
    0
    Уважаемый Йогурт!

    Когда документ грузится, видна только надпись ссылки "Имя альбома". Когда кликаешь по ссылке, надпись уезжает со своего места вниз, т.к. ее двигает раскрывающийся блок. Меня интересует, как добиться при помощи css, чтобы при вызове ракрывающегося блока (и его сворачивании) не происходило изменения с позицией надписи ссылки. Как сделать надпись ссылки *неподвижной* вне зависимости от появления, исчезновения блока?

    СПАСИБО за внимание, терпение и помощь!
     
  4. uorypm

    uorypm Активный пользователь

    С нами с:
    3 мар 2012
    Сообщения:
    98
    Симпатии:
    0
    newstarter
    Пункт №1 (HTML):
    Т.к. у Вас блок раскрывается вниз, то ссылку поставьте выше раскрывающегося/скрывающегося блока и никакого CSS не надо.
    Пункт №2 (CSS):
    Смысл такой: даем относительное позиционирование для некоего блока-родителя, а нужному элементу даем позиционирование абсолютное. Хитрость CSS будет в том, что теперь абсолютно спозиционированный элемент будет абсолютно спозиционирован относительно ближайшего относительно спозиционированного блока-родителя (иначе, если не будет такого блока-родителя, элемент позиционируется относительно окна браузера).

    Почему Вы разделяете понятия "ссылка" и "надпись ссылки"? Если это разделение имеет смысл, то Ваша проблема настолько легко решаема, что даже слов нет.
     
  5. newstarter

    newstarter Активный пользователь

    С нами с:
    3 сен 2012
    Сообщения:
    51
    Симпатии:
    0
    Уважаемый Йогурт!

    "Текст ссылки" = "ссылка" в моих сообщениях. Т.о. это не существенно.

    Блок должен раскрываться именно вверх, а не вниз. Я могу стилями переместить ссылку ниже, чтобы дать пространство для раскрывающегося блока, но не это суть вопроса. Вопрос в следующем:

    1. Есть ссылка
    2. Клик по ссылке - над ссылкой появляется раскрывающийся блок, при этом
    3. Ссылка остается где была. Раскрывающийся блок ссылку никуда не двигает, ни на пиксель.

    Как этого достичь?

    СПАСИБО!!!
     
  6. uorypm

    uorypm Активный пользователь

    С нами с:
    3 мар 2012
    Сообщения:
    98
    Симпатии:
    0
    newstarter, Ваш код:
    Код (Text):
    1.  
    2. <div id="box" style="display: none; border:1px solid #00cc00; min-height:100px; width:200px;">Отображаемый блок</div>
    3. <a id="toggler" href="#">Имя альбома</a>
    Сделайте так (в лоб):
    Код (Text):
    1.  
    2. <div id="box_wrapper" style="min-height:102px; width:202px;">
    3. <div id="box" style="display: none; border:1px solid #00cc00; min-height:100px; width:200px;">Отображаемый блок</div>
    4. </div>
    5. <a id="toggler" href="#">Имя альбома</a>
     
  7. newstarter

    newstarter Активный пользователь

    С нами с:
    3 сен 2012
    Сообщения:
    51
    Симпатии:
    0
    Йогурт, СПАСИБО!!!

    Именно то, что было нужно!

    Без вашей помощи бы не разобрался.

    Добавлено спустя 7 минут 13 секунд:
    Уважаемый Йогурт!

    Увы, рано обрадовался. Ваш код работает прекрасно, но все-таки контейнер div и содержащийся в нем раздвигающийся блок создают пустое пространство над ссылкой, равное своей высоте, двигая ссылку вниз. Это становится особенно видно при помещении всей конструкции в другой, общий контейнер.

    А как можно убрать это пустое пространство, равное min-height блоков box_wrapper и box? Понятно, что сдвинуть ссылку ниже надо, чтобы обеспечить пространство для раскрытия блока над ней, но хотелось бы делать то стилями этой ссылки, произвольно (margin-top и т.п.)

    Благодарю за терпение!
     
  8. uorypm

    uorypm Активный пользователь

    С нами с:
    3 мар 2012
    Сообщения:
    98
    Симпатии:
    0
    newstarter, jQuery в помощь. При загрузке страницы получаем высоту скрытого элемента, выставляем для ссылки margin-top равной(больше) высоты скрытого блока.
     
  9. newstarter

    newstarter Активный пользователь

    С нами с:
    3 сен 2012
    Сообщения:
    51
    Симпатии:
    0
    Значит, средствами CSS здесь никак.

    СПАСИБО за совет, буду искать решение, рыть jquery)
     
  10. uorypm

    uorypm Активный пользователь

    С нами с:
    3 мар 2012
    Сообщения:
    98
    Симпатии:
    0
    newstarter, вот это да. Вообще-то тут CSS и нужен. jQuery нужен лишь для поиска нужных элементов на странице и кроссбраузерности.
    Уберите со страницы весь яваскрипт и вместо него:
    Код (Text):
    1.  
    2.     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    3.     <html>
    4.     <head>
    5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    6.     <link href="css/divopen_close.css" rel="stylesheet" type="text/css" />
    7.     <title>Пример открытия/закрытия блока по ссылке</title>
    8.     <script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.min.js"></script>
    9.     <script type="text/javascript">
    10.     $(document).ready(function(){
    11.      var box = $('#box');
    12.      var toggler = $('#toggler');
    13.      var box_wrap = $('#box_wrapper');
    14.      var height = box.css('height'); //Находим высоту блока
    15.      box_wrap.css('height', height);
    16.      box.css('display', 'none');
    17.      toggler.click(function(){
    18.         if(box.css('display') == "none"){
    19.             box.css('display', 'block');
    20.         }
    21.         else{
    22.             box.css('display', 'none');
    23.         }
    24.      });
    25.     });
    26.  
    27.     </script>
    28.     </head>
    29.     <body style="position: relative;">
    30. <div id="box_wrapper">
    31.     <div id="box" style="border:1px solid #00cc00; width:200px;">Отображаемый блок</div>
    32. </div>
    33.     <a id="toggler" href="#">Имя альбома</a>
    34.  
    35.     </body>
    36.     </html>
    UP! Пардон. В первый раз накосячил. Код обновлен (вся страница). Т.е. высота блока равна его содержимому.
     
  11. newstarter

    newstarter Активный пользователь

    С нами с:
    3 сен 2012
    Сообщения:
    51
    Симпатии:
    0
    Спасибо, что не оставили меня наедине с jquery, Йогурт!)

    Правда не очень помогло, заменил скрипт, но ссылка по-прежнему сдвинута именно высотой блока.

    Попробовал задать в скрипте отрицательное значение для margin-top ссылки - ничего не изменилось.
     
  12. uorypm

    uorypm Активный пользователь

    С нами с:
    3 мар 2012
    Сообщения:
    98
    Симпатии:
    0
    Даже так:
    Код (Text):
    1.  
    2.     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    3.     <html>
    4.     <head>
    5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    6.     <link href="css/divopen_close.css" rel="stylesheet" type="text/css" />
    7.     <title>Пример открытия/закрытия блока по ссылке</title>
    8.     <script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.min.js"></script>
    9.     <script type="text/javascript">
    10.     $(document).ready(function(){
    11.      var box = $('#box');
    12.      var toggler = $('#toggler');
    13.      var box_wrap = $('#box_wrapper');
    14.      var height = box.css('height'); //Находим высоту блока
    15.      box_wrap.css('height', height);
    16.      box.css('display', 'none');
    17.      toggler.html('Старое название ссылки');
    18.      toggler.click(function(){
    19.         if(box.css('display') == "none"){
    20.             box.css('display', 'block');
    21.             toggler.html('Новое название ссылки');
    22.         }
    23.         else{
    24.             box.css('display', 'none');
    25.             toggler.html('Старое название ссылки');
    26.         }
    27.      });
    28.     });
    29.  
    30.     </script>
    31.     </head>
    32.     <body style="position: relative;">
    33. <div id="box_wrapper">
    34.     <div id="box" style="border:1px solid #00cc00; width:200px;">Отображаемый блокОтображаемый блокОтображаемый блокОтображаемый блокОтображаемый блокОтображаемый блокОтображаемый блокОтображаемый блокОтображаемый блок</div>
    35. </div>
    36.     <a id="toggler" href="#"></a>
    37.  
    38.     </body>
    39.     </html>
     
  13. newstarter

    newstarter Активный пользователь

    С нами с:
    3 сен 2012
    Сообщения:
    51
    Симпатии:
    0
    Нет, Йогурт, к сожалению, произвольности в отношении ссылки нет. Ее положение на странице по-прежнему задает блок. Когда помещаем ссылку со спрятанным блоком в контейнер (скажем в футере сайта), скрытый блок все равно создает пустое пространство, равное себе над ссылкой. Ума не приложу, что здесь можно сделать. Я, к сожалению, новичок
     
  14. uorypm

    uorypm Активный пользователь

    С нами с:
    3 мар 2012
    Сообщения:
    98
    Симпатии:
    0
    newstarter, сделайте пожалуйста скриншоты или рисунки того, чтобы Вы хотите увидеть. Просто я не могу понять, что именно Вам необходимо. Так сказать, объясните на пальцах. Думаю Вашу проблему легко решить, но мешает не то чтобы недопонимание, а просто непонимание...
     
  15. newstarter

    newstarter Активный пользователь

    С нами с:
    3 сен 2012
    Сообщения:
    51
    Симпатии:
    0
    Да, разумеется, извините, что не сделал этого сразу.

    Йогурт, имеется футер с ссылкой (вместо надписи, правда, иконка "В"). Нужно, чтобы при клике по этой ссылке вверх раскрылся наш спрятанный до клика блок.

    [​IMG]

    Но при первоначальном коде происходит следующее:

    [​IMG]

    Тогда как ссылка должна остаться на месте (как на первом скрине) и после клика.

    И вот вопрос: как этого достичь при помощи css (или, как выяснили вы, jquery)?

    Добавлено спустя 3 минуты 1 секунду:
    Вообще СПАСИБО, что вы мне помогаете, Йогурт, за участие! Извините, если напрягаю - рад бы разобраться сам, но, как уже сказал, новичок.
     
  16. uorypm

    uorypm Активный пользователь

    С нами с:
    3 мар 2012
    Сообщения:
    98
    Симпатии:
    0
    newstarter, правильно ли я понял, что нужно, чтобы поднимался весь сайт, а ссылка выходила даже за пределы футера?
     
  17. newstarter

    newstarter Активный пользователь

    С нами с:
    3 сен 2012
    Сообщения:
    51
    Симпатии:
    0
    Не совсем понял насчет *поднимался весь сайт*. Но суть в том, чтобы сама ссылка сохранила положение, как на первой картинке. За пределы футера, судя по всему, выходит блок (т.к. раскрывается вверх).

    Сейчас ссылка подвигается блоком вниз, создавая, в свою очередь, белое пространство под футером, что, как сами понимаете, для подвала сайта недопустимо.

    Добавлено спустя 3 минуты 35 секунд:
    Йогурт, приведенные картинки иллюстрируют работу кода, схожего во всем с самым первым кодом из моего начального сообщения здесь. Ваши подсказанные коды раздвигают футер книзу, т.к. спрятанный блок создает равное себе пространство над ссылкой.
     
  18. uorypm

    uorypm Активный пользователь

    С нами с:
    3 мар 2012
    Сообщения:
    98
    Симпатии:
    0
    Завтра все сделаем. Сейчас уже поздно, да и устал.
     
  19. newstarter

    newstarter Активный пользователь

    С нами с:
    3 сен 2012
    Сообщения:
    51
    Симпатии:
    0
    Огромное СПАСИБО вам за сегодняшние решения, советы!!!
     
  20. newstarter

    newstarter Активный пользователь

    С нами с:
    3 сен 2012
    Сообщения:
    51
    Симпатии:
    0
    Народ!)

    Проблема по-прежнему актуальна, т.к. мои ковыряния в стилях, кодах и поиск в сети ничего нового не дали - везде структура стандартная: вверху ссылка, внизу раскрывающийся блок. А такого, чтобы внизу была неподвижная ссылка, клик по ней и кверху вылезает блок - такого не нашел.

    Помогите, пожалуйста! С.П.А.С.И.Б.О.!