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

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

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

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

Подробнее
Ищешь чем бы украсить свой форум или сайт к Хэллоуину? 🎃 Мы поможем нарядиться! 🎃

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

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


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Архив устаревших тем » Всплывающие подсказки на форуме и в постах


Всплывающие подсказки на форуме и в постах

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

1

Всплывающие подсказки в постах
Позволяет прятать за текст, ссылки и картинки всплывающий при наведении контент, работает и в постах на MyBB форумах, и в html-блоках.

http://forumupload.ru/uploads/0007/e3/f7/2617/23057.png

Автор: Romych, rps
Платформа: MyBB
Аналоги: Всплывающие подсказки в постах (MyBB) [kozhilya]

Всплывающие подсказки в постах, бета-версия


для работы с подсказками нам потребуется плагин Lytebox, а так же мы будем использовать тот что установлен на нашем сервисе поумолчанию - jquery.tipsy
оба плагина, как выяснилось, поддерживают работу с html контентом внутри всплывающих подсказок, что позволяет делать невероятные вещи, которые не даёт возможности делать тот же спойлер.
пример, подсказка может всплывать при наведении на установленную вами картинку, и автоматически начнёт проигрываться музыка или воспроизводиться видео внутри подсказки, можно вставлять так же любые таблицы, наполненные любым контентом.

всплывающие подсказки 6 видов, для удобства работы с ними создана вот такая форма

http://forumupload.ru/uploads/0007/e3/f7/2617/168542.png http://forumupload.ru/uploads/0007/e3/f7/2617/298825.png http://forumupload.ru/uploads/0007/e3/f7/2617/23057.png

в html-верх:

Код:
<script type="text/javascript" language="javascript" src="http://lytebox.com/lib/lytebox/lytebox.js"></script>
<link rel="stylesheet" href="http://lytebox.com/lib/lytebox/lytebox.css" type="text/css" media="screen" />
<style type="text/css">
.my {
background-color: #FFFFFF;
color: #488baa;
font-size: 12px;
font-family: Tahoma;
line-height: 125%;
border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
-moz-box-shadow: inset 0 0 1em #8cb9d6;
-webkit-box-shadow: inset 0 0 1em #8cb9d6;
box-shadow: inset 0 0 1em #8cb9d6;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#8cb9d6', Direction=145, Strength=3);
}
.post-content {overflow: visible !important;}

.tipsy-inner {font-size:16px!important;max-width:450px !important; text-align: left !important;}

.lytetip {position: static !important;}

.lytetip span {
  position: absolute !important;
  top: inherit !important; 
  left: inherit !important;
  display: inline-block !important;
  visibility: hidden;
  width: auto !important;
  margin-top: 0.9em;}

.lytetip:hover span {display: inline-block !important;visibility: visible;}

#fon
{position: fixed;
z-index: 2;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
</style>

в html-низ:

Код:
<!--Подсказки-->
<script language="javascript">
$('a.live-tipsy, #form-buttons td img').tipsy({live: true, gravity: $.fn.tipsy.autoNS, fade: true, html: true});
$('td#button-hide').before('<td id="tooltips" style=\'background-image:url("http://cdn2.iconfinder.com/data/icons/ledicons/comment.png")\' onclick="return changeVisibility(\'tipsybox\', this);"><img src="/i/blank.gif" original-title="Всплывающие подсказки"></td>');
$('#tooltips').click(function(){$('#tipsybox').before('<div id="fon"></div>'); });
if ((document.URL.indexOf("viewtopic.php")!=-1) || (document.URL.indexOf("post.php")!=-1)){
elm= document.getElementsByTagName("div");
for (y in elm) {if (elm[y].className == "post-content") {
p = elm[y].getElementsByTagName("p");
for (z in p) {if(!p[z] || !p[z].innerHTML) continue;
var post = p[z].innerHTML;
if(post.indexOf("[/mytool]")!= -1) {
tool = /\[mytool=(.*?)\](.*?)\|(.*?)\[\/mytool\]/gi
post = post.replace(tool, "<a href='javascript:void(0)' data-lyte-options='$1' class='lytetip' data-tip='$3'>$2</a>") 
};
if(post.indexOf("[/tipsy]")!= -1) {
tool = /\[tipsy=(.*?)\](.*?)\[\/tipsy\]/gi
post = post.replace(tool, "<a href='javascript:void(0)' style='text-decoration: none;' class='live-tipsy' original-title='$1'>$2</a>") 
};
p[z].innerHTML = post;}}}}
function getRadioGroupValue(radioGroupObj){for (var i=0;i<radioGroupObj.length;i++)if (radioGroupObj[i].checked) return radioGroupObj[i].value;return null;}
function act1() {var op=document.getElementById('opis').value;var ur=document.getElementById('adr').value;insert('[tipsy='+op+']'+ur+'[/tipsy]');changeVisibility('tipsybox');var d=document.getElementById('fon');d.parentNode.removeChild(d);};
function act2() {var tips=getRadioGroupValue(document.rf.tip);var op=document.getElementById('opis').value;var ur=document.getElementById('adr').value;insert('[mytool='+tips+']'+ur+'|'+op+'[/mytool]');changeVisibility('tipsybox');var d=document.getElementById('fon');d.parentNode.removeChild(d);}
</script>
<div class="my" align="center" id="tipsybox" style="display:none;width:375px;padding:8px;position:fixed;top:25%;right:35%;z-index:900;" class="container">
<strong>Варианты всплывающих подсказок</strong><br><br>
<form name="rf" style="text-align:center;padding:5px;word-spacing:4px;">
<input type="radio" name="tip" value="changeTipCursor:false"><a href="#" class="lytetip" data-lyte-options="changeTipCursor:false" data-tip="классическая"> classic</a>
<input type="radio" name="tip" value="tipStyle:info changeTipCursor:false" onclick="this.form.act.onclick=act2"><a href="#" class="lytetip" data-lyte-options="tipStyle:info" data-tip="информационная" onclick="this.form.act.onclick=act2"> info</a>
<input type="radio" name="tip" value="tipStyle:help changeTipCursor:false" onclick="this.form.act.onclick=act2"><a href="#" class="lytetip" data-lyte-options="tipStyle:help" data-tip="вопрос"> help</a>
<input type="radio" name="tip" value="tipStyle:warning changeTipCursor:false" onclick="this.form.act.onclick=act2"><a href="#" class="lytetip" data-lyte-options="tipStyle:warning" data-tip="предупреждение"> warning</a>
<input type="radio" name="tip" value="tipStyle:error changeTipCursor:false" onclick="this.form.act.onclick=act2"><a href="#" class="lytetip" data-lyte-options="tipStyle:error" data-tip="ошибкa"> error</a>
<input type="radio" name="tip" onclick="this.form.act.onclick=act1"><a href="#" class="live-tipsy" original-title="чёрная"> black</a><br><br><br>
<table width="auto">
<tr><td style="border-style:none;text-align:left;">Введите слово или bb-code с изображением, при наведении на которое будет появляться всплывающая подсказка:</td></tr>
<tr><td style="border-style:none;"><textarea id="adr"  cols="40" rows="3" style="width: 95%;">[img]http://cs253.vkontakte.ru/g9813274/c_a6b264f7.jpg[/img]</textarea></td></tr><tr><td style="border-style:none;text-align:left;">Введите текст с применением любых  bb-cod'ов, этот текст будет виден в подсказке при наведении курсора:</td></tr> 
<tr><td style="border-style:none;"><textarea id="opis" cols="40" rows="3" style="width: 95%;background:#f0f8ff;"></textarea></td></tr></table>
<button type=button name=act>Создать подсказку</button>  <button type="reset" onclick="changeVisibility('tipsybox');var d=document.getElementById('fon');d.parentNode.removeChild(d);">Отмена</button></form></div>

Эти подсказки можно сделать только в постах? Можно ли сделать в подписи, таблице, дополнительной странице?
да, можно, и на отдельной странице, и в подписи, как пожелаете
всплывающие подсказки двух типов, один основан на плагине Lytebox, другой на плагине jquery.tipsy
для работы всплывающей подсказки типа Lytebox мы в html коде страницы применяем тег ссылки класса lytetip

<a href="javascript:void(0)" data-lyte-options="здесь стиль подсказки (их 5 видов)" class="lytetip" data-tip="здесь текст или html-код, который будет всплывать в подсказке">здесь текст ссылки, при наведении на который появится всплывающая подсказка (вместо текста может быть изображение)</a>

для работы с подсказками типа jquery.tipsy (чёрными) используем ссылки класса live-tipsy:

<a href="javascript:void(0)" style="text-decoration: none;" class="live-tipsy" original-title="здесь текст или html-код, который будет всплывать в подсказке">здесь текст ссылки, при наведении на который появится всплывающая подсказка (вместо текста может быть изображение)</a>


ВНИМАНИЕ!! Скрипт конфликтует со стандартными спойлерами!
Если все же нужен этот скрипт и хочется совместить его со спойлерами, то скрипт спойлера от Deff.
Вставляем самым первым в HTML-верх:

Код:
<style type="text/css"> /*Спойлер */
  .punbb .quote-box.spoiler-box{
//border:#C6C6CF 1px solid;
  border-radius:5px;
  -webkit-border-radius:5px;
  -khtml-border-radius:5px;
  -moz-border-radius:5px;
  -o-border-radius:5px;

  box-shadow: 0px 2px 4px #8E8E8E;
  -webkit-box-shadow: 0px 2px 4px #8E8E8E;
  -khtml-box-shadow: 0px 2px 4px #8E8E8E;
  -moz-box-shadow: 0px 2px 4px #8E8E8E;
  }
.post-content .spoiler-box > blockquote.visible {  
display: none;}.punbb .spoiler-box blockquote {
min-width: 100%!important;
  }
.post-content .spoiler-box span.hide{
  display:none;
}
#button-spoiler {background:url('http://img706.imageshack.us/img706/1943/spoiler.gif') no-repeat center !important;}
.spoiler-box span.tit1{
  font-size:16px!important;
  font-weight:700;
}
</style>
<script type="text/javascript">
function tag_spolierr(){
bbcode('[spoiler]','[/spoiler]');
}
</script>
<script type="text/javascript">
$(document).ready(function(){a='<img onclick="tag_spolierr()" title="spoiler" src="/i/blank.gif"/>'
$("#form-buttons td#button-spoiler img").replaceWith(a);
SS='<span class=tit1>Cпойлер</span>';
$(".post-box .quote-box.spoiler-box div[onclick*='toggleClass']").each(function() {
  $(this).replaceWith(SS+'<input class=SPOILeR type=button style="float:right;margin-top:-4px;" alt="Cкрыть" value="Показать"/>')
});
$(".post-box .quote-box.spoiler-box input.SPOILeR").live("click", function(){
  $(this).next('blockquote').toggle('fast');C=$(this);
  a1=C.attr('alt');a2=C.val();C.val(a1);C.attr('alt',a2);
  });
});
</script><!-- Правки для спойла сервиса НТML верх-->

Скрипт несколько неказист и его нельзя "подписывать", но это пока что единственный рабочий вариант, который заменяет дефолтный.

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

+1

11

Рунный написал(а):

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

спс будем ждать

0

12

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

0

13

pegas0001, если все же нужен этот скрипт, а сам спойлер все еще нужен, то воспользуйся этим скриптом спойлера.
Благодарим за него Deff'а.

(Вставляем самым первым в HTML-верх)

Код:
<style type="text/css"> /*Спойлер */
    .punbb .quote-box.spoiler-box{
//border:#C6C6CF 1px solid;
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;

    box-shadow: 0px 2px 4px #8E8E8E;
    -webkit-box-shadow: 0px 2px 4px #8E8E8E;
    -khtml-box-shadow: 0px 2px 4px #8E8E8E;
    -moz-box-shadow: 0px 2px 4px #8E8E8E;
    }
.post-content .spoiler-box > blockquote.visible { 
display: none;}.punbb .spoiler-box blockquote {
min-width: 100%!important;
 }
.post-content .spoiler-box span.hide{
 display:none;
}
#button-spoiler {background:url('http://img706.imageshack.us/img706/1943/spoiler.gif') no-repeat center !important;}
.spoiler-box span.tit1{
 font-size:16px!important;
 font-weight:700;
}
</style>
<script type="text/javascript">
function tag_spolierr(){
bbcode('[spoiler]','[/spoiler]');
}
</script>
<script type="text/javascript">
$(document).ready(function(){a='<img onclick="tag_spolierr()" title="spoiler" src="/i/blank.gif"/>'
$("#form-buttons td#button-spoiler img").replaceWith(a);
SS='<span class=tit1>Cпойлер</span>';
$(".post-box .quote-box.spoiler-box div[onclick*='toggleClass']").each(function() {
  $(this).replaceWith(SS+'<input class=SPOILeR type=button style="float:right;margin-top:-4px;" alt="Cкрыть" value="Показать"/>')
});
$(".post-box .quote-box.spoiler-box input.SPOILeR").live("click", function(){
  $(this).next('blockquote').toggle('fast');C=$(this);
  a1=C.attr('alt');a2=C.val();C.val(a1);C.attr('alt',a2);
 });
});
</script><!-- Правки для спойла сервиса НТML верх-->

Скрипт несколько неказист и его нельзя "подписывать", но это пока что единственный рабочий вариант, который заменяет дефолтный. И в принципе, на время тестирования скрипта Комментариев, сойдет.

0

14

Прикольный скрипт)

0


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Архив устаревших тем » Всплывающие подсказки на форуме и в постах