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

Thread: Text color

  1. #1
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts

    Text color

    Hi,
    Please tell me is it possible to create a text color A.By clicking A the color palatte is show for selecting colors.If means please tell me how to do that.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    this works for about half of us:
    Code:
    <input type=color>
    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%

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    According to w3schools.com, input type="color" only works in Chrome and Opera (currently.. this may change.)

    http://www.w3schools.com/html/html5_...nput_types.asp
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,657 Times in 4,619 Posts
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    gayathri (03-13-2013)

  • #5
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Is it possible to make a color palatte like, by clicking some image the color palatte is open and then to select the colors.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,657 Times in 4,619 Posts
    Yes, of course.

    Just put the palette inside a <div> and hide the <div> until something is clicked on.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    gayathri (03-14-2013)

  • #7
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Please tell me how to put the palette inside a div tag.
    Last edited by gayathri; 03-14-2013 at 08:59 AM.

  • #8
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    function getColor1() { alert("hai");
          var img = document.createElement("img");
          img.src = "img/palette.gif"; 
          //img.height = 75; 
          //img.width = 113;
          //img.style.top=800;
          //img.style.right=100;
          document.body.appendChild(img);
    	getColor();
        }
    function getColor(block)
    {alert("hai1");alert(block);
    var s_url=block.href;
    var pColor=s_url.substr(s_url.indexOf("#"));
    //document.getElementById("colorPalDemo").style.color=pColor;
    document.getElementById("clr").style.display=hidden;
    //getColor1();
    }
    
    
    
    </script>
    </head>
    <body><img  src="img/supst.png"  onClick="getColor1();" />
    
          <!--  <img  src="img/palette.gif" id="clr" usemap="#color_pallete" />-->
    <map name="color_pallete" id="color_pallete">
        <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" />
        <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" />
        <area shape="rect" coords="63,7,87,31" href="#0000FF"  onclick="getColor(this);" />
        <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" />
        <area shape="rect" coords="7,33,30,58" href="#00FFFF"  onclick="getColor(this);"/>
        <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" />
        <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" />
        <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" />
        <area shape="rect" coords="8,61,31,85" href="#32CD32"  onclick="getColor(this);" />
        <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" />
        <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" />
        <area shape="rect" coords="92,61,115,85" href="#008B8B"  onclick="getColor(this);" />
        <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" />
        <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" />
        <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" />
        <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" />
       </map>
    <!--<span id="colorPalDemo"></span> -->
      
    </body>
    </html>
    The following is my code for color palette. By clicking an image the palette get open for selecting the colors. But the problem is the palette is opening but cann't able to select the colors. Please anyone tell me what i am doing wrong.

  • #9
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function getColor1(id) {
       var clr = document.getElementById(id);
    
       if (clr.style.visibility=="visible") {
              clr.style.visibility="hidden";
         }
         else {
              clr.style.visibility="visible";
         }
     }
    function getColor(block)
    {//alert("hai1");alert(block);
    var s_url=block.href;
    var pColor=s_url.substr(s_url.indexOf("#"));
    document.getElementById("colorPalDemo").style.color=pColor;
    alert(pColor);
    //document.getElementById("clr").style.display=hidden;
    //getColor1();
    }
    </script>
    </head>
    <body><img src="img/supst.png" id="color" onclick="getColor1('imgclr');" /><br/>
    <img id="imgclr" src="img/palette.gif" usemap="#color_pallete" style="visibility:hidden"/>
    <map name="color_pallete" id="color_pallete">
        <area shape="rect" coords="7,7,31,30" href="#FF0000" onclick="getColor(this);" />
        <area shape="rect" coords="35,7,59,30" href="#00FF00" onclick="getColor(this);" />
        <area shape="rect" coords="63,7,87,31" href="#0000FF"  onclick="getColor(this);" />
        <area shape="rect" coords="92,7,115,31" href="#8B008B" onclick="getColor(this);" />
        <area shape="rect" coords="7,33,30,58" href="#00FFFF"  onclick="getColor(this);"/>
        <area shape="rect" coords="36,34,59,57" href="#006400" onclick="getColor(this);" />
        <area shape="rect" coords="63,34,86,58" href="#6B8E23" onclick="getColor(this);" />
        <area shape="rect" coords="92,35,115,57" href="#00FF7F" onclick="getColor(this);" />
        <area shape="rect" coords="8,61,31,85" href="#32CD32"  onclick="getColor(this);" />
        <area shape="rect" coords="35,62,59,85" href="#7FFFD4" onclick="getColor(this);" />
        <area shape="rect" coords="64,61,86,85" href="#7FFF00" onclick="getColor(this);" />
        <area shape="rect" coords="92,61,115,85" href="#008B8B"  onclick="getColor(this);" />
        <area shape="rect" coords="91,88,115,111" href="#9932CC" onclick="getColor(this);" />
        <area shape="rect" coords="64,88,87,111" href="#00BFFF" onclick="getColor(this);" />
        <area shape="rect" coords="36,88,59,112" href="#1E90FF" onclick="getColor(this);" />
        <area shape="rect" coords="8,88,30,111" href="#FF4500" onclick="getColor(this);" />
       </map>
    <td>
    			Statement1<font color="#0000FF">*</font>
    			</td>
    			<td><textarea name="ques1" id="ques1" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>
    			</td>
    <td>
    			Statement2<font color="#0000FF">*</font>
    			</td>
    			<td><textarea name="ques2" id="ques2" cols="25" rows="5" style="width: 220px; height: 100px;"></textarea>
    			</td>
    
    <span id="colorPalDemo">gayu</span>
    </body>
    </html>
    The above is my code it works fine. But I dont want the span tag. I want to to include all my textarea. Please tell me how to do that.
    Last edited by gayathri; 03-22-2013 at 05:00 AM.

  • #10
    New Coder
    Join Date
    Jan 2013
    Posts
    71
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Why dont you try <input type=color>.Check it out with this coding.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,316
    Thanks
    203
    Thanked 2,566 Times in 2,544 Posts
    Quote Originally Posted by RobertWoges View Post
    Why dont you try <input type=color>.Check it out with this coding.
    Robert - it has already been pointed out that at present <input type="color"> only works in Chrome and Opera. Hence rnd me's comment "this works for about half of us".

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    New Coder
    Join Date
    Nov 2012
    Location
    chennai
    Posts
    55
    Thanks
    29
    Thanked 0 Times in 0 Posts
    I am not using chrome or opera. Thats why i asked the help. Now i find it what i had did wrong.Instead of the following code

    Code:
    function getColor(block)
    {
    var s_url=block.href;
    var pColor=s_url.substr(s_url.indexOf("#"));
    document.getElementById("colorPalDemo").style.color=pColor;
    alert(pColor);
    //document.getElementById("clr").style.display=hidden;
    //getColor1();
    }
    I used the following code.
    Code:
    function getColor(block1)
    {//alert(block1);
    var s_url=block1.href;
    //alert(s_url);
    var pColor=s_url.substr(s_url.indexOf("#"));
    //alert(pColor);
    document.getElementsByTagName('textarea').value=pColor;
    //alert(block);
    //alert(document.getElementsByTagName('textarea').value);
    }
    And now my problem was solved. Thanks to all.


  •  

    Posting Permissions

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