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.text_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.text_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.codearea.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.