>
Категории вопросов
Задать вопрос +

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Похожие вопросы



Всплывающая кнопка Цитировать на форуме

голоса: 0

Как сделать кнопку [Цитата] всплывающей при выделении текста?

Типа:

 

Вот код для моей кнопки:

<a href="javascript:Insert('$GROUP_ID$,$USERNAME$',selection);" onmouseover="get_selection()" class="postQuote"><img alt="" style="margin:0;padding:0;border:0;" src="http://elitegamersteam.my1.ru/./b_Red_Glass/p_quote.gif" title="Цитировать"></a>

 

Адрес сайта http://elitegamersteam.my1.ru
| Автор: | Категория: Дизайн сайта

Ответов: 1

голоса: 0
На каком сайте вы видели такую кнопку?
| Автор:

1) Конкретно первый раз увидела здесь: 

https://www.b17.ru/blog/morozi_rastopili_chelovecheskie_serdtsa/

2) Искала коды на Юкоз, попадала на такие форумы http://qssupport.ru/viewtopic.php?id=2490

3) Была попытка вот здесь https://puzzleweb.ru/css/21_modalnoe_okno.php сделать это через модальное окно... https://puzzleweb.ru/css/examples/21-4.php :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Быстрое цитирование</title>
    <style>
      #okno {
        width: 300px;
        height: 50px;
        text-align: center;
        padding: 15px;
        border: 3px solid #0000cc;
        border-radius: 10px;
        color: #0000cc;
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
      #okno:target {display: block;}
      .close {
        display: inline-block;
        border: 1px solid #f9cb9c;
        color: #000000;
        padding: 0 12px;
        margin: 10px;
        text-decoration: none;
        background: #ffe599;
        font-size: 13pt;
        cursor:pointer;
      }
      .close:hover {background: #fff2cc;}
    </style>
  </head>
 
  <body>
   
    <div id="okno">
      Всплывающая кнопка<br>
     
<a href="postQuote (НЕ УВЕРЕНА, что эта ссылка цитаты берёт выделенный текст в форму ответа)" class="close">Цитировать</a>
    </div>
     
    <a href="#okno">Как вызывать окно выделением текста??</a>
 
  </body>
</html>

 

 

| Автор:

В шаблон "вид материалов" модуля форум в самый низ ставим....

 <a href="javascript:Insert('$ID$','$USERNAME$',selection);" onmouseover="get_selection()" class="postQuote$ID$">
 <img alt="" style="margin:0;padding:0;border:0;" src="/.s/img/fr/bt/2/p_quote.gif" title="Цитировать">
</a>
<script>
var getSelectedText = function() {
 var text = '';
 if (window.getSelection) {
 text = window.getSelection().toString();
 } else if (document.selection) {
 text = document.selection.createRange().text;
 }
 return text;
}
$('#ucoz-forum-post-$ID$').on('mouseup', function(e){
 var text = getSelectedText();
 if (text != '') {$('.postQuote$ID$').css({'display':'block', 'left':e.pageX-120+'px', 'top':e.pageY-220+'px'});}
});
$('.posttdMessage').on('click', function(){$('.postQuote$ID$').hide();});
 </script>
<style>
 .postQuote$ID$ {
 position:absolute;
 display:none;
 cursor: pointer;
 }
</style>

| Автор:
Sentimo,

Поставила и в Вид материалов:

<table border="0" width="1000" cellspacing="1" cellpadding="2" class="postTable">
<tr><td width="23%" class="postTdTop" align="center"><a title="Жми, чтобы взять имя автора в пост" class="postUser" href="javascript://" rel="nofollow" onClick="emoticon('[b]$USERNAME$[/b],');return false;">$USERNAME$</a></td><td class="postTdTop"><?if($AWARDS_DO_URL$ && $USER_LOGGED_IN$ && $CUR_USER_ID$!=$UID$)?><div style="float:right"><a href="javascript://" rel="nofollow" onclick="new _uWnd('AwD','Вручить награду',380,200,{autosize:1,maxh:300},{url:'/index/55-$UID$-28-forum-$FID$_$TID$_$ID$_16_$TIMESTAMP$'});return false;"><img alt="" src="/.s/img/icon/thumbu.png" width="13" border="0" title="Хороший пост"></a> <a href="javascript://" rel="nofollow" onclick="new _uWnd('AwD','Вручить награду',380,200,{autosize:1,maxh:300},{url:'/index/55-$UID$-47-forum-$FID$_$TID$_$ID$_16_$TIMESTAMP$'});return false;"><img alt="" src="/.s/img/icon/thumbd.png" width="13" border="0" title="Плохой пост"></a></div><?endif?>Дата: $WDAY$, $DATE$, $TIME$ | Сообщение # $NUMBER$</td></tr>
<tr><td class="postTdInfo" valign="top">
<?if($AVATAR_URL$)?><img alt="" title="$USERNAME$" class="userAvatar" border="0" src="$AVATAR_URL$"><?endif?><?if($USER_TITLE$)?><div class="postRankName">$USER_TITLE$</div><?else?><div class="postRankName">$USER_RANK_NAME$</div><?endif?>

<?if($GROUP_ICON$)?><div class="postRankIco">$GROUP_ICON$</div><?else?><div class="postRankIco">$USER_RANK_ICON$</div><?endif?>

<?if($POSTS$)?><div class="numposts">Сообщений: <span="unp">$POSTS$</span></div><?endif?>
<?if($AWARDS_READ_URL$)?><div class="reputationA">Награды: <a href="$AWARDS_READ_URL$" title="Список наград"><span class="repNums"><b>$AWARDS$</b></span></a> <?if($AWARDS_DO_URL$)?>&nbsp;<a href="$AWARDS_DO_URL$"><span style="font-size:10pt" title="Вручить награду"><b>+</b></span></a><?endif?><?endif?>
<?if($READ_REP_URL$)?><div class="reputationB">Репутация: <a title="Смотреть историю репутации" class="repHistory" href="$READ_REP_URL$"><b>$REP_RATING$</b></a> <?if($DO_REP_URL$)?> &nbsp;<a class="reputationDo" title="Изменить репутацию" href="$DO_REP_URL$"><span style="font-size:10pt"><b>&#177;</b></span></a></div><?endif?><?endif?>
<?if($READ_BAN_URL$)?><div class="userBan">Замечания: <a class="banPercent" title="Смотреть историю замечаний" href="$READ_BAN_URL$">$BAN_RATING$</a> <?if($DO_BAN_URL$)?> &nbsp;<a title="Изменить уровень замечаний" class="banDo" href="$DO_BAN_URL$">&#177;</a></div><?endif?><?endif?>
<?if($USER_STATUS$)?><div class="statusBlock">Статус: $USER_STATUS$</div><?endif?>
<?if($GROUP_ID$)?> <?else?><br><br><br><br><br><?endif?>
</td><td class="posttdMessage" valign="top" style="word-wrap: break-word;">$MESSAGE$
<?if($ATTACHMENT$)?> <div align="left" class="eAttach">Прикрепления: $ATTACHMENT$</div><?endif?>
<?if($SIGNATURE$)?><br><hr size="1" width="150" align="left" class="signatureHr"><span class="signatureView">$SIGNATURE$</span><?endif?>
 <?if($EDITEDBY$)?><br><br><div class="edited">Сообщение редактировалось $EDITEDBY$</div><?endif?></td></tr>
<tr><td class="postBottom" align="center"><?if($USER_IP$)?><div class="postip">[ <a class="postIpLink" href="https://apps.db.ripe.net/search/query.html?searchtext=$USER_IP$" target="_blank">$USER_IP$</a><?if($POST_COUNTRY_ID$)?> (<a href="javascript://" rel="nofollow" onclick='prompt("","$POST_COUNTRY$");return false;'>$POST_COUNTRY_ID$</a>)<?endif?> ]</div><?else?>&nbsp;<?endif?></td><td class="postBottom">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr><td>$USER_DETAILS_ICON_BAR$</td><td align="right" style="padding-right:15px;">$ENTRY_MANAGE_ICON_BAR$</td><td width="2%" nowrap align="right">$ON_TOP_ICON$$DEL_ENTRY_FIELD$</td></tr>
</table></td></tr></table>
    
 <a href="javascript:Insert('$ID$','$USERNAME$',selection);" onmouseover="get_selection()" class="postQuote$ID$">
 <img alt="" style="margin:0;padding:0;border:0;" src="/.s/img/fr/bt/2/p_quote.gif" title="Цитировать">
</a>
<script>
var getSelectedText = function() {
 var text = '';
 if (window.getSelection) {
 text = window.getSelection().toString();
 } else if (document.selection) {
 text = document.selection.createRange().text;
 }
 return text;
}
$('#ucoz-forum-post-$ID$').on('mouseup', function(e){
 var text = getSelectedText();
 if (text != '') {$('.postQuote$ID$').css({'display':'block', 'left':e.pageX-120+'px', 'top':e.pageY-220+'px'});}
});
$('.posttdMessage').on('click', function(){$('.postQuote$ID$').hide();});
 </script>
<style>
 .postQuote$ID$ {
 position:absolute;
 display:none;
 cursor: pointer;
 }
</style>

 

И в css поставила:

/* ====== Quick Quote ====== */
.postQuote$ID$ {
position:absolute;
display:none;
cursor: pointer;}
/* --------- */ 

Кнопка не появляется...  

| Автор:
Brook,
а в ксс ничего ставить не надо. кнопка появляется, но она немного выше и левее, поиграйтесь этими цифрами 120 и 220  'left':e.pageX-120+'px', 'top':e.pageY-220+'px'
| Автор:
Sentimo,
Серьёзно не отображается... У меня три разных браузера, Опера, Комодо, Яндекс, обновила Кэш, ни один не показал кнопку. Вообще ни где...
| Автор:

Ох, всё отображается...

| Автор:
Sentimo,

Как так?! А у меня нет: 

| Автор:
Brook,
Поспрашивала по пользователям, ни у кого эта кнопка так и не появляется((  Уже ссылку на картинку в коде поставила на действующий набор кнопок. И все равно нет...  Вы скрин делали с моего сайта или с какого-то модулятора?  Что может быть ни так?
| Автор:

Скрин с вашего сайта, попробуйте так...

<a href="javascript:Insert('$ID$','$USERNAME$',selection);" class="postQuote$ID$">
 <img alt="" style="margin:0;padding:0;border:0;" src="/.s/img/fr/bt/2/p_quote.gif" title="Цитировать">
</a>
<script>
$('#ucoz-forum-post-$ID$').on('mouseup', function(e){
 var text = get_selection();
 if (text != '') {$('.postQuote$ID$').css({"display":"block", "left":e.pageX-120+"px", "top":e.pageY-220+"px"});}
});
$('.posttdMessage').on('click', function(){$('.postQuote$ID$').hide();});
 </script>
<style>
 .postQuote$ID$ {
 position:absolute;
 display:none;
 cursor: pointer;
 }
</style>

| Автор:
Sentimo,
По-прежнему ничего...((( Даже в браузере IE реакции нет. Вставляю весь код целиком вниз в "Вид материалов"  Не понимаю,что ни так... Почему у Вас отображается, а у меня нет? Опера, Комодо,Яндекс, IE не отображают.
| Автор:
Brook,

Подмените только скрипт на этот, остальное не трогайте...

 <script>
$(function(){
$('#ucoz-forum-post-$ID$').on('mouseup', function(event){ 
var text = get_selection();
if (text != '') {$('.postQuote$ID$').css({"left":event.pageX-150+"px", "top":event.pageY-220+"px"}).show().click(function(){$(this).hide();});}
});
}); 
 </script>

| Автор:
Sentimo,

Появилась!!!))))))))))))))

Но... есть 2 неприятных сбоя.

1) Как опустить появление кнопки понизу курсора (чтобы браузерное не перекрывало кнопку)?

*Поигралась) метод тыка не помог, замена Top на Bottom тоже не помогла, игра со значениями тоже не помогла*

2) Самое ужасное: цитируемый текст не отображается в визуальном режиме... 

Форма ответа по умолчанию стоит в визуальном режиме... и с этим я ничего не могу сделать...

| Автор:
Sentimo,

Можно я вас ещё немножко помучаю.......?

По вызову кликом мышки кнопка очень нестабильно работает(( она часто не снимает предыдущий выделенный но не вставленный текст. 

Помогите её тогда закрепить сбоку-посередине (на манер расположения кнопок вверх/вниз):

<a href="javascript:Insert('$ID$','$USERNAME$',selection);" class="postQuote$ID$">
 <img alt="" style="margin:0;padding:0;border:0;" src="http://elitegamersteam.my1.ru/Ico/comment-rect-icon.png" width="50px" title="Для цитирования включите режим-BB в форме ответа">
</a>
<script>
$(function(){
$('#ucoz-forum-post-$ID$').on('mouseup', function(event){ 
var text = get_selection();
if (text != '') {$('.postQuote$ID$').css({"left":event.pageX-50+"px", "top":event.pageY-20+"px"}).show().click(function(){$(this).hide();});}
});
}); 
 </script>
<style>
 .postQuote$ID$ {
 position:absolute;
 display:none;
 cursor: pointer;
 }
</style>

 Пыталась использовать коды расположения с кнопок вверх/вниз, но кнопка не отображается. Вот исходный код:

<!-- Кнопки Вверх и Вниз --> 
 <div class="go-up" title="Вверх" id="ToTop">☝</div> 
 <div class="go-down" title="Вниз" id="OnBottom">☟</div> 

<script> 
$(function(){ 
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow") 
$(window).scroll(function(){ 
 if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow") 
 else $("#ToTop").fadeIn("slow") 
}); 

if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow") 
$(window).scroll(function(){ 
 if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow") 
 else $("#OnBottom").fadeIn("slow") 
}); 

$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")}) 
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")}) 
}); 
 </script> 

<style>

.go-up, .go-down { 
display: none; 
position: fixed; /*позиционирование*/ 
z-index: 9999; /*поверх все элементов на странице*/ 
right: 20px; /*положение на странице, если слева - left*/ 
background: #2a2b2f; 
border: 1px solid #ccc; 
border-radius: 5px; 
cursor: pointer; 
color: #fff; 
text-align: center; 
font: normal normal 42px/42px sans-serif; 
text-shadow: 0 1px 2px #000; 
opacity: .5; 
padding: 3px; 
margin-bottom: 5px; 
width: 42px; 
height: 42px; 
} 
.go-up { bottom: 140px; } 
.go-down { bottom: 80px; } 
.go-down:hover, 
.go-up:hover { 
opacity: 1; 
box-shadow: 0 5px 0.5em -1px #666; 
}

 <style>

| Автор:

<a href="javascript:Insert('$ID$','$USERNAME$',selection);" onmouseover="get_selection()" class="postQuote$ID$">
 <img alt="" style="margin:0;padding:0;border:0;" src="/.s/img/fr/bt/2/p_quote.gif" title="Цитировать">
</a>
 <script>$(function(){
$('#ucoz-forum-post-$ID$').on('mouseup', function(){
 var text = get_selection();
    if (text != '') {$('.postQuote$ID$').css({"right":"10px", "bottom":"10px","display":"block"}).click(function(){$(this).hide();});}
    $(this).parents().click(function(){$('.postQuote$ID$').hide();});
});
});
 </script>
<style>
 .postQuote$ID$ {
 position:fixed;
 display:none;
 cursor: pointer;
 }
</style>

| Автор:
Sentimo,

Очень хорошо получилось вывести кнопку на фиксированную часть экрана! Но... (прощу прощения, если запутала) мне не нужно, чтобы она появлялась/пряталась, она должна быть фиксированной и постоянной на странице темы.

И что-то ни так с функцией показать/скрыть... При таком коде:

    if (text != '') {$('.postQuote$ID$').css({"right":"10px", "bottom":"10px","display":"block"}).click(function(){$(this).hide();});}
    $(this).parents().click(function(){$('.postQuote$ID$').hide();});

- кнопка НЕ появляется. 

Поэкспериментировала. Поубирала hide - кнопка висит, цитирует текст с нужных постов, но при цитировании - она вставляет  '$ID$','$USERNAME$'  от первого цитируемого поста (на котором она была впервые нажата), т.е. она не сбрасывает и не прихватывает новые, как будто цитируешь с одного и того же поста.

| Автор:
...