Custom input tag?

[Inny]

is it possible to create a tag (javascript) that will output this...

[dohtml]<span class="sidenote" title="Text"></span>[/dohtml]

it should work like this one....

<input type='button' accesskey='p' value=' CODE '    onclick='simpletag("CODE")'    class='codebuttons' name='CODE' onmouseover="hstat('code')" />

can that be done with javascript?

[aniseed]

Yes. document.write() is your hint.

[Inny]

Yes. document.write() is your hint.

O...K......I tried this, with no result. Where did I go wrong? please dont be cryptic, I can be rather dense at times! :D

<script type="text/javascript">
<input type="button" accesskey='$' value=' Sidenote ' onclick='simpletag'document.write('[dohtml]<span class="sidenote" title="Text"></span>[/dohtml]') ; class="codebuttons' name='Sidenote' method="post"/>
</script>

[Inny]

Then I tried....

<input type="button" accesskey='$' value=' Sidenote ' onclick=document.write('[dohtml]<span class="sidenote" title="Text"></span>[/dohtml]'); class="codebuttons' name='Sidenote'>

but that failed too!

[MattEvans]

document.write() is a really horrible method. it's either invoked as a page is parsed (no scope for user interaction), or it dumps text into an arbitrary place in the document, in XHTML it's forbidden for another reason.

A better way to place arbitrary HTML at a defined place in a document is using methods like [HTMLObject].innerHTML.

<div id="test">

</div>

<input type="button" accesskey='$' value=' Sidenote ' onclick="placeHTML()" class="codebuttons' name='Sidenote' method="post"/>

<script type="text/javascript">
function placeHTML(){
  document.getElementById('test').innerHTML = '<span class="sidenote" title="Text"></span>';
}
</script>

There's a good reason why the HTML to write is NOT specified in the input onclick="" attribute; you run out of quoting levels far too easily (you have to enclose the event handler in quotes, and the function parameters in quotes, and the attributes in the HTML in quotes; and you can't place the same quote that surrounds a quoted block within that block without escaping it).

Also, it would make an illegal document in alot of cases because attributes shouldn't contain HTML < or > characters; some HTM: renderers would put the <span> element into the output directly, and assume that the surrounding <input> was malformed. True XHTML parsers would choke on it and show an error message instead of a page. Again, this could be got around by escaping; but that's quite messy.

Think about parameterizing the placeHTML function so that you have enough variety in what it can do, without needing the specify the entire output from onclick="" attributes.

[Inny]

I think I understand that. yur example above worked but I cant place a div with an id inside my textarea. how can get it to output to my text area shown below? Also I was hoping to include the [dohtml] in the tag surrounding span, unless i can make a tag for dohtml and the other dfor span class bla bla.

<textarea  cols='70' rows='8' name='Post' class="textinput"   tabindex="1">

</textarea>

[MattEvans]

For a textarea; try [object].text = "etc" rather than [object].innerHTML = "etc"...

I think that's the correct property; I'll get back to you on that..

[Inny]

like this???

<input type="button" accesskey='$' value=' Sidenote ' onclick="placeHTML()" class="codebuttons' name='Sidenote' method="post"/>
 <script type="text/javascript"> function placeHTML(){ document.getElementById[object].textinput = '[dohtml]<span class="sidenote" title="Text"></span>[/dohtml]'; } </script>

[Inny]

*Bump....Any further help with this please? :D

[MattEvans]

Where I said [object].text it wasn't literally what you should type =P

[object] relates to an arbitrary object refence; in this case, it would be a textarea that is returned from the document.getElementById([String]) function. [String] means a line of characters, in this case, the ID of the element you want to 'get'.

The times where I've put square brackets are just a notation, and probably not a formal notation either. For the benefit of explaining myself, they mean 'replace this with some object of the type within the brackets'.

if you wan't to 'capture' an object reference, you can do it like this:

var myText = document.getElementById('test');

You can then use member methods and properties of that (myText) type of object.

For a textarea; the text inside is stored in the 'value' property (not the 'text' property as I said previously). So, to add to the text inside a textarea, you could do:

var myText = document.getElementById('test');
myText.value = myText.value + "hello";

Running that code will add 'hello' to the text in the textarea with id 'test'. That should be easy enough to adapt for adding any string to any textarea.

The problem you may encounter, if you're trying to do what I think you are, is that the value of the textarea will always be shown as plain text (i.e. HTML tags will be displayed literally with angle brackets et al). If you actually want to show live editable HTML; there's some weird MSIE/Firefox only methods; but there is no 'standard' way..

Hm... it shouldn't be toooo hard to make a way.. Perhaps I'll give it a try next week =P

[Inny]

Please do try Mate, Im just too darn stupid to figure it out, I barely understood any of what you just said!

[Inny]

Calling MattEvans, Please assist?

G'day mate, I played around with your suggestions on the date you posted, but got nowhere. I havent been able to use a pc since because I had a heartattack and have just returned from Hospital. If you can spare some time, Id greatly appreciate your skill with the code. Thanks, Dan

[MattEvans]

What exactly is that you're trying to do? If you give more complete details of your ultimate requirements; it will be easier to work out what needs to be done.. Be as detailed as possible.

[Inny]

OK, im using the following js

/*

Unobtrusive Sidenotes v1.3.5 (Hosted)
(c) Arc90, Inc.

http://www.arc90.com
http://lab.arc90.com

Licensed under : Creative Commons Attribution 2.5 http://creativecommons.org/licenses/by/2.5/

*/

/* Globals */
var arc90_isIE = document.all? true: false;
var arc90_sideCLRs = 4; // total colours declared in the CSS for sidenote usage

/* Pre-Load */
function arc90_preload() {
	var head = document.getElementsByTagName('HEAD');

	// add the css
	var l = arc90_newNode('link');
	try {
		l.rel = "stylesheet";
		l.type="text/css";
		l.href="http://lab.arc90.com/tools/c/css/arc90hosted_sidenote.css";
		// fully create the link then attach to the HEAD
		head[0].appendChild(l);
	} catch(e) {
		l = null;
	}
}
arc90_preload();

/* Main */
function arc90_sidenote() {
	/* Blogger Fix: removes the crappy empty 'clear: both' div */
	D = document.getElementsByTagName('DIV');
	for (var j = 0, k = D.length, c = 0; j < k; j++) {
		var d = D[j];
		if (d.innerHTML == '' && d.style.clear == 'both') 
			d.style.clear = 'none';
	}
	
	O = document.getElementsByTagName('SPAN');
	for (var i = 0, l = O.length, c = 0; i < l; i++) {
		var o = O[i];
		if (o != null && o.className && o.className.indexOf('sidenote') >= 0) {
			try {
				var s = arc90_newNode('div', '', 'arc90_sidenoteTXT arc90_sidenoteCLR' +c);
				var a = arc90_newNode('div', '', 'arc90_inline');
				a.innerHTML = arc90_gtlt(o.title);
				s.appendChild(a);
				o.parentNode.parentNode.insertBefore(s, o.parentNode);

				o.className = 'arc90_sidenoteLNK arc90_sidenoteCLR' +c;
				c = c + 1 < arc90_sideCLRs? c+1: 0;
			} catch (err) {
				o = null;
			}
		}
	}
}

function arc90_gtlt(s) {
	s = s.replace(/&gt;/g, '>');
	s = s.replace(/&lt;/g, '<');
	return s;
}

/* Events */
function arc90_isString(o) { return (typeof(o) == "string"); }

function arc90_addEvent(e, meth, func, cap) {
	if (arc90_isString(e))	e = document.getElementById(e);

	if (e.addEventListener){
		e.addEventListener(meth, func, cap);
    	return true;
	}	else if (e.attachEvent)
		return e.attachEvent("on"+ meth, func);
	return false;
}
/* Nodes */
function arc90_newNode(t, i, s, x, c) {
	var node = document.createElement(t);
	if (x != null && x != '') {
		var n = document.createTextNode(x);
		node.appendChild(n);
	}
	if (i != null && i != '')
		node.id = i;
	if (s != null && s != '')
		node.className = s;
	if (c != null && c != '')
		node.appendChild(c);
	return node;
}

/* Add Events */
arc90_addEvent(window, 'load', arc90_sidenote);

There is some css but thats not important here. This code creates a small box inside posts to the left of a paragraph, its like footnotes but quicker

the js above goes in the page head. At present a user is required to type the following in a post to acheive the effect...

[dohtml]<span class="sidenote" title="Text here is the actual sidenote"></span>[/dohtml]

what I want to do ,is to create a single 'sidenote' button, that will output (in the post) the following

[dohtml]<span class="sidenote" title="Text"></span>[/dohtml]

and the user will replace 'Text' with his/her sidenote.

example seen here

http://herproom.5.forumer.com/index.php?showtopic=2481&st=0&#entry6913

[MattEvans]

<script type="text/javascript">
function addSidenote(){
  var myTextArea = document.getElementById("commentBox");
  myTextArea.value = myTextArea.value + '[dohtml]<span class="sidenote" title="Text"></span>[/dohtml]';
}
</script>

<textarea id="commentBox"/>

<input type="button" onclick="addSidenote();" value="Add a Sidenote"/>

That code will create a new textarea for the benefit of demonstration. You'll want to link it to your existing textarea. Looking at the source of the page in your link; this is your textarea:

<TD><b>Quick Comment:</b></TD></tr><tr><TD><textarea cols="40"rows="5" scrollbars="yes" name="field1" 
value="" ></textarea></TD>

You'll want to add an id attribute to that text area; something like this:

<TD><b>Quick Comment:</b></TD></tr><tr><TD><textarea cols="40"rows="5" scrollbars="yes" name="field1" 
value="" [B]id="commentBox"[/B] ></textarea></TD>

Now if you remove the textarea from my example; and put the code on your page somewhere, the code will relate to your comment box; and should work ok.

[Inny]

Works Brilliantly, Thankyou so Much Matt! your kind efforts are very much appreciated! :D