Спойлер и Safari

InstantCMS 2.X

Спойлеры в instantcms не работают в браузере safari

#1 17 июля 2017 в 21:17
В новых версиях инстанта в комментариях имеется спойлер.
Но, как выяснилось, на эппловых устройствах он не работает. Ни на мобильных устройствах ни на ноутбуках.
Я поставил даже сафари для винды — на ней тоже не работает.
Спойлер видно, выглядит также, как на остальных браузерах, но при нажатии скрытый текст не появляется, просто плюс в кнопке превращается в минус.
Кто имеет тайные знания об устройстве сафари? Может подскажете, как решить эту проблему?
#2 18 июля 2017 в 00:02

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

Ris

Тоже самое, этот браузер глючный какой-то, им кто-то пользуется? В нем даже ютуб не работает.
#3 18 июля 2017 в 06:37

Тоже самое, этот браузер глючный какой-то, им кто-то пользуется? В нем даже ютуб не работает.

Андрей
Несчастные эппловладельцы вынуждены им пользоваться. hoho
#4 18 июля 2017 в 11:50
при переходе на ютуб появляется сообщение о том что браузер устарел и не поддерживается, но если его проигнорировать и продолжить просмотр сайта то вполне можно пользоваться.
#5 18 июля 2017 в 11:58

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

Нил™
Со спойлерами на инстанте такой метод не прокатывает…
#6 18 июля 2017 в 12:10
Ну вот спойлер.

содержимое спойлера
разве он у вас в сафари не открывается? У меня открывается.

Если в новой версии двойки не открывается, вероятно там какой нибудь из скриптов влияет, в консоли ошибок нет?
#7 18 июля 2017 в 12:18

Если в новой версии двойки не открывается, вероятно там какой нибудь из скриптов влияет, в консоли ошибок нет?

Нил™
Спойлеры из первой ветки нормально открываются. Они на яваскрипте:
  1. if (!$title) { $title = $_LANG['SPOILER']; }
  2. $str .= '<div class="bb_tag_spoiler">';
  3. $str .= '<div class="spoiler_title">
  4. <strong>'.$this->cleanAttrValue($title).'</strong>
  5. <input style="margin-left:10px" type="button" onclick="$(this).parent(\'div\').parent(\'div\').find(\'.spoiler_body\').slideToggle(); " value="'.$_LANG['SHOW'].'" />
  6. </div>';
  7. $str .= '<div class="spoiler_body" style="display:none">';
  8. $str .= $this -> get_html($elem['val']);
  9. $str .= '</div>';
  10. $str .= '</div>';
  11. return $str;
Во второй ветке спойлер устроен по-другому
  1. return '<div class="spoiler"><input tabindex="-1" type="checkbox" id="'.$id.'"><label for="'.$id.'">'.$title.'</label><div class="spoiler_body">'.$content.'</div></div>';
Никаких ошибок в консоли. Просто не открывается.
#8 18 июля 2017 в 12:19

Никаких ошибок в консоли. Просто не открывается.

Ris
Чекбокс не чекается по-видимому.
#9 18 июля 2017 в 12:22

Чекбокс не чекается по-видимому.

Fuze
Чекается. Плюс ни минус меняется.
Начинаю в консоли убирать галки с каких-либо свойств (все равно каких, цвет шрифта, дисплей) — спойлер открывается.
Мистика…
#10 18 июля 2017 в 12:40
А тут работает переключатель?
#11 18 июля 2017 в 14:47

А тут работает переключатель?

Fuze
Да, работает.

Провел эксперимент. Сделал html файлик как тут Pocus рассказывал: instantcms.ru/forum/thread26743-1.html
Вот так работает и в хроме и в сафари:
  1. <style>
  2. .spoiler > input + .box { display: none; }
  3. .spoiler > input:checked + .box { display: block; }
  4. </style>
  5.  
  6. <div class="spoiler">
  7. <input type="checkbox" >
  8. <div class="box">
  9. Текст сообщения в спойлере.
  10. </div>
  11. </div>
Вот так в хроме работает, а в сафари — нет:
  1. <style>
  2. .spoiler > input + label + .box { display: none; }
  3. .spoiler > input:checked + label + .box { display: block; }
  4. </style>
  5.  
  6. <div class="spoiler">
  7. <input type="checkbox" id = "111111">
  8. <label for="111111">Spoiler</label><div class="box">
  9. Текст сообщения в спойлере.
  10. </div>
  11. </div>
В общем взял код от спойлера из первой ветки:
  1. content = this.getSelectionHtml();
  2.  
  3.  
  4. spoiler_name = prompt('Название спойлера', 'Спойлер');
  5.  
  6.  
  7. spoiler = '<div class="splr"><input style="padding: 3px;" type="button" onclick="$(this).parent(\'div\').find(\'.spoiler_body\').slideToggle();" value="'+spoiler_name+'">'+
  8. '<div class="spoiler_body" style="display: none">'+content+'</div></div>';
  9.  
  10.  
  11. this.insertHtmlAdvanced(spoiler);
Пока все юзеры довольны.
#12 19 июля 2017 в 09:19

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

Ris
Если нет особых причин, можно на 1 уменьшить количество элементов и селекторов (<div class="bb_tag_spoiler">)
Ну и скриптику тогда не придётся искать и родителя и дедушку кнопки:
  1.  
  2. <input style="margin-left:10px" onclick="$(this).parent('div').next('.spoiler_body').slideToggle(); " value="Показать" type="button">
  3.  
#13 19 июля 2017 в 11:31
Олег Васильевич я,
Спасибо, вот так заработало:
  1. '<input style="margin-left:10px" onclick="$(this).next(\'.spoiler_body\').slideToggle(100); " value="'+spoiler_name+'" type="button"><div class="spoiler_body" style="display: none">' + content + '</div>'
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.