Lordeagle
Graham Nice one, I hope that helps.
Graham
Lordeagle I have fixed the focus issue by adding
document.forms['post'].elements['__xtblog_msg'].focus();
at the end of both functions
I will test with the location.hash but it can cause undesired effects on larger screens (xt chat function has this issue)
Various mobile browsers have one issue or another with this script
in my opera emulator the 'wrap selection' part does not work due to operas text editor
function tag(text1, text2) {
if ((document.selection)) {
document.post.__xtblog_msg.focus();
document.post.document.selection.createRange().text = text1+document.post.document.selection.createRange().text+text2;
}
else if(document.forms['post'].elements['__xtblog_msg'].selectionStart!=undefined) {
var element = document.forms['post'].elements['__xtblog_msg'];
var str = element.value;
var start = element.selectionStart;
var length = element.selectionEnd - element.selectionStart;
element.value = str.substr(0, start) + text1 + str.substr(start, length) + text2 + str.substr(start + length);
}
else {
document.post.__xtblog_msg.value += text1+text2;
}
document.forms['post'].elements['__xtblog_msg'].focus(); }
function show_sml(elem) {
obj = document.getElementById(elem);
if( obj.style.display == "none" ) {
obj.style.display = "block";
}
else {
obj.style.display = "none";
}
document.forms['post'].elements['__xtblog_msg'].focus(); }
Copy code
Lordeagle
When I first read this thread I was too busy to participate, infact I could not even relax to read the code. After going through it last night I felt like contributing, though it's such a wonderful job credits to the author. While trying the code I found out that once you select any of the text formating or any the similes and the tag function executes the input field loses focus, which means that the user has to scroll down and click the text area again in other to continue typing. I don't know if someone else noticed this cus I tested it from mobile using firefox(android). I think adding location.hash and target.focus will make more sense...just thinking o.
Graham
Ekonime We both missed one
for some reason it is also missing from my old list
<a href="javascript:tag(' :)',' ')"><img src="http://xtgem.com/images/smilies/smile_mini2.gif" alt=":)" /></a>
Copy code 
Ekonime
found error with smileys code
replace old code with this:
<a href="javascript:tag(':(','')"><img src="http://xtgem.com/images/smilies/sad_mini.gif" alt=":(" /></a>
<a href="javascript:tag(':DD','')"><img src="http://xtgem.com/images/smilies/laugh_mini2.gif" alt=":DD" /></a>
<a href="javascript:tag(':D','')"><img src="http://xtgem.com/images/smilies/biggrin_mini2.gif" alt=":D" /></a>
<a href="javascript:tag(':o','')"><img src="http://xtgem.com/images/smilies/chok_mini.gif" alt=":o" /></a>
<a href="javascript:tag('0_0','')"><img src="http://xtgem.com/images/smilies/scratch_one-s_head_mini.gif" alt="0_0" /></a>
<a href="javascript:tag(':P','')"><img src="http://xtgem.com/images/smilies/blum_mini.gif" alt=":P" /></a>
<a href="javascript:tag('B)','')"><img src="http://xtgem.com/images/smilies/dirol_mini.gif" alt="B)" /></a>
<a href="javascript:tag('>:(','')"><img src="http://xtgem.com/images/smilies/mad_mini.gif" alt=">:(" /></a>
<a href="javascript:tag('o_O','')"><img src="http://xtgem.com/images/smilies/fool_mini2.gif" alt="o_O" /></a>
<a href="javascript:tag('>_>','')"><img src="http://xtgem.com/images/smilies/unsure_mini.gif" alt=">_>" /></a>
<a href="javascript:tag('-_-','')"><img src="http://xtgem.com/images/smilies/nea_mini.gif" alt="-_-" /></a>
<a href="javascript:tag(':-(','')"><img src="http://xtgem.com/images/smilies/sad_mini2.gif" alt=":-(" /></a>
<a href="javascript:tag(':-)','')"><img src="http://xtgem.com/images/smilies/happy_mini.gif" alt=":-)" /></a>
<a href="javascript:tag('^^','')"><img src="http://xtgem.com/images/smilies/smile_mini.gif" alt="^^" /></a>
<a href="javascript:tag(';)','')"><img src="http://xtgem.com/images/smilies/wink_mini.gif" alt=";)" /></a>
<a href="javascript:tag('0:-)','')"><img src="http://xtgem.com/images/smilies/angel_mini.gif" alt="O:-)" /></a>
<a href="javascript:tag(':p','')"><img src="http://xtgem.com/images/smilies/beee_mini.gif" alt=":p" /></a>
<a href="javascript:tag(';-D','')"><img src="http://xtgem.com/images/smilies/biggrin_mini.gif" alt=";-D" /></a>
<a href="javascript:tag(':*(','')"><img src="http://xtgem.com/images/smilies/cray_mini.gif" alt=":*(" /></a>
<a href="javascript:tag(']:->','')"><img src="http://xtgem.com/images/smilies/diablo_mini.gif" alt="]:->" /></a>
<a href="javascript:tag('(y)','')"><img src="http://xtgem.com/images/smilies/good_mini.gif" alt="(y)" /></a>
<a href="javascript:tag('<3','')"><img src="http://xtgem.com/images/smilies/heart_mini.gif" alt="<3" /></a>
<a href="javascript:tag(':*','')"><img src="http://xtgem.com/images/smilies/kiss_mini.gif" alt=":*" /></a>
<a href="javascript:tag(':-))','')"><img src="http://xtgem.com/images/smilies/laugh_mini.gif" alt=":-))" /></a>
<a href="javascript:tag('[:)','')"><img src="http://xtgem.com/images/smilies/music_mini.gif" alt="[:)" /></a>
<a href="javascript:tag('[:-)','')"><img src="http://xtgem.com/images/smilies/music_mini2.gif" alt="[:-)" /></a>
<a href="javascript:tag(':-0','')"><img src="http://xtgem.com/images/smilies/shout_mini.gif" alt=":-O" /></a>
<a href="javascript:tag('?-|','')"><img src="http://xtgem.com/images/smilies/vava_mini.gif" alt="?-|" /></a>
<a href="javascript:tag(':aggressive:','')"><img src="http://xtgem.com/images/smilies/aggressive_mini.gif"
alt=":aggressive:" /></a>
<a href="javascript:tag(':bomb:','')"><img src="http://xtgem.com/images/smilies/bomb_mini.gif" alt=":bomb:" /></a>
<a href="javascript:tag(':bye:','')"><img src="http://xtgem.com/images/smilies/bye_mini.gif" alt=":bye:" /></a>
<a href="javascript:tag(':celebrate:','')"><img src="http://xtgem.com/images/smilies/drink_mini.gif" alt=":celebrate:" /></a>
<a href="javascript:tag(':clap:','')"><img src="http://xtgem.com/images/smilies/clapping_mini.gif" alt=":clap:" /></a>
<a href="javascript:tag(':confused:','')"><img src="http://xtgem.com/images/smilies/unknw_mini.gif" alt=":confused:" /></a>
<a href="javascript:tag(':crazy:','')"><img src="http://xtgem.com/images/smilies/crazy_mini.gif" alt=":crazy:" /></a>
<a href="javascript:tag(':dance:','')"><img src="http://xtgem.com/images/smilies/dance_mini.gif" alt=":dance:" /></a>
<a href="javascript:tag(':drink:','')"><img src="http://xtgem.com/images/smilies/drink2_mini.gif" alt=":drink:" /></a>
<a href="javascript:tag(':fool:','')"><img src="http://xtgem.com/images/smilies/fool_mini.gif" alt=":fool:" /></a>
<a href="javascript:tag(':inlove:','')"><img src="http://xtgem.com/images/smilies/man_in_love_mini.gif" alt=":inlove:" /></a>
<a href="javascript:tag(':LOL:','')"><img src="http://xtgem.com/images/smilies/lol_mini.gif" alt=":LOL:" /></a>
<a href="javascript:tag(':lol:','')"><img src="http://xtgem.com/images/smilies/lol_mini2.gif" alt=":lol:" /></a>
<a href="javascript:tag(':mamba:','')"><img src="http://xtgem.com/images/smilies/mamba_mini.gif" alt=":mamba:" /></a>
<a href="javascript:tag(':mock:','')"><img src="http://xtgem.com/images/smilies/mocking_mini.gif" alt=":mock:" /></a>
<a href="javascript:tag(':pardon:','')"><img src="http://xtgem.com/images/smilies/pardon_mini.gif" alt=":pardon:" /></a>
<a href="javascript:tag(':rofl:','')"><img src="http://xtgem.com/images/smilies/rofl_mini.gif" alt=":rofl:" /></a>
<a href="javascript:tag(':roleyes:','')"><img src="http://xtgem.com/images/smilies/rolleyes_mini.gif" alt=":rolleyes:" /></a>
<a href="javascript:tag(':rose:','')"><img src="http://xtgem.com/images/smilies/rose_mini.gif" alt=":rose:" /></a>
<a href="javascript:tag(':secret:','')"><img src="http://xtgem.com/images/smilies/secret_mini.gif" alt=":secret:" /></a>
<a href="javascript:tag(':shy:','')"><img src="http://xtgem.com/images/smilies/blush_mini.gif" alt=":shy:" /></a>
<a href="javascript:tag(':sick:','')"><img src="http://xtgem.com/images/smilies/bo_mini.gif" alt=":sick:" /></a>
<a href="javascript:tag(':sorry:','')"><img src="http://xtgem.com/images/smilies/sorry_mini.gif" alt=":sorry:" /></a>
<a href="javascript:tag(':wack:','')"><img src="http://xtgem.com/images/smilies/wacko_mini2.gif" alt=":wack:" /></a>
<a href="javascript:tag(':wacko:','')"><img src="http://xtgem.com/images/smilies/wacko_mini.gif" alt=":wacko:" /></a>
<a href="javascript:tag(':yay:','')"><img src="http://xtgem.com/images/smilies/yahoo_mini.gif" alt=":yay:" /></a>
Copy code
Ekonime
Graham dont forget to add in other ex in guestbook
<textarea class="inp-textarea"
id="xtblog_comment_msg"
name="__xtcomments_msg"
Copy code
this is
__xtcomments_msg calling to guestbook
function tag(text1, text2) {
if ((document.selection)) {
document.post.[b]__xtcomments_msg[/b].focus();
document.post.document.selection.createRange().text = text1+document.post.document.selection.createRange().text+text2;
} else if(document.forms['post'].elements['[b]__xtcomments_msg[/b]'].selectionStart!=undefined) {
var element = document.forms['post'].elements['[b]__xtcomments_msg[/b]'];
var str = element.value;
var start = element.selectionStart;
var length = element.selectionEnd - element.selectionStart;
element.value = str.substr(0, start) + text1 + str.substr(start, length) + text2 + str.substr(start + length);
} else {
document.post.__xtcomments_msg.value += text1+text2;
}
}
Copy code
Ekonime
in opera mini fine. but after I use the browser supports html5 result is
undefined 
Ekonime
fix my site.. check if any problem
Graham
Ekonime This is how to fix this script for blogs that are output by xtscript
I may make some further adaptions see my demo at
http://baretest.xtgem.com/Blog
1/ Do not add the javascript functions or the style tag to the twig file add them outside of the xtscript on the blog page itself
<style>.sml{color:white;padding:2px;} .sml:hover{border:1px solid #d7edfc}</style>
<script>
function tag(text1, text2) {
if ((document.selection)) {
document.post.__xtblog_msg.focus();
document.post.document.selection.createRange().text = text1+document.post.document.selection.createRange().text+text2;
}
else if(document.forms['post'].elements['__xtblog_msg'].selectionStart!=undefined) {
var element = document.forms['post'].elements['__xtblog_msg'];
var str = element.value;
var start = element.selectionStart;
var length = element.selectionEnd - element.selectionStart;
element.value = str.substr(0, start) + text1 + str.substr(start, length) + text2 + str.substr(start + length);
}
else {
document.post.__xtblog_msg.value += text1+text2;
}
}
function show_sml(elem) {
obj = document.getElementById(elem);
if( obj.style.display == "none" ) {
obj.style.display = "block";
}
else {
obj.style.display = "none";
}
}
</script>
Copy code 2/ You only need to set the name attribute in the main comment form
the other is just where you set a community name
<form action="{{ data.comments_form.url }}" method="post" id="comment_form" name="post">
Copy code 3/ The rest of the script (all the links) goes in the twig just below
{{ data.translations.t_comment }}
I have converted the characters that were causing issues with xtscript into html entities
I have also fixed the bb tag links so that if you highlight some text in the textarea and then click the tag the highlighted text is wrapped in the bb tag
<div>
<a href="javascript:tag('[b]','[\/b\]')"><img border="0" src="/images/bb/bold.gif" alt="Bold" title="Bold"/></a>
<a href="javascript:tag('[i]','[\/i\]')"><img border="0" src="/images/bb/italics.gif" alt="Italic" title="Italic"/></a>
<a href="javascript:tag('[u]','[\/u\]')"><img border="0" src="/images/bb/underline.gif" alt="Underline" title="Underline"/></a>
<a href="javascript:tag('[url=...]','[\/url\]')"><img border="0" src="/images/bb/link.gif" alt="Link" title="Link" /></a>
<a href="javascript:tag('[code]','[\/code\]')"><img border="0" src="/images/bb/php.gif" alt="PHP" title="Code" /></a>
<a href="javascript:tag('[img]','[\/img\]')"><img border="0" src="/images/bb/img.png" alt="Images" title="Images" /></a>
<a href="javascript:tag('[color=#...]','[\/color\]')"><img src="/images/bb/color.gif"title="Text Color" border="0"/></a>
<a href="javascript:show_sml('sml');"><img src="/images/bb/smile.png" alt="smiley" style="margin-bottom:-2px;" /></a>
<table id="sml" style="display:none"><tr><td>
<a href="javascript:tag(':(','')"><img src="http://xtgem.com/images/smilies/sad_mini.gif" alt=":(" /></a>
<a href="javascript:tag(':DD','')"><img src="http://xtgem.com/images/smilies/laugh_mini2.gif" alt=":DD" /></a>
<a href="javascript:tag(':D','')"><img src="http://xtgem.com/images/smilies/biggrin_mini2.gif" alt=":D" /></a>
<a href="javascript:tag(':o','')"><img src="http://xtgem.com/images/smilies/chok_mini.gif" alt=":o" /></a>
<a href="javascript:tag('0_0','')"><img src="http://xtgem.com/images/smilies/scratch_one-s_head_mini.gif" alt="0_0" /></a>
<a href="javascript:tag(':P','')"><img src="http://xtgem.com/images/smilies/blum_mini.gif" alt=":P" /></a>
<a href="javascript:tag('B)','')"><img src="http://xtgem.com/images/smilies/dirol_mini.gif" alt="B)" /></a>
<a href="javascript:tag('>:(','')"><img src="http://xtgem.com/images/smilies/mad_mini.gif" alt=">:(" /></a>
<a href="javascript:tag('o_O','')"><img src="http://xtgem.com/images/smilies/fool_mini2.gif" alt="o_O" /></a>
<a href="javascript:tag('>_>','')"><img src="http://xtgem.com/images/smilies/unsure_mini.gif" alt=">_>" /></a>
<a href="javascript:tag('-_-','')"><img src="http://xtgem.com/images/smilies/nea_mini.gif" alt="-_-" /></a>
<a href="javascript:tag(':-(','')"><img src="http://xtgem.com/images/smilies/sad_mini2.gif" alt=":-(" /></a>
<a href="javascript:tag(':-)','')"><img src="http://xtgem.com/images/smilies/happy_mini.gif" alt=":-)" /></a>
<a href="javascript:tag('^^','')"><img src="http://xtgem.com/images/smilies/smile_mini.gif" alt="^^" /></a>
<a href="javascript:tag(';)','')"><img src="http://xtgem.com/images/smilies/wink_mini.gif" alt=";)" /></a>
<a href="javascript:tag('O:-)','')"><img src="http://xtgem.com/images/smilies/angel_mini.gif" alt="O:-)" /></a>
<a href="javascript:tag(':p','')"><img src="http://xtgem.com/images/smilies/beee_mini.gif" alt=":p" /></a>
<a href="javascript:tag(';-D','')"><img src="http://xtgem.com/images/smilies/biggrin_mini.gif" alt=";-D" /></a>
<a href="javascript:tag(':*(','')"><img src="http://xtgem.com/images/smilies/cray_mini.gif" alt=":*(" /></a>
<a href="javascript:tag(']:->','')"><img src="http://xtgem.com/images/smilies/diablo_mini.gif" alt="]:->" /></a>
<a href="javascript:tag('(y)','')"><img src="http://xtgem.com/images/smilies/good_mini.gif" alt="(y)" /></a>
<a href="javascript:tag('<3','')"><img src="http://xtgem.com/images/smilies/heart_mini.gif" alt="<3" /></a>
<a href="javascript:tag(':*','')"><img src="http://xtgem.com/images/smilies/kiss_mini.gif" alt=":*" /></a>
<a href="javascript:tag(':-))','')"><img src="http://xtgem.com/images/smilies/laugh_mini.gif" alt=":-))" /></a>
<a href="javascript:tag('[:)','')"><img src="http://xtgem.com/images/smilies/music_mini.gif" alt="[:)" /></a>
<a href="javascript:tag('[:-)','')"><img src="http://xtgem.com/images/smilies/music_mini2.gif" alt="[:-)" /></a>
<a href="javascript:tag(':-O','')"><img src="http://xtgem.com/images/smilies/shout_mini.gif" alt=":-O" /></a>
<a href="javascript:tag('?-|','')"><img src="http://xtgem.com/images/smilies/vava_mini.gif" alt="?-|" /></a>
<a href="javascript:tag(':aggressive:','')"><img src="http://xtgem.com/images/smilies/aggressive_mini.gif"
alt=":aggressive:" /></a>
<a href="javascript:tag(':bomb:','')"><img src="http://xtgem.com/images/smilies/bomb_mini.gif" alt=":bomb:" /></a>
<a href="javascript:tag(':bye:','')"><img src="http://xtgem.com/images/smilies/bye_mini.gif" alt=":bye:" /></a>
<a href="javascript:tag(':celebrate:','')"><img src="http://xtgem.com/images/smilies/drink_mini.gif" alt=":celebrate:" /></a>
<a href="javascript:tag(':clap:','')"><img src="http://xtgem.com/images/smilies/clapping_mini.gif" alt=":clap:" /></a>
<a href="javascript:tag(':confused:','')"><img src="http://xtgem.com/images/smilies/unknw_mini.gif" alt=":confused:" /></a>
<a href="javascript:tag(':crazy:','')"><img src="http://xtgem.com/images/smilies/crazy_mini.gif" alt=":crazy:" /></a>
<a href="javascript:tag(':dance:','')"><img src="http://xtgem.com/images/smilies/dance_mini.gif" alt=":dance:" /></a>
<a href="javascript:tag(':drink:','')"><img src="http://xtgem.com/images/smilies/drink2_mini.gif" alt=":drink:" /></a>
<a href="javascript:tag(':fool:','')"><img src="http://xtgem.com/images/smilies/fool_mini.gif" alt=":fool:" /></a>
<a href="javascript:tag(':inlove:','')"><img src="http://xtgem.com/images/smilies/man_in_love_mini.gif" alt=":inlove:" /></a>
<a href="javascript:tag(':LOL:','')"><img src="http://xtgem.com/images/smilies/lol_mini.gif" alt=":LOL:" /></a>
<a href="javascript:tag(':lol:','')"><img src="http://xtgem.com/images/smilies/lol_mini2.gif" alt=":lol:" /></a>
<a href="javascript:tag(':mamba:','')"><img src="http://xtgem.com/images/smilies/mamba_mini.gif" alt=":mamba:" /></a>
<a href="javascript:tag(':mock:','')"><img src="http://xtgem.com/images/smilies/mocking_mini.gif" alt=":mock:" /></a>
<a href="javascript:tag(':pardon:','')"><img src="http://xtgem.com/images/smilies/pardon_mini.gif" alt=":pardon:" /></a>
<a href="javascript:tag(':rofl:','')"><img src="http://xtgem.com/images/smilies/rofl_mini.gif" alt=":rofl:" /></a>
<a href="javascript:tag(':roleyes:','')"><img src="http://xtgem.com/images/smilies/rolleyes_mini.gif" alt=":rolleyes:" /></a>
<a href="javascript:tag(':rose:','')"><img src="http://xtgem.com/images/smilies/rose_mini.gif" alt=":rose:" /></a>
<a href="javascript:tag(':secret:','')"><img src="http://xtgem.com/images/smilies/secret_mini.gif" alt=":secret:" /></a>
<a href="javascript:tag(':shy:','')"><img src="http://xtgem.com/images/smilies/blush_mini.gif" alt=":shy:" /></a>
<a href="javascript:tag(':sick:','')"><img src="http://xtgem.com/images/smilies/bo_mini.gif" alt=":sick:" /></a>
<a href="javascript:tag(':sorry:','')"><img src="http://xtgem.com/images/smilies/sorry_mini.gif" alt=":sorry:" /></a>
<a href="javascript:tag(':wack:','')"><img src="http://xtgem.com/images/smilies/wacko_mini2.gif" alt=":wack:" /></a>
<a href="javascript:tag(':wacko:','')"><img src="http://xtgem.com/images/smilies/wacko_mini.gif" alt=":wacko:" /></a>
<a href="javascript:tag(':yay:','')"><img src="http://xtgem.com/images/smilies/yahoo_mini.gif" alt=":yay:" /></a>
</td></tr></table>
</div>
Copy code
