Adding code selection button to postbit?

[Simon Lloyd]

Hi all, i am trying to add a button to the postbit template where a user can highlight all the code in a code textbox with one click, i am trying to use this: <input type="button" value="Highlight Text" onClick="javascript:this.form.text_area.focus();this.form.t ext_area.select();"> which came from this<form name="select_all">

<textarea name="text_area" rows="10" cols="80">
MY TEXT TO HIGHLIGHT</textarea>

<br />
<input type="button" value="Highlight Text" onClick="javascript:this.form.text_area.focus();this.form.t ext_area.select();">

</form> How would i change the <input line to focus the code box?

[kh99]

That's a hard one without knowing exactly what's going on. You need to be able to find the JS object, so you either need to understand the DOM structure that results from your HTML or else give the thing you want to find a unique name or id. In the example you gave, the object is found because it's a member of the same form with a specific name.

Are you adding one button that selects the first code area, or a button attached to each code area?

[Simon Lloyd]

Good question!, i didn't think about multiple code boxes, it would have to be per code area.

[kh99]

Well that would make it easier to modify the JS but probably harder to add the buttons. I'd work out all the HTML you want, then figure out the JS to get to the object. I use the Google Chrome browser's "Inspect Element" (right click) function to look at the structure.

[Simon Lloyd]

kh99, i'm not with you?, i assumed that the example i gave would be all i needed, i found it on the net, In IE my users can Ctrl+ left click to the left of a code box which will select all the code but this doesn't work in FF due to the security restrictions the browser has in place to prevent access to the clipboard, so i thought it would be cool if all users just saw a button to highlight the text in the code box. (the example i i gave works cross browser)

[kh99]

heh heh..well as you know, I'm probably the one who doesn't follow. I guess I was saying, if you want to add a button for each code area, how are you going to do that? Or I guess you're asking? I don't know, that's harder than adding one button in the post. I guess you could modify the bbcode definition to include a button.

The other thing I was saying, to modify the JS you posted you'd have to first know what HTML you are working with (which means working out the previous question).

Sorry, I'm not actually a JS expert, maybe I should let someone else take on this one. :)

[Simon Lloyd]

Lol, yes i am asking, the bbcode definition, is that in my server files, if it is i would have a hack at adding the <input there. looking at the source code for a particular post that has a code box i see that my code is held between <pre tags like this<!-- message -->
<div id="post_message_649524">

<br /><br />
<!-- google_ad_section_start -->Try this, it's ThisWorkbook event code:<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px"><acronym title="Visual Basic for Applications">VBA</acronym> CODE:</div>
<pre class="alt2" dir="ltr" style="
margin: 0px;
padding: 6px;
border: 1px inset;
width: 800px;
height: 178px;
text-align: left;
overflow: auto"><font color="blue">Option Explicit</font>
<font color="blue">Private</font> <font color="blue">Sub</font> Workbook_Deactivate()
UserForm1.Hide
<font color="blue">End Sub</font>

<font color="blue">Private</font> <font color="blue">Sub</font> Workbook_WindowActivate(<font color="blue">ByVal</font> Wn <font color="blue">As</font> Window)
UserForm1.Show vbModeless
Range("A1").Select
AppActivate Application.Caption
<font color="blue">End Sub</font> </pre>
</div>

[kh99]

Well when I mentioned changing the bbcode I was thinking of that editor in the ACP, but I forgot that you can't change the built in ones that way. Maybe someone else knows how to do that?

[Simon Lloyd]

Hi i found that the code is parsed by the bbcode template bbcode_code, so i wrapped the <pre tags with FORM, it adds the button underneath every code area but does not highlight it when clicked?<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px">$vbphrase[code]:</div>
<form><pre name="codearea" class="alt2" dir="ltr" style="
margin: 0px;
padding: $stylevar[cellpadding]px;
border: 1px inset;
width: $stylevar[codeblockwidth];
height: {$blockheight}px;
text-align: left;
overflow: auto">$code</pre><input type="button" value="Highlight Code" onClick="javascript:this.form.codearea.focus();this.form.co dearea.select();">
</form>
</div>
Any ideas?

[kh99]

I think it doesn't work because the "select()" function is only a member of the object if it's an <input type="text"> or <textarea>. I did a little searching and I wasn't able to figure out how to select other text, but I did find this page: http://dynamic-tools.net/toolbox/copyToClipboard/ which shows how to copy to the clipboard by pressing a button.

So you can either try that, or else try making it a textarea.

[Simon Lloyd]

thanks for taking a look, it seems you have to go to some lengths to make this work in Firefox, i have it wotking in IE (not the example you linked to) but my whole reason for this was to please my firefox users.

I'll keep searching and post back.

[kh99]

I found this page: https://developer.mozilla.org/en/DOM/Selection which is the DOM referenece for FF (I think), and I made this example which works in FF:

<script type="text/javascript">
function FFSelect(node)
{
r = document.createRange();
r.selectNodeContents(node);
window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
}
</script>
<div style="margin:20px; margin-top:5px">
<div class="smallfont" style="margin-bottom:2px">Code:</div>
<pre name="codearea" class="alt2" dir="ltr" style="
margin: 0px;
padding: 0;
border: 1px inset;
width: 900;
height: 400px;
text-align: left;
overflow: auto">This is some code to select</pre><input type="button" value="Highlight Code" onClick="javascript:this.parentNode.children[1].focus();FFSelect(this.parentNode.children[1]);">
</div>


Of course it won't work in IE, so I think what you really need is one Select function that tests for which functions exists and does the appropriate thing. Sorry I don't have time to work it all out just now.

[Simon Lloyd]

I found the solution thanks, the script in this instance had to be included with the bbcode....all sorted now, thanks for all your help!

[Marco van Herwaarden]

A thread (post) is already a form when viewed by a staff member, and as far as i know you can not nest forms.