...

View Full Version : selecting colour of text



runnerjp
10-17-2008, 09:40 AM
im setting up some bbcode for my forum and i have run into a problem...




function setColor(color) {
var textbox = document.getElementById('inputforum');
textbox.value = "";
}

<select id="color" onchange="setColor(this.value);">
<option value="" selected="selected">Change Color</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="purple">Purple</option>
<option value="blue">Blue</option>
<option value="beige">Beige</option>
<option value="brown">Brown</option>
<option value="teal">Teal</option>
<option value="navy">Navy</option>
<option value="maroon">Maroon</option>
<option value="limeGreen">Lime Green</option>
<option value="white">White</option>
</select>

you see it works by adding the value in my text box but...

1. you can only select one colour
2. if you write some text then add the colour it deletes all the text??

any way around this

Kor
10-17-2008, 10:56 AM
Your approach is wrong. You should have handle the CSS on-the-fly attributes of the textbox, not to insert pseudo tags in it:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">
</script>
</head>
<body>
<form>
<select id="color" onchange="myforum.style.color=this.value">
<option value="" selected="selected">Change Color</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="purple">Purple</option>
<option value="blue">Blue</option>
<option value="beige">Beige</option>
<option value="brown">Brown</option>
<option value="teal">Teal</option>
<option value="navy">Navy</option>
<option value="maroon">Maroon</option>
<option value="limeGreen">Lime Green</option>
<option value="white">White</option>
</select>
<br>
<br>
<input type="text" id="myforum">
</form>
</body>
</html>

rnd me
10-17-2008, 02:56 PM
Your approach is wrong. You should have handle the CSS on-the-fly attributes of the textbox, not to insert pseudo tags in it:


this is the bbc composer thing, like the reply box. styling it wouldn't do much.

OP:
you can throw it at the end like this:
textbox.value+= ...

that will at least preserve your existing text.

but that's still not very good imho. it would be much more useful it would wrap that bbcode around a selection, or insert at the cursor otherwise.

i would suggest poking around the quick reply box below to see how "the big boys" do it. you've been asking for example when there was one on the page the whole time...

cheers.

runnerjp
10-17-2008, 06:26 PM
yes thats the effect im trying to go for but i cant seem to get it to work with my code


function setColor(color) {
var textbox = document.getElementById('inputforum');
textbox.value = "";
}

<select id="color" onchange="setColor(this.value);">
<option value="" selected="selected">Change Color</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="purple">Purple</option>
<option value="blue">Blue</option>
<option value="beige">Beige</option>
<option value="brown">Brown</option>
<option value="teal">Teal</option>
<option value="navy">Navy</option>
<option value="maroon">Maroon</option>
<option value="limeGreen">Lime Green</option>
<option value="white">White</option>
</select>

like i said it layes the code down but then seems to over write it if i pick yet anouther code

Kor
10-17-2008, 07:00 PM
this is the bbc composer thing, like the reply box. styling it wouldn't do much.

Right, sorry, I was not attentive

Kor
10-17-2008, 07:07 PM
What about?


var oldtext=textbox.value;
textbox.value = ""+oldtext+"";

itsallkizza
10-17-2008, 07:52 PM
or even just...


textbox.value = ""+textbox.value+"";


:)

runnerjp
10-17-2008, 09:07 PM
thnaks got it working with

function setColor(color) {
var textbox = document.getElementById('inputforum');
textbox.value += "";
}

rnd me
10-20-2008, 07:40 AM
been looking for this for a few days now.
from a while back, but should demo the basics of a real editor.

example editor for firefox:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>dan's simple w3 editor</title>

<style>

body {background-color: aliceblue; }
textarea {font-family:Tahoma, sans-serif; font-size:100&#37;;border: 2px groove #88f ; padding: 5px}

</style>
<script>
String.prototype.underline= function(){ return "<u>"+this+"<\/u>" }
</script>
</head>

<body>
<textarea id='t2' name='t2' rows='50' cols='110' style="width:90%; height:60%;position:absolute; left:4px; top: 250px;" ></textarea>


<span style="color: red" >Format:&nbsp;

<input value="B" type="button" title="Display in bold" onClick="AF('bold',0);" style="font-weight: bold;border: 1px solid #000; color: #000" >&nbsp;

<input value="I" type="button" title="Display in italic" onClick="bv='italics'; AF(bv,0);" style="font-style:italic; font-weight: 600; padding-right: 9px; border: 1px solid #000; color: #000" >&nbsp;

<input value="U" type="button" title="Display w/ underline" onClick="bv='underline'; AF(bv,0);" style="text-decoration: underline;border: 1px solid #000; color: #000" >&nbsp;

<input value="S" type="button" title="Display in Strike-Through" onClick="bv='strike'; AF(bv,0);" style="text-decoration:line-through;border: 1px solid #000; color: #000" >&nbsp;

<input value="F" type="button" title="Display blinking" onClick="bv='blink' ; AF(bv,0);" style="text-decoration: blink; border: 1px solid #000; color: #000" >&nbsp;

|&nbsp;

<input value="big" type="button" title="Use a big font" onClick="bv='big'; AF(bv,0);" style="border: 1px solid #000; color: #000" >&nbsp;

<input value="small" type="button" title="Use a small font" onClick="bv='small'; AF(bv,0);" style="border: 1px solid #000; color: #000" >&nbsp;

|&nbsp;

<input value="sub" type="button" title="Display as sub-script" onClick="bv='sub'; AF(bv,0);" style="border: 1px solid #000; color: #000" >&nbsp;

<input value="sup" type="button" title="Display as super-script" onClick="bv='sup'; AF(bv,0);" style="border: 1px solid #000; color: #000" >&nbsp;

|&nbsp;

<input value="Pre" type="button" title="Display as pre-formatted text (preserves white-space)" onClick="bv='fixed'; AF(bv,0);" style="border: 1px solid #000; color: #000" >&nbsp;

|&nbsp;

<input value="Link" type="button" title="Add a hyper-link to a URL to selected text" onClick="bv='link'; AF(bv,'vi');" style="border: 1px solid #000; color: #000" ></span>




<select size="1" class="editCmd" id="editCombo2" accesskey="a" tabindex="0" class="combo" style="background-color:#000000; color:#FFFFFF"
onChange="if(this.selectedIndex) {var oj = this.options[this.selectedIndex];bv=oj.value; bl=(!!oj.lang)?oj.lang:0; AF(bv, bl);}; this.selectedIndex=0" >
<option>Transforms</option>
<option value="toLowerCase" title="displays a string in lowercase letters ">toLowerCase</option>
<option value="toUpperCase" title="DISPLAYS A STRING IN UPPERCASE LETTERS ">toUpperCase</option>
<option value="escape" lang="fo" title="Safe Encodes a string ">escape</option>
<option value="unescape" lang="fo" title="Decodes a string encoded by escape() ">unescape</option>
<option value="escJS" title="Converts selected text into a JavaScript string">JSON String</option>
<option value="escHT" lang="fo" title="Make the selected text XML-safe">XML escape</option>
</select>



<script>

function el(tid) {
return document.getElementById(tid);
}

function escHT(t) {
var tt = document.createTextNode(t);
var d = document.createElement("div");
d.appendChild(tt);
return d.innerHTML;
}

function escJS(tes) {
var tes2 = tes.replace(/([\r\n])/gm, "");
var qw = tes2.replace(/(["'\f\b\n\t\r\/\\])/gm, "\\$1");
return qw;
}




lastText=el("t2");

function getSel (q) {
v = q.value;
s = q.selectionStart;
e = q.selectionEnd;
return [[0, s, e - s, e, v.length], [v.slice(0, s), v.slice(s, e), v.substr(e)]];
}

function AF(v, l) {
var t = getSel(lastText);
oh = lastText.scrollTop;
if (!l) {
lastText.value = t[1][0] + t[1][1][v]() + t[1][2];
}
if (l == "vi") {
var s = prompt("Enter the URL to link to.");
lastText.value = t[1][0] + t[1][1][v](s) + t[1][2];
}
if (l == "xh") {
var s = prompt("Enter a name for the link.", serial(4));
lastText.value = t[1][0] + t[1][1].anchor(s) + t[1][2];
}
if (l == "no") {
lastText.value = t[1][0] + v + t[1][1] + t[1][2];
}
if (l == "fo") {
var s = eval(v);
lastText.value = t[1][0] + s(t[1][1]) + t[1][2];
}
if (l == "da") {
var d = new Date;
lastText.value = t[1][0] + d[v]() + t[1][1] + t[1][2];
}
if (l == "cs") {
alert(v, l);
}
lastText.scrollTop = oh;
}

</script>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum