КреатиВ.ТуТ

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

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


Вы здесь » КреатиВ.ТуТ » IPB 1.3 » Спойлер для форума


Спойлер для форума

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

1

Давно уже хотел внедрить спойлер для форума. Тоесть фичу, которая скрывает-показывает текст (изображения) в сообщениях.

Пробовал некоторые варианты - всё коряво было. Поэтому отложил это дело.
Тем не менее, КреативТуТ всегда подходил к делу творчески и креативно, и его мастера создавали модификации на то что практически создать было не возможно. Вот поэтому возможно у Мастеров появиться идеи насчёт спойлера :)

P.S. Де-факто, форум КреативТуТ являеться креативным форумом техподдержки Рухелпа, и было ,s моя воля, я бы и де-юре это организовал :)

0

2

Этим займемся после нового мода on/off.
Если есть какие то мысли или может где то понравилось как сделано, но так же сделать не получается пишите тут, посмотрим, подумаем, придумаем. :derisive:

0

3

Этим займемся после нового мода on/off.

Это верно :)

Если есть какие то мысли или может где то понравилось как сделано, но так же сделать не получается пишите тут, посмотрим, подумаем, придумаем

Ну вот например как на форуме Игромании - http://forum.igromania.ru/showthread.php?t=87098

Хотя есть одно но - там движок форумный vBulletin

0

4

Хотя есть одно но - там движок форумный vBulletin

Это не принципиально какой движок, мы кроме как на javascript никак не сделаем.  :)

0

5

Этим займемся после нового мода on/off.

Мод работает... Эх сейчас бы спойлером заняться  :unsure:

0

6

Этим займемся после нового мода on/off.

Мод работает... Эх сейчас бы спойлером заняться  :unsure:

Сегодня по возможности займусь.

0

7

Спойлер готов, к сожалению на описание нет времени, на следующей неделе постараюсь описать.  :)

Свернутый текст

:offtopic:
test 123
три два раз

0

8

Спойлер готов, к сожалению на описание нет времени, на следующей неделе постараюсь описать

Так долго ждать  :sorry:

0

9

Спойлер готов, к сожалению на описание нет времени, на следующей неделе постараюсь описать

Так долго ждать  :sorry:

К сожалению сейчас нахожусь в зоне отвратительного модемного интернета, да и компьютер не удовлетворяет моим потребностям.
Если будет время в воскресенье то напишу.

0

10

2 Grin:

Я посмотрел код на форуме. Думал его прикрутить. Тем не менее пару нюансов мне непонятны были, дело провалилось :D

0

11

2 Haktar:
Описание готово (прямая ссылка)

0

12

2 Grin:

Сейчас проверю как на Креативе работает спойлер, а то у меня он имеет парочку глюков (хотя модификацию новые теги я установил в урезаном варианте)

Свернутый текст

Тест. Тест. Тест. Тест. Тест. Тест. Тест. Тест. Тест. Тест. Тест. Тест.

КреатиВ.ТуТ

:)  :)  :)

http://1bb.ru/uploads/creos/post-72-1139725880.gif

Форум Империал

http://1bb.ru/uploads/creos/post-72-1140865265.gif

КреатиВ.ТуТ

КреатиВ.ТуТ

КреатиВ.ТуТ

КреатиВ.ТуТ

Код:
[b]КреатиВ.ТуТ[/b]

[list]
[/li][li]1
[/li][li]2
[/li][li]3
[/li][/list]

-

https://creos.1bb.ru/index.php?act=idx

Свернутый текст

Тест. Тест. Тест. Тест. Тест. Тест. Тест. Тест. Тест. Тест. Тест. Тест.

КреатиВ.ТуТ

:)  :)  :)

http://1bb.ru/uploads/creos/post-72-1139725880.gif

Форум Империал

http://1bb.ru/uploads/creos/post-72-1140865265.gif

КреатиВ.ТуТ

КреатиВ.ТуТ

КреатиВ.ТуТ

[list]
[/li][li]1
[/li][li]2
[/li][li]3
[/li][/list]

-

https://creos.1bb.ru/index.php?act=idx

Отредактировано Haktar (2009-04-21 18:16:28)

0

13

Значит так...

В расширеной форме ответа, в предпросмотре последних 10-ти сообщений спойлер не пашет. Но это мелочь.

Спойлер поддерживат вложение другого спойлера, что очень радует...

Также спойлер поддерживает внутри себя теги QUOTE, CODE, HTML и SQL а также такой тег в теге. Также спойлер работает если его поместить в эти теги.

Правда если их использовать в вложеном спойлере спойлера, спойлер рушиться.

Но вот у меня вопросик появился:

Также спойлер поддерживает внутри себя теги QUOTE, CODE, HTML и SQL а также такой тег в теге. Также спойлер работает если его поместить в эти теги.

У меня на форуме это не работает, тоесть при использовании этих тегов (как внутри спойлера, так и если его в них поместить) спойлер рушиться  :sorry:
В чём может быть причина?  :sorry:

Теперь о самом плохом. Спойрел работает зорошо на всех браузерах, кроме одного - естественно глючного ИЕ.
При использовании тегов doHTML, тега FLASH или даже тега list, если открыть браузером ИЕ страницу где есть спойлер с такими тегами внутри, то ИЕ просто... Зависает...

0

14

Теперь о самом плохом. Спойрел работает зорошо на всех браузерах, кроме одного - естественно глючного ИЕ.
При использовании тегов doHTML, тега FLASH или даже тега list, если открыть браузером ИЕ страницу где есть спойлер с такими тегами внутри, то ИЕ просто... Зависает...

Да вообще беда какая то, хотел сделать как лучше и проще, а почемуто вылезли такие проблемы, до сих пор понять не могу почему цикл не заканчивается в IE.... при использование <ul><li>....  :(  :angry:

Пришлось вернуться к старому доброму варианту замены...

0

15

Да вообще беда какая то, хотел сделать как лучше и проще, а почемуто вылезли такие проблемы, до сих пор понять не могу почему цикл не заканчивается в IE.... при использование <ul><li>....

Как вариант выхода - забанить разработчиков ИЕ :D

Пришлось вернуться к старому доброму варианту замены...

Протестировал - всё работает в ИЕ  :good:

0

16

Есть парочку вопросов по оформлению :)

Вот как отображаеться спойлер в Опере и ИЕ:
http://s47.radikal.ru/i117/0904/db/8f3ec3ce0886.gif
Тоесть отображенно как надо, так как я хотел.

А вот в Мозиле и Сафари некоректно отображаеться:
http://s41.radikal.ru/i094/0904/e9/14e745977c18.gif

Вот как я видоизменил скрипт:

<script language='JavaScript' type="text/javascript">
<!--

function getPostObj(id) {
itm = null;
if (document.getElementById) {
   itm = document.getElementById(id);
}
else if (document.all) {
   itm = document.all[id];
}
else if (document.layers) {
   itm = document.layers[id];
}
return itm;
}

function layer(layer_id) {
  var full_head = "&nbsp;Скрытая информация:</div><div align='right' style='float:right;width:auto'><input type='button' class='codebuttons' style='font-weight:bold;float:center;width:80px;height:20px'  value='Скрыть' /></div>";
  var short_head = "&nbsp;Скрытая информация:</div><div align='right' style='float:right;width:auto'><input type='button' class='codebuttons' style='font-weight:bold;float:center;width:80px;height:20px' value='Показать' /></div>";
  var id = document.getElementById("layer_" + layer_id);
  var head = document.getElementById("a_layer_" + layer_id);
  if (id.style.display == "none") {
   head.innerHTML = "<div align='left' style='float:left;width:auto'>&nbsp;<img src=\"http://imperiall.1bb.ru/uploads/imperiall/post-13-1240270270.gif\" width=\"20\" height=\"20\" border=\"0\" />&nbsp;" + full_head;
   id.style.display = "";
  }
  else {
   head.innerHTML = "<div align='left' style='float:left;width:auto'>&nbsp;<img src=\"http://imperiall.1bb.ru/uploads/imperiall/post-13-1240270255.gif\" width=\"20\" height=\"20\" border=\"0\" />&nbsp;" + short_head;
   id.style.display = "none";
  }
}

   function changePost(id, author) {
      var PostValue = getPostObj(id).innerHTML;

// Спойлер
   var date = new Date();
   while(PostValue.indexOf("[SPOILER]")!=-1 && PostValue.indexOf("[/SPOILER]")!=-1 ) {
      if (PostValue.indexOf("[SPOILER]") > PostValue.indexOf("[/SPOILER]")) {
        PostValue = PostValue.replace("[/SPOILER]","[плохой тег]");
      } else {
     var i = date.getTime() + "" + Math.round(Math.random() * 100) + 1;
        PostValue = PostValue.replace("[SPOILER]", '<div class="sp-wrap" id="a_layer_' + i + '" onclick="layer(\'' + i + '\'); return false;"><div align="left" style="float:left;width:auto">&nbsp;<img src="http://imperiall.1bb.ru/uploads/imperiall/post-13-1240270255.gif" width="20" height="20" border="0" />&nbsp;&nbsp;Скрытая информация:</div><div align="right" style="float:right;width:auto"><input type="button" class="codebuttons" style="font-weight:bold;float:center;width:80px;height:20px" value="Показать" /></div></div><div class="sp-body"id="layer_' + i + '" style="display: none">');
        PostValue = PostValue.replace("[/SPOILER]", "</div>");
      }
   }
 
   // выводим конечный результат
   getPostObj(id).innerHTML = PostValue;
}

//-->
</script>

А вот CSS

