Solved

trying to make buttons for bbcode

Posted on 2008-10-16
7
144 Views
Last Modified: 2010-04-06
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
Comment
Question by:runnerjp
  • 4
  • 3
7 Comments
 
LVL 8

Expert Comment

by:MatthiasVance
Comment Utility
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
 

Author Comment

by:runnerjp
Comment Utility
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
 
LVL 8

Expert Comment

by:MatthiasVance
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:runnerjp
Comment Utility
yes that sounds good... are there any websites that i could look at:O
0
 
LVL 8

Accepted Solution

by:
MatthiasVance earned 500 total points
Comment Utility
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
 
LVL 8

Expert Comment

by:MatthiasVance
Comment Utility
Or in your code:

function setColor(color) {
wrap(document.getElementById('txt'), "[color=" + color + "]", "[/color]");
}
0
 

Author Comment

by:runnerjp
Comment Utility
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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now