• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 156
  • Last Modified:

trying to make buttons for bbcode

i have made by bbcode but now im trying to pull together some puttons to use with the code but i have come accross soem problems,,,

i have 3 areas i cant figure out how to creat buttons for these are:

colour
size
font

i would like to creat a drop down menu with say

red
blue
black
green

and when one of the colours are selected it sets the code in the box as  
[color=red][/color]  

ho do i do this?
0
runnerjp
Asked:
runnerjp
  • 4
  • 3
1 Solution
 
MatthiasVanceCommented:
I hope this helps you.

Kind regards,

Matthias Vance
<textarea id="txt">
</textarea>
<button onclick="setColor();">Color</button>
<select id="color">
	<option value="red">Red</option>
	<option value="blue">Blue</option>
</select>
<script language="JavaScript">
	function setColor() {
		var color = document.getElementById("color").value;
		var textbox = document.getElementById("txt");
		textbox.value = "[color=" + color + "][/color]";
	}
</script>

Open in new window

0
 
runnerjpAuthor Commented:
well im mopre workign on the emphasis of things like

<input type='button' value='CENTER' name='btnUrl' onclick='wrapText(document.getElementById(&#39;inputforum&#39;),&#39;[center]&#39;,&#39;[/center]&#39;);'>

so all i really want is for it to be selected as a drop down...like you do on word ect... plus the above code does not work it just refreshes the page?
0
 
MatthiasVanceCommented:
What browser are you using? I tested in IE7/FF/Chrome.

You could use the onChange event of the dropdown box to call that same function with the value that the box currently holds.

Kind regards,

Matthias Vance
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
runnerjpAuthor Commented:
yes that sounds good... are there any websites that i could look at:O
0
 
MatthiasVanceCommented:
I provided some code for you which works exactly like that. It's just an example.

Kind regards,

Matthias Vance
<script language="JavaScript">
	function setColor(color) {
		var textbox = document.getElementById('txt');
		textbox.value = "[color=" + color + "][/color]";
	}
</script>
<textarea id="txt">
</textarea>
<select id="color" onchange="setColor(this.value);">
	<option value="red">Red</option>
	<option value="blue">Blue</option>
</select>

Open in new window

0
 
MatthiasVanceCommented:
Or in your code:

function setColor(color) {
wrap(document.getElementById('txt'), "[color=" + color + "]", "[/color]");
}
0
 
runnerjpAuthor Commented:
im setting up some bbcode for my forum and i have run into a problem...

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
[CODE]
 
function setColor(color) {
                var textbox = document.getElementById('inputforum');
                textbox.value = "[color=" + color + "][/color]";
        }
 
<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>[/CODE]

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now