Solved

change background-color of textarea

Posted on 2007-03-18
9
3,828 Views
Last Modified: 2013-11-20
Hi,

I am trying to change the background-color of a "textarea" element in an html page.
This is the code:

void CHtmProps::changeBgColor(int color)
{
 MSHTML::IHTMLDocument2Ptr spDoc=GetHtmlDocument();
 MSHTML::IHTMLElementPtr spBodyElement=spDoc->Getbody();
 MSHTML::IHTMLElementCollectionPtr pElc= spBodyElement->Getall();
 MSHTML::IHTMLElementPtr spElement=0;
 _bstr_t id, bg;
  int len = pElc->length;
  for(int i = 0; i < len; i++)
  {
  _variant_t va((long) i, VT_I4);
  spElement = pElc->item(va);
  //id=spElement->Getid();
  _bstr_t bstrTagName = spElement->GettagName();
  if (!stricmp(STRING bstrTagName,"textarea")) // "IsuHtmlEditor"))
 {
  _variant_t color((long) color, VT_I4);
  BSTR bstrAttName =SysAllocString(L"background-color");              
  VARIANT_BOOL Suc = FALSE;
  spElement->setAttribute(bstrAttName,color,Suc);
  SysFreeString(bstrAttName);
  }
 }
}

it does not work.
0
Comment
Question by:VapiSoft
  • 5
  • 3
9 Comments
 
LVL 30

Expert Comment

by:Steggs
ID: 18744451
Hello,

You can easily control the background-color of a textarea with css...

textarea {background-color:#369;}

Regards
Steggs
0
 

Author Comment

by:VapiSoft
ID: 18744488
Hi Steggs,

I know I can do that in the textarea tag, but I beed to do it dynamically.
Either from a java-script function, or from a CHtmView method.
The code that I wrote is inside CHtmProps which is derived from ChtmlView
0
 
LVL 4

Expert Comment

by:cx323
ID: 18744857
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function changecolor(hex){
document.getElementById('color_change').style.backgroundColor=hex;
}
</script>
</head>
<body>
<a href="#" onclick="changecolor('#fff666')">yellow</a>
<a href="#" onclick="changecolor('#000fff')">blue</a>
<textarea id="color_change" style="width:300px;height:200px"></textarea>
</body>
</html>
0
The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

 

Author Comment

by:VapiSoft
ID: 18744968
Hi cx323:

Your code works as stand alone, but it does not work in my HTML because I have "editor.js" attach to it.
When I remove the "editor.js" it works. Do you know how I can solve this problem (I am not familer with java-script programming).
More info:
I am using "htmlArea" to edit HTML.
I am trying to change the button "background-color" to change the entire background (rather than the text-background).
0
 
LVL 4

Expert Comment

by:cx323
ID: 18744990
could you post a link to your site online so i can look at the issue their since i've never used htmlArea.  and by background do you mean the body background color or what?
0
 

Author Comment

by:VapiSoft
ID: 18745076
Hi,

I am not uning it in my site (www.vapisoft.com) but in my application.
I downloaded it from http://www.codeproject.com/jscript/htmlarea.asp

It is amaizing peace of software, but it caused me a lot of problems.
One problem is this, and the other (which I am breaking my head on) is that under ChtmlView id does not process the Enter key.

0
 
LVL 4

Accepted Solution

by:
cx323 earned 500 total points
ID: 18745313
i just had a quick glance through the source and it looks like this will work:

look for this part of the editor.js file:
// fgColor and bgColor
  else if (cmdID == 'ForeColor' || cmdID == 'BackColor') {
    var oldcolor = _dec_to_rgb(editdoc.queryCommandValue(cmdID));

paste in this code:
// fgColor and bgColor
  else if (cmdID == 'ForeColor' || cmdID == 'BackColor') {
    var oldcolor = _dec_to_rgb(editdoc.queryCommandValue(cmdID));
    var newcolor = showModalDialog(_editor_url + "popups/select_color.html", oldcolor, "resizable: no; help: no; status: no; scroll: no;");
      if(cmdID == 'BackColor' && newcolor != null){editdoc.body.style.backgroundColor = newcolor;return;}
    if (newcolor != null) { editdoc.execCommand(cmdID, false, "#"+newcolor); }
  }

only this line is new:
if(cmdID == 'BackColor' && newcolor != null){editdoc.body.style.backgroundColor = newcolor;return;}
0
 

Author Comment

by:VapiSoft
ID: 18746409
Hi cx323,

I want to thank you very much.
Because i don't know JS I tried to do it for my application and spent a lot of time (tto much time) to it.
Thanks.
0
 

Author Comment

by:VapiSoft
ID: 18746461
One more thing if I may.
How do i initialize it that it will be open in a certain color (not white).
I set the HTML page from my application like that
<textarea name="IsuHtmlEditor"  style="width:800; height:150;background-color: #6699ff">
but when I open it with the editor.js it is white.
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

832 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