Question

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

Типа:

 

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

<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>

 

Answer 1

На каком сайте вы видели такую кнопку?

Comments

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$'  от первого цитируемого поста (на котором она была впервые нажата), т.е. она не сбрасывает и не прихватывает новые, как будто цитируешь с одного и того же поста.