Спойлеры

Страница: « 1 2 3 »

Сообщений 11 страница 20 из 28

Поделиться112022-05-03 07:58:19

Автор: Butch
Администратор

Код:

[html]<style>
  summary:before{
   content: " ";
   position:relative; 
   z-index:2;
   display:inline-block;
   width:16px;
   height:16px;
   margin:3px -12px -3px 12px;
   /*outline:red solid 1px;*/
   background: url(https://forumstatic.ru/files/0012/d8/04/46693.png);
  }
</style>
<details><summary>
[font=Georgia][i][size=20][color=lime]--- хтмл-ный  :flag:  спойлер [/color][/size][/i][/font]</summary> 
[color=fuchsia][font=Georgia][size=20]
удобный, 
довольно компактный  
:yep: [/size][/font][/color]</details>[/html]

[html]<style>
summary:before{
content: " ";
position:relative;
z-index:2;
display:inline-block;
width:16px;
height:16px;
margin:3px -12px -3px 12px;
/*outline:red solid 1px;*/
background: url(https://forumstatic.ru/files/0012/d8/04/46693.png);
}
</style>
<details><summary>хтмл-ный спойлер </summary>

удобный,
довольно компактный
:yep: </details>[/html]

=============
[html]<details><summary>хтмл-ный спойлер </summary>

удобный,
довольно компактный
:yep: </details>[/html]

Поделиться122022-05-03 09:29:54

Автор: Butch
Администратор

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

Pasteur
Обрамлять в теги [html][/html] надо всю конструкцию, а не отдельно тот код что я дал и отдельно спойлер!

Что-то пошло не так :no:

Наверное, я что-то неправильно делаю...

...или не очень чётко сформулировал идею :dontknow:

Поделиться132022-05-03 11:02:08

Автор: Butch
Администратор

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

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

И у тебя, как я понял, есть вариант решения?
Сразу оговорим параметры этого модернизированного НЕ-хтмл-ного спойлера:
- никакого бакграунда ни у заголовка, ни у содержимого,
- никаких отступов слева-сверху-снизу
- никаких кнопок открытия/сворачивания, - открывается спойлер кликом по заголовку (текстовому или картиночному), а сворачивается кликом по открывшемуся контенту.

Уточню во избежание необоснованных критических замечаний: хтмл-спойлер с такими характеристиками некоторое время существовал во вселенной МуВВ, - с его помощью я оформлял титульные посты на одном известном тебе форуме. Затем, вероятно, где-то что-то поменялось в вышестоящих инстанциях, коды частично сдохли, и поганенькие стрелочки снова материализовались в постах перед заголовками спойлеров, сдвигая оные вправо.
Так что, никаких заоблачных фантазий, просто хочу "вернуть взад" удобную оформительскую фичу. Если удастся сделать такую же без нагромождения кодов, буду только рад.
Заранее спасибо за помощь.

=======================================================

Неконструктивную часть диалога пропускаю.

Про сворачивание спойлера кликом по свободному пространству или тексту [не по ссылкам, конечно же!] в открывшемся подспойлерном контенте можем переговорить когда у тебя настроение будет более толерантное. Хотя... можем и не поднимать эту тему, а ограничиться компромиссным решением, - ввести через КСС произвольную картинку-"кнопку" для закрывания - в самом конце массива, упакованного под спойлер. Лет 10 назад, а то и больше, ты такую штучку уже разрабатывал, я ей до сих пор пользуюсь - https://polygon.forum-top.ru/viewtopic.php?id=46#p341

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

Остальное можно реализовать согласно твоим требованиям

А вот за это - ещё одно предварительное спасибо.

Поделиться142022-05-03 13:15:43

Автор: Butch
Администратор

[html]<details><summary>
<marquee behavior="left" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;"></marquee>
</summary><p>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p></details>[/html]
==========================================================================================
без настроек для текста, - чисто под картинку:
[html]<details><summary><marquee behavior="left" scrollamount="10"></marquee></summary>
</details>[/html]

Поделиться152022-05-03 15:29:45

Автор: Butch
Администратор

Вариант встроенного медиа-спойлера?

В HTML низ

Код:

<script type="text/javascript"><!--Cпойлер для Ютуб-видео-->
function spoilYouTube(){
  var error=true;
  $("#button-spoiler img").click();
  var link_url = prompt('Введите ссылку на Видео с YouTube', 'http://');
  if(link_url.indexOf('http://www.youtube.com/')!=-1){
     str=link_url.split(/watch\?v=|&/);
     if(str[1]){ bbcode('[YouTube='+str[1]+']','[/YouTube]');
     var error = false;}
  } if(error) alert('Неверный ввод ссылки!')
}
$(document).ready(function(){
$("#post #button-video").after('<td title="Cпойлер для Ютуб-видео" id=button-bgColor style="background:url(http://s3.uploads.ru/jY9Up.gif) 50% 3px no-repeat!important" align=center valign=center><img onclick="spoilYouTube()" src="/i/blank.gif" /></td>');});
var testString='[YouTube=';
var framestring = '<script type="text"  class="youtube"><iframe width="480" height="284" src="http://www.youtube.com/embed/###" frameborder="0" allowfullscreen></iframe><'+'/'+'script>';
var text = ".toggleClass('visible')"
$('.post-content .spoiler-box > div[onclick*="'+text+'"] + blockquote > p').filter(':contains("'+testString+'")').each(function(){
      var str = $(this).html().split(/\[YouTube=|\]/)[1];
      if(str){$(this).html(framestring.replace('###',str));
        var p = $(this),cont=$(this).find('script.youtube').remove();
       $(this).parents('blockquote:first').prev().one('click',function(){
          var frame=$(cont[0].text);frame.appendTo(p)
        });
      }  
});
</script>

Поделиться162022-05-03 15:44:46

Автор: Butch
Администратор

из сборника (Дефф)

http://hostjs-mybb2011.narod.ru/Spoiler_v00.htm

В HTML верх ставим такой код:

Код:

<style id="MakeSpoiler">.punbb .post .quote-box{display:none!important;}</style>
<style>#lnk2{background-image:url(../i/blank.gif);}</style>

В HTML низ идет такая часть :

<!-- Cпойлер Ч2 НTML низ -->
<script type="text/javascript">
var StSTART="<div class=\"spoiler quote-box\">\
<p class=\"Button-spoiler\" style=\"padding:8px 0 12px 0;\"><img src=\"http://savepic.net/700536.png\" class=\"Sp-button\"  onmousedown=\"this.src='http://savepic.net/680056.png'\" onmouseup=\"this.src='http://savepic.net/700536.png'\" onmouseout=\"this.src='http://savepic.net/700536.png'\" style=\"margin:-8px 6px 0 4px;float:left;\" alt=\"'Кнопка'\"/><img src=\"http://savepic.net/680056.png\" style=\"position:absolute;z-index:-3;visibility:hidden;\" alt=\"img-2\"/><span style=\"margin-left:3px;padding:2px 20px 2px 17px;border:dashed 2px #C9C9C9;\"><span class=\"show-hide 1\">Показать</span><span style=\"display:none;\" class=\"show-hide 2\">Скрыть</span></span></p>\
<div class=\"show-hide\" style=\"margin-top:6px;width:100%!important;display:none\"></br><blockquote>"
var StEnd='</blockquote></div></div>';
</script>
<script type="text/javascript">
var str='<div align=center style="height:17px;width:37px;"><img id="SP_setting" onclick="SP_click();" style="height:20px;width:20px;margin:-4px -2px 0 -2px;" src="http://savepic.org/1446271.gif"/ title="Спойлер-Настройки"><img style="height:9px;width:14px;" src="http://savepic.net/1127572.gif" title="cпойлер" onclick="SP_click();"></div>';$("#form-buttons #button-link").before("<td id=Deff_sp2_ style='background-image:none;'>"+str+"</td>")
function SP_click(){bbcode('[quote==Spoiler]','[\
/quote]')}
</script>
<script type="text/javascript">
$('.Sp-button').live("click", function(){
$(this).parents('div.spoiler').children('div.show-hide').toggle('slow'),$(this).parents('div.spoiler').find('span.show-hide').toggle()
});
$(".post-box .quote-box cite:contains('=Spoiler написал(а):')").each(function (i) {
$(this).parent(".quote-box").replaceWith(StSTART+$(this).parent(".quote-box").find("blockquote:first").html()+StEnd)
})
$("#MakeSpoiler").replaceWith("")</script><!--/End//Cпойлер Ч2 НTML низ -->

Кто-то Просил Выделить полугругом по-типу цитаты - Добавьте код в HTML верх:

Код:

<!-- Cпойлер Ч1 НTML верх -->
<style type="text/css">
.punbb .post-content .spoiler.quote-box{
  border-bottom-left-radius: 12px!important;
  border-bottom-right-radius: 12px!important;
  border-top-left-radius: 12px!important;
  border-top-right-radius: 12px!important;
  border:dashed 2px #E5C4E5;
}
.punbb .post-content .spoiler.quote-box blockquote p{margin:-20 12px 0 12px;}

.punbb .post-content div.show-hide{
  width: 100%!important;
}
.punbb .post-content div.show-hide{
  width: 100%!important;
.punbb .post-content div.show-hide{
  padding-left:13px;
  margin-top: 12px!important;
  padding:13px 0!important;
  width:90%;
  background-color:#E8D3F5!important;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border:dashed 1px #D1C1D8;
}
</style>

Красным - цвет внутреннего бекграунда - синим - цвет бордеров - С параметрами можно играть под вид удобо приемлимый

(*Поправлено для ИE 6-7

Добавка к предыдущему скрипту ( Скрываем все Code-box - все блоки с тегами Код:

(Cтавим скрипт сразу вслед за предыдущим

Код:

<script type="text/javascript">
var Kode=StSTART.replace('Показать','<b style=font-size:"16px!important;">Код:</b>');Kode=Kode.replace('Скрыть','<b style=font-size:"16px!important;">Скрыть Код:</b>');
$(".post-box .code-box strong:contains('Код:')").each(function (i) {
$(this).parent(".code-box").replaceWith(Kode+$(this).parent(".code-box").find(".blockcode:first").html()+StEnd)
})
</script>

не тестировал

Поделиться172022-05-03 23:22:57

Автор: Butch
Администратор

А вот здесь пример использования ХТМЛ-спойлера для создания массивов-"матрёшек". Пока работал код "display: none", удаляющий маркер-стрелку, весь массив выглядел прекрасно, - и с закрытыми спойлерами и при их разворачивании рамка не ломалась, отступы не появлялись. Вот, собственно, что-то такое и хотелось бы воссоздать в НЕхтмл-ном варианте... Или отремонтировать хтмл-ный (убить стрелочки). Смотря что проще реализовать.
[html]

Код:

<style>
details summary {
  display: block;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  content: "";
}
details[open] summary::before {
  content: "";
}
</style>

<details><summary>[img]https://i.imgur.com/SZf3QEX.gif[/img]</summary>[img]https://i.imgur.com/2IEUSDr.gif[/img]</details><details><summary>[img]https://i.imgur.com/cYD83YY.gif[/img]</summary>[img]https://i.imgur.com/SCXKtDp.png[/img]</details><details><summary>[img]https://i.imgur.com/s1rvTyB.gif[/img]</summary>[img]https://i.imgur.com/zgyZ4Vf.png[/img]</details><details><summary>[img]https://i.imgur.com/cX2Glm3.gif[/img]</summary>[img]https://i.imgur.com/Q70GL7Q.png[/img]</details><details><summary>[img]https://i.imgur.com/0cfzqos.gif[/img]</summary>[img]https://i.imgur.com/mbNQLUZ.png[/img]</details>[img]https://i.imgur.com/yWdZwgM.png[/img][/html]

перестал работать вар.2

Код:

<div><style>
/* убрать маркер-стрелку у персонального спойлера */
summary::-webkit-details-marker {
  display: none;
}
#p367 img {
    margin: 0;
    display: block;
    max-width: 100%; 
}
summary {
    outline: none;
    cursor: pointer;
}
</style></div>

Поделиться182022-05-03 23:31:14

Автор: Butch
Администратор

Пример использования ХТМЛ-спойлера для создания массивов-"матрёшек" с использованием новых доп.кодов

доп.коды

Код:

<!-- убирает верхнее-нижнее поля у картинок  -->
<style>
.punbb  .post-content img.postimg {
margin:-0px 0 0!important;
}
</style>

<!-- убирает треугольник-маркер у хтмл-спойлера  -->
<style>
details summary {
  display: block;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  content: "";
}
details[open] summary::before {
  content: "";
}
</style>

[html]

<style>
.punbb .post-content img.postimg {
margin:-0px 0 0!important;
}
</style>

<style>
details summary {
display: block;
}
details summary::-webkit-details-marker {
display: none;
}
details summary::before {
content: "";
}
details[open] summary::before {
content: "";
}
</style>

<details><summary></summary></details><details><summary></summary></details><details><summary></summary></details><details><summary></summary></details><details><summary></summary></details>[/html]

Поделиться192022-05-04 00:09:26

Автор: Butch
Администратор

Коды выставил как положено. В этом посте - тестовый массив.

Код:

[img]https://i.imgur.com/ZFGpmQH.png[/img][spoiler="[img]https://i.imgur.com/5hqXEfr.png[/img]"][img]https://i.imgur.com/9XKUytq.png[/img][spoiler="[img]https://i.imgur.com/SoHh1AA.png[/img]"][img]https://i.imgur.com/PviVjPt.png[/img][/spoiler][/spoiler][img]https://i.imgur.com/ZFGpmQH.png[/img]

Поделиться202022-05-04 01:06:41

Автор: Butch
Администратор

Структура анализируемого массива из предыдущего поста. Тестовые картиночные блоки по 1200х100 пикселей сгруппированы следующим образом: свободный блок, за ним - спойлер, в заголовке которого такой же блок, а внутри - ещё один блок, а также вложенный спойлер-2 (у коего заголовок - тоже стандартный блок, и внутри - ешё один такой же блок; затем следует финальный картиночный блок. Всё. Словесное описание получается путанным, хотя по сути речь об обычной "матрёшечной" структуре.

Макеты массива (как это должно выглядеть в закрытом, частично открытом и полностью открытом состоянии

Все элементы собраны в единый монолит, - никаких отступов и интервалов ни с какой стороны. То, что при этом не видны "точки входа" под спойлер, это нормально, - так оно и задумывалось.

Страница: « 1 2 3 »

Polygon

Меню навигации

Пользовательские ссылки

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

Спойлеры

Сообщений 11 страница 20 из 28

Поделиться112022-05-03 07:58:19

Поделиться122022-05-03 09:29:54

Поделиться132022-05-03 11:02:08

Поделиться142022-05-03 13:15:43

Поделиться152022-05-03 15:29:45

Поделиться162022-05-03 15:44:46

Поделиться172022-05-03 23:22:57

Поделиться182022-05-03 23:31:14

Поделиться192022-05-04 00:09:26

Поделиться202022-05-04 01:06:41