asked on

Text does not wrap around drop down selections.

Im trying to make it so when a user selects a colour from the drop down menu. it wraps the code around the highlighted text.

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

Below is the javascript for this

function setColor(color) {
        var textbox = document.getElementById('inputforum');
        textbox.value += "[color=" + color + "][/color]";
}
function setsize(size) {
        var textbox = document.getElementById('inputforum');
        textbox.value += "[size=" + size + "][/size]";
}

function initialise() {
var element = document.getElementById('element-id');

if (element && element.style)
element.style.display = 'none';
}

function toggleDisplay(element) {
var style;

if (typeof element == 'string')
element = document.getElementById(element);
if (element && (style = element.style))
style.display = (style.display == 'none') ? '' : 'none';
}

if (!document.getElementById)
document.getElementById = function() {return null;};


function wrapText(el, openTag, closeTag) {
if (el.setSelectionRange) {
// W3C/Mozilla
el.value = el.value.substring(0,el.selectionStart) + openTag + el.value.substring(el.selectionStart,el.selectionEnd) + closeTag + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
// IE code goes here
el.focus(); //or else text is added to the activating control
var range = document.selection.createRange();
range.text = openTag + range.text + closeTag;
}
}

Open in new window

Michel Plungjan

Here

<script>
function setColor(theSel) {
  var color = theSel.options[theSel.selectedIndex].value;
  var textbox = document.getElementById('inputforum');
  textbox.value += "[color=" + color + "][/color]";
}
window.onload=function() {
  document.getElementById('colorSel').selectedIndex=0;
}

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

Open in new window

Member_2_5230414

ASKER

tried the above code and sadly just adds it to the end line of text

Michel Plungjan

ah. Apologies. The code for the select did not work at all. I now understand your question. I'll find some code later. You need to use document.selection and more. Why invent the hot water when tinyEDIT will do the job.

Member_2_5230414

ASKER

It was a learing proccess tvia using php ect :)...

I would love to finish off re inventing hotwater ;)

Michel Plungjan

http://www.pixel2life.com/publish/tutorials/892/building_better_bbcode/

http://livepipe.net/control/textarea

Member_2_5230414

ASKER

humm took a look and gone right over my head...

With buttons i do this: <input type='button' value='B' name='btnBold' onclick='wrapText(document.getElementById('inputforum'),'[b]','[/b]');'/>

Anyway i can apply it to the dropdowns?

Michel Plungjan

Sorry - I could not read your code on my mobile

Yes of course. Not clever of me not to scroll down to see you have the means to do what you want

onChange='wrapText(document.getElementById('inputforum'),'[color=\''+this.form.color.value+'\']','[/b]');'/>

for example

Let me know how you get along I am so very busy - I will have more time tomorrow

Member_2_5230414

ASKER

Tried it and didnt do anything ...not even inset [color.....][/color]

Michel Plungjan

Hard to read it - should have fixed the &39; and no need to pass the form.color since there are no form tags and we are IN the select

try (watch the single quotes)

<select id="color" onChange="if (this.selectedIndex>0)wrapText(document.getElementById('inputforum'),'[color=\''+this.value+'\']','[/color]');"/>

Member_2_5230414

ASKER

how do i get rid of the quotes??

Itried and both 1ns i delete dont work

Michel Plungjan

sorry I do not understand what you mean.

Member_2_5230414

ASKER

sorry.

The current output is [colour='red'] i need it to just be [color=red]

I have attempted to take out the quotes and then the code does not work

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial