ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

GEMcross

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

Посетить

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

У нас: структурированная документация, возможность платить иностранными картами, перевыпустить подписку или купить бессрочно.

Купить скрипт

🔥 Новинка в портфолио: ДИЗАЙН ФОРУМА В СТИЛЕ ФЭНТЭЗИ С ПРОЗРАЧНОСТЬЮ

Платформа: MyBB.ru (RusFF)
Стоимость: 8000 рублей;
Авторы: Moju & Gerda

Посмотреть

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте • Предложения
Стать модератором • Отзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
Suggestions • Reviews

Details
СкрытьПоказать
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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

Универсальная кнопка скрытия (спойлер) элементов (MyBB) [Deff]

Страница: 1

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

1

Автор: Deff

УНИВЕРСАЛЬНАЯ КНОПКА СКРЫТИЯ

Админу часто необходима кнопочка скрытия с запоминанием своего положения после закрытия браузера, страницы... выключения компутера и т.д

В HTML верх

<!--Универсальная кнопка скрытия -->
<style class="Sbdcf5" id="Shoxa_01">.z-Hide{display:none!important;}</style>
<script src="http://hostjs-mybb2011.narod.ru/js/HidButton_v23_09_011.js"></script>
<!--//End /Универсальная кнопка скрытия -->

Туда где нужна кнопка

<span class="Show-Hide" alt="Селектор" style="cursor:pointer;">
<span class="b-Hide">Скрыть</span>
<span class="b-Show" style="display:none">Показать</span>
</span>

Код синим жирным - размножаем до нужного количества кнопок

Например можно Скрыть:

Ваши Банеры (Сейчас они скрыты всегда - тут же, при первом заходе они будут открыты
Объявления
Сайдбары
Уведомления и Всплывающие Окна
И т.д.

.

Пояснения к Коду Кнопки: (синим жирным)

1. Селектор - Код селектора скрываемого элемента(прописывается точно так же, как и для css кодов или кодов стиля.

Пример:

Для скрытия объявление вместо Селектор вставляем #pun-announcement
Для скрытия "Активные Темы" в Юзер меню вместо Селектор вставляем #pun-ulinks .item2

Можно скрыть сразу несколько элементов, для этого их прописываем через запятую,
К примеру скрыть одной кнопой и объявление и "Активные Темы" =>
#pun-announcement,#pun-ulinks .item2

2. Вместо надписей Скрыть и Показать - можно поставить свои картинки...
Обычно код такой:

<img src="Ccылка на картинку"/>

3. Если нужно отпозиционировать кнопку в необходимое место вставляем её в такую конструкцию:

<div style="border:red 1px solid; top:200px;margin-left:380px;position:absolute;">
Тут Код Вашей Кнопки ...
</div>

200 - Отступ от верхнего края экрана (*Регулируем
380 - Отступ влево от текущего положения (*Регулируем - значение может быть как положительным, - так и отрицательным
Cинее - убираем, после успешного позиционирования

Для Скрытия cобственно изготовленных элементов HTML - прописываем им id и ..
вставлем вместо селектора - #Ваше_id
Или можно прописать class - тогда вместо решетки ставим точку => .Ваш_class

Теги: Deff, Кнопка, Скрытие, Скрыть, Скрипты

Отредактировано Герда (16.05.13 09:42)

+1

2

УНИВЕРСАЛЬНАЯ КНОПКА СКРЫТИЯ

ДОПОЛНЕНИЯ

применимо только к Mybb

Поскольку частая ошибка внедрение кнопки в скрываемый элемент(дабы было поближе к элементу воздействия и нажатие), - Естественно кнопка скрывается вместе с элементом

Дабы все таки внедрять кнопу как можно ближе, а не позиционировать её из HTML верх или HTML низ

Добавочный Код Позиционирования для
"Универсальной Кнопки"

при помещениии её в сам скрываемый элемент
(Актуально для Объявления;Cайдбаров и Чата)

<div class="beforThis" style="border:red 1px solid; margin-top:-20px;margin-left:380px;z-index:100;position:absolute;">
Тут Код Вашей Кнопки ...
</div>

Кнопку(вместе с обрамлением) засовываем в сам скрываемый элемент (например - Объявление... :D Хотя и это не обязательно - можно с этим обрамлением - сунуть кнопку, к примеру в HTML низ или в HTML верх,(Но обязательно ниже части скрипта, идущей в HTML верх) , скрипт(при наличии class="beforThis"), всё равно переместит её перед скрываемым Элементом

:glasses: Добавка Класса class="beforThis" в обрамляющем div-блоке - Укажет скрипту на необходимость переместить кнопку и поместить её перед самим элементом скрытия

Окончательную регулировку положения осуществляем изменением выделенных цифр

-20 - Перемещение вверх  от текущего положения  (*Регулируем - значение может быть как положительным, - так и отрицательным
380 - Отступ влево от текущего положения (*Регулируем - значение может быть как положительным, - так и отрицательным
Cинее - убираем, после успешного позиционирования

Примечания - Для данных случаев, при использовании div - обрамления с классом   class="beforThis" селектор в Атрибуте alt  данной конкретной кнопки должен указывать на единственный элемент, в противном случае скрипт не сможет переместить кнопку в нужное место.

(*кол-во же кнопок: Столько - сколько необходимо

0

3

  • Автор: Deff
  • Жерар Депардье
  • Deff
  • Уважение: +3482
  • Достижения/подарки: cake 4 emoji_events 4
  • Наградные баллы: 122

Примеры
В HTML верх

Cкрытие Объявления

<!--Универсальная кнопка скрытия -->
<style class="Sbdcf5" id="Shoxa_01">.z-Hide{display:none!important;}</style>
<script src="http://hostjs-mybb2011.narod.ru/js/HidButton_v23_09_011.js"></script>
<!--//End /Универсальная кнопка скрытия -->

<div class="beforThis" style="border:red 1px solid; margin-top:-20px;margin-left:380px;z-index:100;position:absolute;">
<span class="Show-Hide" alt="#pun-announcement" style="cursor:pointer;">
<span class="b-Hide">Скрыть Объявление</span>
<span class="b-Show" style="display:none">Показать Объявление</span>
</span></div>

Cкрытие подписи

<!--Универсальная кнопка скрытия -->
    <style class="Sbdcf5" id="Shoxa_01">.z-Hide{display:none!important;}</style>
    <script src="http://hostjs-mybb2011.narod.ru/js/HidButton_v23_09_011.js"></script>
    <!--//End /Универсальная кнопка скрытия -->

    <div class="beforThis" style="border:red 1px solid; margin-top:-20px;margin-left:380px;z-index:100;position:absolute;">
    <span class="Show-Hide" alt=".post-sig" style="cursor:pointer;">
    <span class="b-Hide">Скрыть подпись</span>
    <span class="b-Show" style="display:none">Показать подпись</span>
    </span></div>

Отредактировано Герда (20.05.13 01:15)

+1

4

  • Автор: Deff
  • Жерар Депардье
  • Deff
  • Уважение: +3482
  • Достижения/подарки: cake 4 emoji_events 4
  • Наградные баллы: 122

УНИВЕРСАЛЬНАЯ КНОПКА СКРЫТИЯ,

- СКРЫВАЕМ ВСЁ!

(*Продолжаем демонстрировать возможности)
Скрываем категории, приветствие, объявление, статистику

http://savepic.org/2223961.png

Попробовать можно тут > Это интересно

Установка
В начало HTML верх (*Если у Вас еще не стоит этот код, - если стоит - этот пункт пропускаем
Пункт [1]

<!--Универсальная кнопка скрытия -->
<style class="Sbdcf5" id="Shoxa_01">.z-Hide{display:none!important;}</style>
<script src="http://hostjs-mybb2011.narod.ru/js/HidButton_v23_09_011.js"></script>
<!--//End /Универсальная кнопка скрытия Ч1 в HTML верх-->

В начало HTML низ

Пункт [2]

<!-- //=Универсальная Кнопка Ч2-HTML низ//Скрытие Категорий и т.д.-->
<div id="CNtButton" style="display:none;">
            <span class="Show-Hide" alt="###">
              <span class="b-Hide">
                <img src="http://savepic.org/2178873.gif" title="Скрыть">
              </span>
              <span class="b-Show" style="display:none">
                <img src="http://savepic.org/2203454.gif" title="Показать">
              </span>
            </span>
</div>
<script type="text/javascript">var DD=$("#CNtButton").html().split('###');
$("#pun-announcement  .container, #pun-status .container, .category .container, #pun-stats .statscon").each(function(){var L=DD[0]+"#"+$(this).parent().attr("id")+" ."+$(this).attr("class")+DD[1];$(this).before(L);})
</script><!-- //End-/Универсальная Кнопка//Скрытие Категорий и т.д.-->

Стиль Кнопки
В HTML верх (или в Конец первого Окна Стиля без тегов <style>

Пункт [3]

<style>
.Show-Hide{
z-index:100;
position:absolute;
padding:0;
margin-left:775px;
margin-top:-23px;
}
.Show-Hide *{
padding:0;
margin:0;
border:none transparent 0!important;
}
.Show-Hide span img{
cursor:pointer;
width:auto;
}
.Show-Hide[alt="#pun-status .container"]{
margin-top: 0px;
}
</style>

Пояснения:

:glasses: Для начинающего, эту часть можно не читать - просто установить код и Всё

По Пункту [2]

Красным -  ссылки на картинки Cкрыть/Показать (*если нужно, меняем на свои
Синим - перечисление скрываемых селекторов, что не нужно - убираем из списка
(!!!Внимание - Последний элемент в Списке на конце без запятой!
*Для наглядности, - селекторы выделены подчёркиванием через один.

1. #pun-announcement  .container, - Объявление
2. #pun-status .container, - Приветствие (Привет Гость...или Привет Гость
3. .category .container, - Категории
4. #pun-stats .statscon - Статистика


По Пункту [3] (см Стиль кнопок
1. Выравниваем - Ставим в нужное место все кнопки категорий!

a) Отступ от слево регулируем цифру в margin-left:775px;
(*если ширина форума задана в % ставим вместо 775px нужный % ->, к примеру -> 65%
Если Кнопки хотим ставить слево(а не справо), то уменьшаем цифру, к примеру, до 10-20px

a) Подвижка вверх: регулируем цифру в margin-top:-23px;

2. Выравниваем - Ставим(если есть необходимость) в нужное место остальные кнопки(не для скрытия категорий)
Для Этого в конец стиля Кнопок ставим такие коды селекторов (Под каждую кнопку, с желаемой дополнительной регулировкой

.Show-Hide[alt="#pun-status .container"]{
margin-top: 0px;
}

Где #pun-status .container - нужный селектор скрываемого контента кнопки (см. предыдущее пояснения). Значение 0px -отступ от верха - регулируем (может быть как плюс так и минус )

/*В общем случае, можно добавить в указания к селектору ещё и margin-left:XXpx; для подвижки кнопки влево-вправо/


Достоинства:

1. Независимость Установок скрытия для разных групп пользователей( т.е у Вас не будет такого, что скрытие
Скрытой от гостя категории в режиме Админа- Юзера-Пользователя приводит при Выходе-Входе(с форума) к скрытию какой-то иной категории, которую Вы не скрывали
2. Нет Ограничений для ИЕ6-7-8(а может и 9) по количеству кнопок

3. Более универсальное скрытие и возможность добавления новых кнопок, например для части контента в Объявлении, или Сайдбаре...(см. Пост 862 - 865

(*ЗЫ: - При использовании Переключателя стилей, стиль для кнопок, см. пункт [3]), добавляем к каждому стилю(с регулировкой, применительно к этому стилю) в конец первого Окна стиля

0

Страница: 1