thibo1025 Posted February 24, 2007 Share Posted February 24, 2007 I have my bbcode installed and I have a problem with a dropdown as buttonWhat I have tryed out is <select name="font" ><option select>Font</option><option onClick="txt.value+='[font=Times New Roman]text[/font]';"><><spanfont face="Times New Roman">Times New Roman</font></option><option onClick="txt.value+='[font=Comic Sans MS]text[/font]';"><font face="Comic Sans MS">Comic Sans MS</font></option></select> I cant figure how to make it work, my textarea is: <textarea cols='90' rows='10' id='txt' name='text'></textarea> note that inside the dropdown the font tag isn't doing anything... Link to comment Share on other sites More sharing options...
PrateekSaxena Posted February 24, 2007 Share Posted February 24, 2007 <select name="font" ><option select>Font</option><option onClick="txt.value+='[font=Times New Roman]text[/font]';"><><spanfont face="Times New Roman">Times New Roman</font></option><option onClick="txt.value+='[font=Comic Sans MS]text[/font]';"><font face="Comic Sans MS">Comic Sans MS</font></option></select> Line 3 : Char 67What is that?? Link to comment Share on other sites More sharing options...
Chocolate570 Posted February 24, 2007 Share Posted February 24, 2007 Options can't be styled with font tags. :)You have to use CSS, whether it's inline or not.If you need help with that, just post, but for your actual javascript code help:Put this into the head section of your page. It's not necessary to complete this with a function instead of inline code, but it makes things cleaner. <script type="text/javascript">function addFont(font) { document.getElementById("txt").value+="[font="+font+"]text[/font]";}</script> Now, use this as your select code instead.<select name="font" onchange="addFont(this.options[this.selectedIndex].value)"><option select>Font</option><option value="Times New Roman">Times New Roman</option><option value="Comic Sans MS">Comic Sans MS</option></select>As you can see, it's much smaller, but will still work the same way. If you want to add a new font, simply add one of these:<option value="font name">Font Name</option> Link to comment Share on other sites More sharing options...
PrateekSaxena Posted February 24, 2007 Share Posted February 24, 2007 Oh!, but I think it will also change if you write "document.txt.value" . Also what IS on Line 3.Char 67?? If it will not change by "document.txt.value"...my question is why? Link to comment Share on other sites More sharing options...
thibo1025 Posted February 24, 2007 Author Share Posted February 24, 2007 when I copied and pasted the code I had to translate it form what I had to a more basic version and I forgot to deleate a part.Thanks cocolate.However I might want to know how to change the font of an option but I read it could not be done in CSS... I found a tutorial using JS that makes the select act like a list: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>Select Replacement Test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <style type="text/css"> } input { display: block; margin: 0 0 0px; color: #ffffff; } select { display: block; width: 300px; } select.replaced { display: none; } ul.selectReplacement { margin: 0; padding: 0; height: 1.65em; width: 300px; } ul.selectReplacement li { background: #ffffff; color: #000000; cursor: pointer; display: none; font-size: 11px; line-height: 1.7em; list-style: none; margin: 0; padding: 0px 12px; width: 276px; border: solid 1px #000000; } ul.selectOpen li { display: block; } ul.selectReplacement li.selected { background: url(../tytd/images/fleche.gif) top right no-repeat; color: #000000; border: solid 1px #000000; display: block; } ul.selectOpen li.selected { background: #ffffff; display: block; border: solid 1px #000000; } ul.selectOpen li:hover, ul.selectOpen li.hover, ul.selectOpen li.selected:hover { background: #CCCCCC; color: #000000; border: solid 1px #000000; } </style> <script type="text/javascript"> function selectReplacement(obj) { obj.className += ' replaced'; var ul = document.createElement('ul'); ul.className = 'selectReplacement'; var opts = obj.options; for (var i=0; i<opts.length; i++) { var selectedOpt; if (opts[i].selected) { selectedOpt = i; break; } else { selectedOpt = 0; } } for (var i=0; i<opts.length; i++) { var li = document.createElement('li'); var txt = document.createTextNode(opts[i].text); li.appendChild(txt); li.selIndex = opts[i].index; li.selectID = obj.id; li.onclick = function() { selectMe(this); } if (i == selectedOpt) { li.className = 'selected'; li.onclick = function() { this.parentNode.className += ' selectOpen'; this.onclick = function() { selectMe(this); } } } if (window.attachEvent) { li.onmouseover = function() { this.className += ' hover'; } li.onmouseout = function() { this.className = this.className.replace(new RegExp(" hover\\b"), ''); } } ul.appendChild(li); } obj.parentNode.insertBefore(ul,obj); } function selectMe(obj) { var lis = obj.parentNode.getElementsByTagName('li'); for (var i=0; i<lis.length; i++) { if (lis[i] != obj) { lis[i].className=''; lis[i].onclick = function() { selectMe(this); } } else { setVal(obj.selectID, obj.selIndex); obj.className='selected'; obj.parentNode.className = obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), ''); obj.onclick = function() { obj.parentNode.className += ' selectOpen'; this.onclick = function() { selectMe(this); } } } } } function setVal(objID, selIndex) { var obj = document.getElementById(objID); obj.selectedIndex = selIndex; } function setForm() { var s = document.getElementsByTagName('select'); for (var i=0; i<s.length; i++) { selectReplacement(s[i]); } } window.onload = function() { (document.all && !window.print) ? null : setForm(); } </script></head><body><form><select name="font" id="font"><option select>font</option><option value="Arial"><font face="Arial">Arial</font></option><option value="Arial Black"><font face="Arial Black">Arial Black</font></option><option value="Arial Narrow"><font face="Arial Narrow">Arial Narrow</font></option><option value="Book Antiqua">Book Antiqua</option><option value="Century Gothic">Century Gothic</option><option value="Comic Sans MS">Comic Sans MS</option><option value="Courier New">Courier New</option><option value="Franklin Gothic Medium">Franklin Gothic Medium</option><option value="Garamond">Garamond</option><option value="Georgia">Georgia</option><option value="Impact">Impact</option><option value="Lucida Console">Lucida Console</option><option value="Lucida Sans Unicode">Lucida Sans Unicode</option><option value="Microsoft Sans Serif">Microsoft Sans Serif</option><option value="Palatino Linotype">Palatino Linotype</option><option value="Tahoma">Tahoma</option><option value="Times New Roman">Times New Roman</option><option value="Trebuchet MS">Trebuchet MS</option><option value="Verdana">Verdana</option></select></form></body></html> An It works out well only the font still dosent change... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now