Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Корзина » Структура объявления

Структура объявления

Страница: 1

Сообщений 1 страница 15 из 15

1

  • Автор: kozhilya
  • Модератор
  • kozhilya
  • Зарегистрирован: Сб, 1 Окт 2011
  • Сообщений: 541
  • Уважение: +379
  • Позитив: +203
  • Пол: Мужской
  • Последний визит:
    Вчера 14:23:32

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

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

<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

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51115
  • Уважение: +15197
  • Позитив: +11572
  • Последний визит:
    Сегодня 22:18:52

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

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

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

Отредактировано Deff (Вс, 5 Фев 2012 12:07:44)

0

3

  • Автор: kozhilya
  • Модератор
  • kozhilya
  • Зарегистрирован: Сб, 1 Окт 2011
  • Сообщений: 541
  • Уважение: +379
  • Позитив: +203
  • Пол: Мужской
  • Последний визит:
    Вчера 14:23:32
Deff написал(а):

height:h_contentpx;

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

0

4

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51115
  • Уважение: +15197
  • Позитив: +11572
  • Последний визит:
    Сегодня 22:18:52
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(".cont_ainsOO").toggle(1200);
    });
</script>

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

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

Отредактировано Deff (Вс, 5 Фев 2012 14:04:26)

0

5

  • Автор: kozhilya
  • Модератор
  • kozhilya
  • Зарегистрирован: Сб, 1 Окт 2011
  • Сообщений: 541
  • Уважение: +379
  • Позитив: +203
  • Пол: Мужской
  • Последний визит:
    Вчера 14:23:32

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

0

6

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51115
  • Уважение: +15197
  • Позитив: +11572
  • Последний визит:
    Сегодня 22:18:52

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

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

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

0

7

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51115
  • Уважение: +15197
  • Позитив: +11572
  • Последний визит:
    Сегодня 22:18:52
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(".cont_ainsOO").toggle(1200);
    });
</script>

Отредактировано Deff (Вс, 5 Фев 2012 14:04:52)

0

8

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51115
  • Уважение: +15197
  • Позитив: +11572
  • Последний визит:
    Сегодня 22:18:52

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

Код:
<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").toggle(1200);
    });
</script>

Отредактировано Deff (Вс, 5 Фев 2012 14:03:59)

0

9

  • Автор: kozhilya
  • Модератор
  • kozhilya
  • Зарегистрирован: Сб, 1 Окт 2011
  • Сообщений: 541
  • Уважение: +379
  • Позитив: +203
  • Пол: Мужской
  • Последний визит:
    Вчера 14:23:32
Deff написал(а):

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

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

0

10

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51115
  • Уважение: +15197
  • Позитив: +11572
  • Последний визит:
    Сегодня 22:18:52
kozhilya написал(а):

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

http://qps.ru/Nygt2

0

11

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51115
  • Уважение: +15197
  • Позитив: +11572
  • Последний визит:
    Сегодня 22:18:52

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").toggle(1200);
    });
</script>

Отредактировано Deff (Вс, 5 Фев 2012 14:03:45)

0

12

  • Автор: kozhilya
  • Модератор
  • kozhilya
  • Зарегистрирован: Сб, 1 Окт 2011
  • Сообщений: 541
  • Уважение: +379
  • Позитив: +203
  • Пол: Мужской
  • Последний визит:
    Вчера 14:23:32

Deff
Не знаю, из-за чего это происходит, но это не работает на офф-лайн странице :dontknow: Нажимаю - 0 реакции.

0

13

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51115
  • Уважение: +15197
  • Позитив: +11572
  • Последний визит:
    Сегодня 22:18:52
kozhilya написал(а):

Не знаю, из-за чего это происходит, но это не работает на офф-лайн странице  Нажимаю - 0 реакции.

http://hostjs-mybb2011.narod.ru/a.htm
Код там такой:

Код:
<!--Вертикальное с раздвижкой НАЧАЛО-->
<center><div style="min-height:270px!important;width:300px;padding:20px;border:#D3D3D3 4px ridge">
<style>
.cont_ainsOO{width:290px!important;display:none;height:160px;overflow-y:auto;
background-color:#525252;color:#F3FFFF;margin:0 -1px;opacity:1!important;
}
div.but_tonOO{height:30px;vertical-align:middle;cursor:pointer;background-image:url(http://uploads.ru/i/j/r/E/jrEm7.png);margin:2px!important;margin:0 -1px;background-color:#CDCDCD;}
div.Active.but_tonOO{background-color:transparent;}
</style>
<div  style="border:#D3D3D3 2px ridge;background-color:#F1F1F1;">
<div class="but_tonOO Active">1Имя кнопы(или картинка или HTML код кнопки</div>
<div class="cont_ainsOO"  style="display:block">
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
...Тут контент1<br />
</div>

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

<div class=but_tonOO>3Имя кнопы(или картинка или HTML код кнопки</div>
<div class="cont_ainsOO">
...Тут контент3
...Тут контент3
</div>
<script>
 $(".but_tonOO").click(function () {
      if($(this).next().css("display")!="block"){
      $(".but_tonOO").removeClass("Active");
      $(this).addClass("Active")
      $(".cont_ainsOO").hide(200);          //Свёртываем все предыдущие;
      $(this).next(".cont_ainsOO").toggle(500);
      }
    });
</script>
</div></div></center>

<!--Вертикальное с раздвижкой КОНЕЦ-->

Отредактировано Deff (Вс, 4 Мар 2012 20:36:15)

+1

14

  • Автор: kozhilya
  • Модератор
  • kozhilya
  • Зарегистрирован: Сб, 1 Окт 2011
  • Сообщений: 541
  • Уважение: +379
  • Позитив: +203
  • Пол: Мужской
  • Последний визит:
    Вчера 14:23:32

Deff
О, большее спасибо! Заработало :)))

0

15

  • Автор: Laktonika
  • Заслуженный
  • Laktonika
  • Зарегистрирован: Вс, 12 Дек 2010
  • Сообщений: 785
  • Уважение: +94
  • Позитив: +214
  • Последний визит:
    Вт, 23 Апр 2024 00:32:08

[не туда]

Отредактировано Laktonika (Вс, 4 Мар 2012 00:08:51)

0

Страница: 1

Вы здесь » Единый форум поддержки » Корзина » Структура объявления