Sorry this is so long but I don't know how else to show and explain it. I tried setting this up on a free webs.com account but it doesn;t allow forms so doesn't work.

I run an Apache server for my family's web site. One of the things it does is allow us to share messages. What I want to do is allow family members to add color to the text messages they are entering.

I had no problem getting things like Bold, Italic, Underline to works as they are all handled within the page.

In trying to add color, I've downloaded a few different color pickers. The one I am currently trying is js_color_picker_v2 which does everything I need except I can't figure out how to get the #rrggbb selected value back to the page the message is entered in and where the selected text to be colored is. I can get it back to a type=hidden variable but don't see how I then kick the page again to process the data the popup window placed there.

Part of my problem is I think serially and the popup window generated by Javascript is not modal so the javascript code in the page that invokes the color popup generator completes without any response from the popup window.

Basically I'm trying to implement the Colors (A) option that is available here (between Remove Text Formatting and Smiles). If someone can describe how that's done that would give me a good place to start.

I've written a lot of html/javascript/css to support the family web site. I'm usually able to figure out how to do things but am very frustrated with this one so any help would be greatly appreciated.

This is what it looks like when I run it:


As you can see (hopefully) the insert of the font tags occurs before I get a chance to select a color from the color picker.

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
   <META http-equiv="Content-Style-Type" content="text/css"></meta>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
   <meta name="GENERATOR" content="Mozilla/7.1b [en] (WinXP; U) [Netscape]"></meta>

   <link rel="stylesheet" href="js_color_picker_v2.css" media="screen">
   <script src="color_functions.js"></script>
   <script type="text/javascript" src="js_color_picker_v2.js"></script>
  </head>

  <body>
   <SCRIPT LANGUAGE="JavaScript">
    // ---------------------------------------------------------------------------
    // Choose a color then apply to the selected area text of the inut area.
    // ---------------------------------------------------------------------------
    function pickColor($obj1)
      {
        showColorPicker($obj1,document.forms[0].rgb2)

        $color=document.forms[0].rgb2.value
        //alert($color)

        var $tb = document.getElementById("textinput");
        if (document.selection)
          {
            var str=document.selection.createRange().text;
            if (str != '' && str!= 'undefined')
              {
                var sel=document.selection.createRange();
                sel.text="<font color="+$color+">"+str+"</font>";
              }
          }
        else if (typeof $tb.selectionStart != 'undefined')
          {
            var $before, $after, $selection;
            if ($tb.selectionStart == 0)            // Starts at left edge?
              $before = '';                        // No before then
            else
              $before= $tb.value.substring(0, $tb.selectionStart);

            $selection = $tb.value.substring($tb.selectionStart, $tb.selectionEnd);
            if ($selection != "")
              {
                if ($tb.selectionEnd == $tb.value.length)   // Ends at left edge?
                  $after = '';                         // No after then
                else
                  $after = $tb.value.substring($tb.selectionEnd, $tb.value.length);
                $tb.value= String.concat($before, "<font color="+$color+">",$selection,"</font>",$after);
              }
          }
        $tb.focus();
        return false;
      }
   </SCRIPT>

   <form name=form1 action=writemessage.html method=post>
    <textarea id=textinput name=data rows=5 cols=40>This is some text in a textarea input box.</textarea>
    Click here to select Color: <img src=colorPicker.png  alt='Pick a color' title='Pick a color' onClick="pickColor(this)">
    
    Use the mouse to select some of the text then click the A above. What I want to happen
    is that when you chose a color the appropriate &ltfont color=#rrggbb&gt and &lt/font&gt will be wrapped
    around the selected text.
    <input type=hidden size="10" maxlength="7" name="rgb2">
   </form>
  </body>
</html>

Here is a working function for IE versions

function colorPick(x){
	var marked,color={};
	showColorPicker(x,color);
     if(document.selection){
	marked=document.selection.createRange();}
     else{marked=null/*try satisfy W3C bitchiness here*/}
	color_picker_content.onclick=
	function(){ return color.value ? setColor(color.value,marked) : false } 
	function setColor(color,marked){
		marked.text?
		  marked.text=marked.text.fontcolor(color) : 0;
		}
	}

In case you decide to use html/rich-text editor in the future this will do for html selections:

marked.pasteHTML(marked.text.fontcolor(color));

...no patience in dealing with w3c mess right now 'cause anyway this will get you up and running in no time...

p.s.: don't forget to use the other w3c bitchy enforcement of var color_picker_content = document.getElementById("color_picker_content"); nonsense for pleasing firefox there unless you decide to use my <!doctype native> definition instead of what you are currently using. (wasn't easy to find "color_picker_content" element to refer to! )

have fun.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.