Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts

    selecting colour of text

    im setting up some bbcode for my forum and i have run into a problem...

    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>
    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

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Your approach is wrong. You should have handle the CSS on-the-fly attributes of the textbox, not to insert pseudo tags in it:
    Code:
    <!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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by Kor View Post
    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.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #4
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    yes thats the effect im trying to go for but i cant seem to get it to work with my code

    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>
    like i said it layes the code down but then seems to over write it if i pick yet anouther code

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by rnd me View Post
    this is the bbc composer thing, like the reply box. styling it wouldn't do much.
    Right, sorry, I was not attentive
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    What about?
    Code:
    var oldtext=textbox.value;
    textbox.value = "[color=" + color + "]"+oldtext+"[/color]";
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    or even just...
    Code:
    textbox.value = "[color=" + color + "]"+textbox.value+"[/color]";

  • #8
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    thnaks got it working with

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

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    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:

    Code:
    <!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>
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •