Следите за новостями любимого конструктора сайтов uCoz в социальных сетях!
Как сделать кнопку [Цитата] всплывающей при выделении текста?
Типа:
Вот код для моей кнопки:
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 :
В шаблон "вид материалов" модуля форум в самый низ ставим....
<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>
Поставила и в Вид материалов:
<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$)?> <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$)?> <a class="reputationDo" title="Изменить репутацию" href="$DO_REP_URL$"><span style="font-size:10pt"><b>±</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$)?> <a title="Изменить уровень замечаний" class="banDo" href="$DO_BAN_URL$">±</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?> <?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 поставила:
Кнопка не появляется...
Ох, всё отображается...
Как так?! А у меня нет:
Скрин с вашего сайта, попробуйте так...
<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>
Подмените только скрипт на этот, остальное не трогайте...
<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>
Появилась!!!))))))))))))))
Но... есть 2 неприятных сбоя.
1) Как опустить появление кнопки понизу курсора (чтобы браузерное не перекрывало кнопку)?
*Поигралась) метод тыка не помог, замена Top на Bottom тоже не помогла, игра со значениями тоже не помогла*
2) Самое ужасное: цитируемый текст не отображается в визуальном режиме...
Форма ответа по умолчанию стоит в визуальном режиме... и с этим я ничего не могу сделать...
Можно я вас ещё немножко помучаю.......?
По вызову кликом мышки кнопка очень нестабильно работает(( она часто не снимает предыдущий выделенный но не вставленный текст.
Помогите её тогда закрепить сбоку-посередине (на манер расположения кнопок вверх/вниз):
Пыталась использовать коды расположения с кнопок вверх/вниз, но кнопка не отображается. Вот исходный код:
<!-- Кнопки Вверх и Вниз --> <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>
<!-- Кнопки Вверх и Вниз --> <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; }
<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>
Очень хорошо получилось вывести кнопку на фиксированную часть экрана! Но... (прощу прощения, если запутала) мне не нужно, чтобы она появлялась/пряталась, она должна быть фиксированной и постоянной на странице темы.
И что-то ни так с функцией показать/скрыть... При таком коде:
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$' от первого цитируемого поста (на котором она была впервые нажата), т.е. она не сбрасывает и не прихватывает новые, как будто цитируешь с одного и того же поста.