.sp-wrap { background-color: #BAC6DF; width: 98%; padding: 5px 3px 5px 3px; cursor: pointer; border: 1px; border-left: 1px; border-color: #000000; border-style: dashed; color: black; font-weight: bold; display: block; }
.sp-body { background-color: #DFE5F2; border: 1px; border-left: 1px; border-top: 0px; border-style: solid; border-color: #000000; width: 98%; padding: 2px 3px 2px 3px; }

Может что то посоветуешь?
:sorry:

0

17

2 Haktar:
То что красным выделено:

Свернутый текст

<script language='JavaScript' type="text/javascript">
<!--

function getPostObj(id) {
itm = null;
if (document.getElementById) {
  itm = document.getElementById(id);
}
else if (document.all) {
  itm = document.all[id];
}
else if (document.layers) {
  itm = document.layers[id];
}
return itm;
}

function layer(layer_id) {
  var full_head = "&nbsp;Скрытая информация:</div><div align='right' style='float:right;width:auto'><input type='button' class='codebuttons' style='font-weight:bold;float:center;width:80px;height:20px'  value='Скрыть' /></div>";
  var short_head = "&nbsp;Скрытая информация:</div><div align='right' style='float:right;width:auto'><input type='button' class='codebuttons' style='font-weight:bold;float:center;width:80px;height:20px' value='Показать' /></div>";
  var id = document.getElementById("layer_" + layer_id);
  var head = document.getElementById("a_layer_" + layer_id);
  if (id.style.display == "none") {
  head.innerHTML = "<div align='left' style='float:left;width:auto'>&nbsp;<img src=\"http://imperiall.1bb.ru/uploads/imperiall/post-13-1240270270.gif\" width=\"20\" height=\"20\" border=\"0\" />&nbsp;" + full_head;
  id.style.display = "";
  }
  else {
  head.innerHTML = "<div align='left' style='float:left;width:auto'>&nbsp;<img src=\"http://imperiall.1bb.ru/uploads/imperiall/post-13-1240270255.gif\" width=\"20\" height=\"20\" border=\"0\" />&nbsp;" + short_head;
  id.style.display = "none";
  }
}

  function changePost(id, author) {
      var PostValue = getPostObj(id).innerHTML;

// Спойлер
  var date = new Date();
  while(PostValue.indexOf("[SPOILER]")!=-1 && PostValue.indexOf("[/SPOILER]")!=-1 ) {
      if (PostValue.indexOf("[SPOILER]") > PostValue.indexOf("[/SPOILER]")) {
        PostValue = PostValue.replace("[/SPOILER]","[плохой тег]");
      } else {
    var i = date.getTime() + "" + Math.round(Math.random() * 100) + 1;
        PostValue = PostValue.replace("[SPOILER]", '<div class="sp-wrap" id="a_layer_' + i + '" onclick="layer(\'' + i + '\'); return false;"><div align="left" style="float:left;width:auto">&nbsp;<img src="http://imperiall.1bb.ru/uploads/imperiall/post-13-1240270255.gif" width="20" height="20" border="0" />&nbsp;&nbsp;Скрытая информация:</div><div align="right" style="float:right;width:auto"><input type="button" class="codebuttons" style="font-weight:bold;float:center;width:80px;height:20px" value="Показать" /></div></div><div class="sp-body"id="layer_' + i + '" style="display: none">');
        PostValue = PostValue.replace("[/SPOILER]", "</div>");
      }
  }
 
  // выводим конечный результат
  getPostObj(id).innerHTML = PostValue;
}

//-->
</script>

Заменить на:

<table width="100%"><tr><td align="left">&nbsp;<img src="http://imperiall.1bb.ru/uploads/imperiall/post-13-1240270255.gif" border="0" />&nbsp;&nbsp;Скрытая информация:</td><td align="right"><input type="button" class="codebuttons" style="font-weight:bold;float:center;width:80px;height:20px" value="Показать" /></td></tr></table>

Соответственно выше по коду надо избавиться от личших div и заменить на соответствующее. (тоесть вместо дивов мы делаем таблицу, и равняем её в право и в лево)

Отредактировано Grin (2009-04-22 14:47:08)

0

18

Заменить на:

Получилось!!!!

Благодарствую  :good:

0

19

Ещё вопросик.
Как выровнять спойлер по центру. Аналогично например таблице QUOTE

0

20

        PostValue = PostValue.replace("[SPOILER]", '<center><div class="sp-wrap" id="a_layer_' + i + '" onclick="layer(\'' + i + '\'); return false;"><table width="100%"><tr><td align="left">&nbsp;<img src="http://imperiall.1bb.ru/uploads/imperiall/post-13-1240270255.gif" border="0" />&nbsp;&nbsp;<b>СКРЫТАЯ ИНФОРМАЦИЯ:</b></td><td align="right"><input type="button" class="codebuttons" style="font-weight:bold;float:center;width:80px;height:20px" value="ПОКАЗАТЬ" /></td></tr></table></div><div class="sp-body"id="layer_' + i + '" style="display: none"><div>');
        PostValue = PostValue.replace("[/SPOILER]", "</div></div></center>");

0

21

2 Grin:

Вообще я не то хотел, но я сам справился.

Вот результат - http://imperiall.1bb.ru/index.php?showtopi...ndpost&p=363721

0


Вы здесь » КреатиВ.ТуТ » IPB 1.3 » Спойлер для форума