Структура объявления (Единый форум поддержки)

1Сегодня 11:44:35

Автор: kozhilya
Стажер
Откуда: Ульяновск
Зарегистрирован: Сб, 1 Окт 2011
Приглашений: 0
Сообщений: 47
Уважение: +6
Позитив: +4
Пол: Мужской
Провел на форуме:
1 день 4 часа
Последний визит:
Сегодня 13:06:53

Что-то мне подсказывает, что мне сюда, но, если я ошибаюсь, просьба не удалять тему, а перенести её...
Само объявление я продумал, но есть одна проблема.
В одном из разделов объявления есть такая сложная структура: есть несколько заголовков в столбец, при нажатии на любой из заголовков непосредственно под ним появляется необходимый контент, при этом все остальные котенты скрываются.
Вот то, что уже у меня имеется: пруф, интерересующий меня раздел - крайний слева.

Вот сам скрипт скрытия/раскрытия контента:

<script type="text/javascript">
ob_active = 1;

function shiftSubDiv(n)
// Скрывает/раскрывает подразделы меню с ID вида subDiv1, subDiv2 и т.д.
// Номер подраздела передается в качестве аргумента.
{
var el_active = document.getElementById('subDiv'+ob_active);
var el = document.getElementById('subDiv'+n);
el_active.style.cssText = "display: none;";
el.style.cssText = "display: block;";
ob_active = n;
};
</script>

Необходимя часть таблицы:

<div class="navHeader" onClick="shiftSubDiv(1)">Раздел 1</div>
<div id="subDiv1" style="display:block">
Много<br>
Очень<br>
Много<br>
Текста<br>
<br>
О да!
</div>
<div class="navHeader" onClick="shiftSubDiv(2)">Раздел 2</div>
<div id="subDiv2" style="display:none">
Текст 2
</div>
<div class="navHeader" onClick="shiftSubDiv(3)">Раздел 3</div>
<div id="subDiv3" style="display:none">
Текст 3
</div>

Теперь, собственно, сами проблемы, при решении которых моих знаний js не хватило...
1) Мне известна высота всего блока и высота одного заголовка, но неизвестна высота контента и количество блоков. По идеи, если высота контента + сумма высот всех блоков превышает некоторое максимальное значение, то контент должен ограничиться скролингом.
2) Сейчас скрытие происходит топорно, без анимации. По идеи, контент должен плавно сворачиваться и разворачиваться вертикально. Без разницы, одновременно или нет, главное - плавно...

Заранее спасибо за помощь

0

2Сегодня 11:56:02

Автор: Deff
Старожил
Откуда: Местечковый
Зарегистрирован: Ср, 16 Июн 2010
Приглашений: 0
Сообщений: 17437
Уважение: +2665
Позитив: +656
Провел на форуме:
6 месяцев 6 дней
Активен 2 часа 21 минуту

kozhilya
Есть место отведенное по высоте для всех кнопок + максимально возможная высота раскрытого контента

пусть будет cумма этих высот H
тогда высота Контента
h_content = H-N*колво_Кнопок
Тогда вид блока раскрывающего контента

<div style="display:none;height:h_contentpx;overflow-y:auto;">
...Тут контент
</div>

Отредактировано Deff (Сегодня 12:07:44)

0

3Сегодня 12:01:53

Автор: kozhilya
Стажер
Откуда: Ульяновск
Зарегистрирован: Сб, 1 Окт 2011
Приглашений: 0
Сообщений: 47
Уважение: +6
Позитив: +4
Пол: Мужской
Провел на форуме:
1 день 4 часа
Последний визит:
Сегодня 13:06:53

Deff написал(а):

height:h_contentpx;

А разве так можно? css вроде не принимает переменные js?!
Или ты предлагаешь считать вручную?

0

4Сегодня 12:03:46

Автор: Deff
Старожил
Откуда: Местечковый
Зарегистрирован: Ср, 16 Июн 2010
Приглашений: 0
Сообщений: 17437
Уважение: +2665
Позитив: +656
Провел на форуме:
6 месяцев 6 дней
Активен 2 часа 21 минуту

kozhilya написал(а):

2) Сейчас скрытие происходит топорно, без анимации. По идеи, контент должен плавно сворачиваться и разворачиваться вертикально. Без разницы, одновременно или нет, главное - плавно...

<div>
<div class=button>Имя кнопы(или картинка или HTML код кнопки</div>
<div class="contains" style="display:none;height:120px;overflow-y:auto;">
...Тут контент
</div>
</div>

<script>
$(".button").click(function () {
$(".contains").hide(); //Свёртываем все предыдущие;
$(this).parent().find(".contains").show(1200);
});
</script>

Жирное размножаем для скольких нужно кнопо-контентов

Красное - максимальная высота блока(вычисляецо один раз вручную и вставляецо в каждый блок идентичная
(*Cкрипт один на все кнопы

Отредактировано Deff (Сегодня 12:14:05)

0

5Сегодня 12:31:23

Автор: kozhilya
Стажер
Откуда: Ульяновск
Зарегистрирован: Сб, 1 Окт 2011
Приглашений: 0
Сообщений: 47
Уважение: +6
Позитив: +4
Пол: Мужской
Провел на форуме:
1 день 4 часа
Последний визит:
Сегодня 13:06:53

Deff
Во втором пункте какая-та лажа выходит: он никак не хочет даже входить в эту функцию (я поставил там точку остановки). И я сильно сомневаюсь, что это связано с тем, что у меня другое имя класса.

0

6Сегодня 12:32:08

Автор: Deff
Старожил
Откуда: Местечковый
Зарегистрирован: Ср, 16 Июн 2010
Приглашений: 0
Сообщений: 17437
Уважение: +2665
Позитив: +656
Провел на форуме:
6 месяцев 6 дней
Активен 2 часа 21 минуту

Вообще есть лучшие уже готовые решения

http://op-rpg.ru/viewtopic.php?id=585#p22947 пост 12 навести курсор на Галеон

реализация от Romych - тут Скрипты от пользователей пост 471

0

7Сегодня 12:35:31

Автор: Deff
Старожил
Откуда: Местечковый
Зарегистрирован: Ср, 16 Июн 2010
Приглашений: 0
Сообщений: 17437
Уважение: +2665
Позитив: +656
Провел на форуме:
6 месяцев 6 дней
Активен 2 часа 21 минуту

kozhilya написал(а):

Во втором пункте какая-та лажа выходит: он никак не хочет даже входить в эту функцию (я поставил там точку остановки). И я сильно сомневаюсь, что это связано с тем, что у меня другое имя класса.

Код на три кнопы - у мну работает в 4х браузерах

Код:

<div>
<div class=button>1Имя кнопы(или картинка или HTML код кнопки</div>
<div class="contains" style="display:none;height:120px;overflow-y:auto;">
...Тут контент1
</div></div>

<div>
<div class=button>2Имя кнопы(или картинка или HTML код кнопки</div>
<div class="contains" style="display:none;height:120px;overflow-y:auto;">
...Тут контент2
</div></div>

<div>
<div class=button>3Имя кнопы(или картинка или HTML код кнопки</div>
<div class="contains" style="display:none;height:120px;overflow-y:auto;">
...Тут контент3
</div></div>

<script>
 $(".button").click(function () {
      $(".contains").hide(760);          //Свёртываем все предыдущие;
      $(this).parent().find(".contains").show(1200);
    });
</script>

0

8Сегодня 12:37:56

Автор: Deff
Старожил
Откуда: Местечковый
Зарегистрирован: Ср, 16 Июн 2010
Приглашений: 0
Сообщений: 17437
Уважение: +2665
Позитив: +656
Провел на форуме:
6 месяцев 6 дней
Активен 2 часа 21 минуту

Тоже самое(*Поменял классы для Теста

Код:

<div>
<div class=but_tonOO>1Имя кнопы(или картинка или HTML код кнопки</div>
<div class="cont_ainsOO" style="display:none;height:120px;overflow-y:auto;">
...Тут контент1
</div></div>

<div>
<div class=but_tonOO>2Имя кнопы(или картинка или HTML код кнопки</div>
<div class="cont_ainsOO" style="display:none;height:120px;overflow-y:auto;">
...Тут контент2
</div></div>

<div>
<div class=but_tonOO>3Имя кнопы(или картинка или HTML код кнопки</div>
<div class="cont_ainsOO" style="display:none;height:120px;overflow-y:auto;">
...Тут контент3
</div></div>

<script>
 $(".but_tonOO").click(function () {
      $(".cont_ainsOO").hide(760);          //Свёртываем все предыдущие;
      $(this).parent().find(".cont_ainsOO").show(1200);
    });
</script>

0

9Сегодня 13:06:31

Автор: kozhilya
Стажер
Откуда: Ульяновск
Зарегистрирован: Сб, 1 Окт 2011
Приглашений: 0
Сообщений: 47
Уважение: +6
Позитив: +4
Пол: Мужской
Провел на форуме:
1 день 4 часа
Последний визит:
Сегодня 13:06:53

Deff написал(а):

Вообще есть лучшие уже готовые решения
http://op-rpg.ru/viewtopic.php?id=585#p22947 пост 12 навести курсор на Галеон
реализация от Romych - тут Скрипты от пользователей пост 471

По первой ссылке: Ссылка, по которой Вы пришли неверная или устаревшая.
А по второй... Я что-то не понял, зачем это.

0

10Сегодня 13:12:22

Автор: Deff
Старожил
Откуда: Местечковый
Зарегистрирован: Ср, 16 Июн 2010
Приглашений: 0
Сообщений: 17437
Уважение: +2665
Позитив: +656
Провел на форуме:
6 месяцев 6 дней
Активен 2 часа 21 минуту

kozhilya написал(а):

По первой ссылке: Ссылка, по которой Вы пришли неверная или устаревшая.

http://qps.ru/Nygt2

0

11Сегодня 13:14:17

Автор: Deff
Старожил
Откуда: Местечковый
Зарегистрирован: Ср, 16 Июн 2010
Приглашений: 0
Сообщений: 17437
Уважение: +2665
Позитив: +656
Провел на форуме:
6 месяцев 6 дней
Активен 2 часа 21 минуту

kozhilya
А что - у Вас коды из постов 7 или 8 - не сработали ?

Cократил за счёт css

Код:

<!--Вертикальное с раздвижкой-->
<div><style>.cont_ainsOO{width:290px;display:none;max-height:120px;overflow-y:auto;}</style>
<div class=but_tonOO>1Имя кнопы(или картинка или HTML код кнопки</div>
<div class="cont_ainsOO">
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
</div></div>

<div>
<div class=but_tonOO>2Имя кнопы(или картинка или HTML код кнопки</div>
<div class="cont_ainsOO">
...Тут контент2<br />
...Тут контент2<br />
...Тут контент2<br />
...Тут контент2<br />
</div></div>

<div>
<div class=but_tonOO>3Имя кнопы(или картинка или HTML код кнопки</div>
<div class="cont_ainsOO">
...Тут контент3
...Тут контент3
</div></div>

<script>
 $(".but_tonOO").click(function () {
      $(".cont_ainsOO").hide(760);          //Свёртываем все предыдущие;
      $(this).parent().find(".cont_ainsOO").show(1200);
    });
</script>

Отредактировано Deff (Сегодня 13:21:10)

0