Changing Background Color Of Text box ?

Hello,

I need something as Follow..

I am having one Data Entry form. Here I have many controls (All type of controls like Textbox, Dropdownlis, Checkboxex esc...)

Now when user focus any text box then its Background color should change. Can we do it using ATLAS, xmlScript, Javascript...

one more problem is that I am having nearly 20 Text boxes on my page so which way I can get this functionality using less efforts...

Atlas is a really "heavy" way to do this. I'd just do it with Javascript and CSS.

<style type="text/css">

.normal

{

background-color:inherit;

}

.focus

{

background-color:yellow;

}

</style>

<script type="text/Javascript">

function changeTextbox(control){

var x = document.getElementByID(control);

if (x.classname == "normal"){

x.classname = "focus";

}

else {

x.classname = "normal")

}

}

</script>

Nice..

But the Parameter CONTROL in function... comes from where ?

Means from where we can pass it ?

You pass the control paramater when you call the function from the onFocus even of your textbox. It would be just as easy to capture the sender though, and get the calling object of the function, so it didnt need a paramater.
You don't need atlas or ajax at all, some javascript and dhtml will do:

foreach (Control ctrlin Form.Controls){if (ctrl.GetType() ==typeof(TextBox)) { ((TextBox)ctrl).Attributes.Add("onfocus","javascript:this.style.backgroundColor='red'"); ((TextBox)ctrl).Attributes.Add("onblur","javascript:this.style.backgroundColor='white'"); }}

Changing Background color of grid row when row checkbox selected

What option should I choose:

1) Write java script for this

2) Write server code and have grid in UpdatePanel

?

Not clear what the best guidline would be. I am already using update panel for that grid.

I guess the best solution should be if I have defined this background color in CSS.. I guess I could use java script to change the class name dynamicly and have that class defined in CSS. Not sure how to do it...

Here's some sample code I use in my custom ajaxed gridview control...

May or not work for you but should give you some idea..

 protectedvirtualvoid GridView_RowDataBound(Object s,GridViewRowEventArgs e)
{
if (e.Row.RowType ==DataControlRowType.DataRow )
{
//Note: Here is where we change the button submit so that

//our IPostBackHandler can properly handle AJAX requests.

int editID = (int)DataBinder.Eval(e.Row.DataItem,"id");

e.Row.Attributes.Add("onMouseOver","SetNewColor(this);");

e.Row.Attributes.Add("onMouseOut","SetOldColor(this);");

e.Row.Attributes.Add("onDblClick", Page.ClientScript.GetPostBackEventReference(this, e.Row.RowIndex.ToString()));

e.Row.Attributes.Add("onKeyDown","if( event.keyCode == 13 ) " + Page.ClientScript.GetPostBackEventReference(this,"KEYDOWN" +"$" + e.Row.DataItemIndex.ToString()));

Here is the code for adding it to the script manager on the prerender() phase

protected override void OnPreRender(EventArgs e) {string script = @." var _oldColor; function SetNewColor(source) { _oldColor = source.style.backgroundColor; source.style.backgroundColor = '#00ff00';} function SetOldColor(source) { source.style.backgroundColor = _oldColor; }"; ScriptManager.RegisterClientScriptBlock(this,typeof(Page),"ToggleScript", script,true);

Here is the aspx / ascx .Net code to use if you do not wanna do the PreRender event...

<script language="javascript" type="text/javascript"> var _oldColor; function SetNewColor(source) { _oldColor = source.style.backgroundColor; source.style.backgroundColor = '#00ff00';} function SetOldColor(source) { source.style.backgroundColor = _oldColor; } </script>

That should set you on the right direction....at least...

I have tried your aproach, I have created very similar code, but in my code I want to change ackground colour when the checkbox is chcked... It changes the color, but than it does not reverse it back to the old color... Any idea?

function highLight(CheckBoxObj){

var _oldColor;

if (CheckBoxObj.checked ==true) {

_oldColor = CheckBoxObj.parentElement.parentElement.style.backgroundColor;

CheckBoxObj.parentElement.parentElement.style.backgroundColor ='#D6DEEC';

//'#88AAFF';

}

else

{

CheckBoxObj.parentElement.parentElement.style.backgroundColor = _oldColor;

}

OK, I almost figured this out. My _OldColor variable needs to be global, outside of the function of course. OK, it seems to be working for one chcekbox at the time, but when multiple checkboxes are selected it doe not work. My guess would be I need to put the saved value to the array, but not sure how to do it...

var _oldColor;

function highLight(CheckBoxObj){

if (CheckBoxObj.checked ==true) {

_oldColor = CheckBoxObj.parentElement.parentElement.style.backgroundColor;

CheckBoxObj.parentElement.parentElement.style.backgroundColor ='#D6DEEC';

//'#88AAFF';

}

else

{

CheckBoxObj.parentElement.parentElement.style.backgroundColor = _oldColor;

}

In fact I suspect you may have the same problem happening in yourcode as you also do not put it (old color) into an array...

I was merely interested in just showing it highlighted for editing not necessarily for the checkboxes although that would be a nice feature to incorporate...

here some SAMPLE CODE to bite your teeth into - its out of the ajaxtoolkit... shows how to at least work with the arrays:

disableTab :function()

var i = 0;

var tagElements;

var tagElementsInPopUp =new Array();

this._saveTabIndexes.clear();

//Save all popup's tag in tagElementsInPopUp

for (var j = 0; j <this._tagWithTabIndex.length; j++) {

tagElements =this._foregroundElement.getElementsByTagName(this._tagWithTabIndex[j]);

for (var k = 0 ; k < tagElements.length; k++) {

tagElementsInPopUp[i] = tagElements[k];

i++;

}

}

Its from the ModalBehavior.js if you need to examine it a bit more...

Also some of the checkboxes can be initially checked as I keep track of those checked if user changes the pages... I used some code for this, I found on the web...

Thank you very much, the problem is how to get an index of the curren checkbox in the function (I am new to js):

function highLight(CheckBoxObj){

//var theBox=(spanChk.type=="checkbox")?spanChk:spanChk.children.item[0];

//xState=theBox.checked;

//elm=theBox.form.elements;

//for(i=0;i<elm.length;i++)

//if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)

//{

////elm[i].click();

//if(elm[i].checked!=xState)

//elm[i].click();

if (CheckBoxObj.checked ==true) {

_oldColor = CheckBoxObj.parentElement.parentElement.style.backgroundColor;

CheckBoxObj.parentElement.parentElement.style.backgroundColor ='#D6DEEC';

//'#88AAFF';

}

else

{

CheckBoxObj.parentElement.parentElement.style.backgroundColor = _oldColor;

}

This is my checkbox declaration (onclick works somehow, even not recognized by VS editor...):

<ItemTemplate>

<asp:CheckBoxid="chkActive"onclick="javascript:highLight(this);"runat="server"></asp:CheckBox>

</ItemTemplate>

Change Color of Header and Content in Accordian

How do I change the Header and Content sections of the Accordian to different colors? The AccordionPan bgcolor changes both to the same color. Do you have to use a stylesheet to perform this action? If so can someone give me and example that would work?

Thank you for your help.

No suggestions ?
To change the Accordian Header and Content Colors, follow these 3 steps...

First you must create or edit your existing styleesheet of your application, the following two items need to be added.

.accordionHeader

{

background-color:blue;

color:white;

}

.accordionContent

{

background-color:#e4e4e4;

}

2nd in the webform between the <head> tags include the link href stylesheet like so.....

<headrunat="server">

<linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/>

</head>

Third edit the AccordionPan tag or tags to accordionHeader and accordionConten settings like so...

<ajaxtoolkit:AccordionPaneID="AccordPane1"HeaderCssClass="accordionHeader"ContentCssClass="accordionContent"runat="server">

Run your app and the setting should be visible now.

CascadingDropDownList fireEvent onchange not working when parent selection changed

I changed the included sample test page to remove the autopostback from theDropDownList3 dropdown (for color). I also removed the server side onselectedindxchanged eventhandler. I wanted to give the feedback to the user all from the client side. For that effect I added the following javascript code at the end of the page:

 <script type="text/javascript">$addHandler($get('<%=DropDownList3.ClientID%>'), "change", ProvideFeedback);function ProvideFeedback(eventElement){var makeDropdown = $get('<%=DropDownList1.ClientID%>');var modelDropdown = $get('<%=DropDownList2.ClientID%>');var colorDropdown = $get('<%=DropDownList3.ClientID%>');if(colorDropdown.selectedIndex == 0){alert("Please make all your selections");}else{alert('You selected ' + makeDropdown.options[makeDropdown.selectedIndex].text + ' - ' + modelDropdown.options[modelDropdown.selectedIndex].text + ' - ' + colorDropdown.options[colorDropdown.selectedIndex].text);}} </script>

It works just fine when I change the values in the color dropdown; I get the feedback. But I am also expecting to get the feedback when I change the make or model dropdown as the onchage is internally fired for color dropdown. But I never see that handled. Everytime I change values of make or model I never get the feedback.

Why is that? What am I missing?

Thanks.

Bumping up. Could someone please respond to this thread.

Ifthis.get_element().fireEvent('onchange'); is not producing the effect I am looking for what is it for?

Thanks.

Hi Nkv321,

CascadingDropDown will compare the selected value when its onchange event is fired. If no changes , there will no further actions , so it won't call the WebService.

I hope this helps.

Best regards,

Jonathan

It's not about changing the selected value and calling the web service. It's about when the parent value changes -- child drop down items get rebound -- and then an event is fired indicating that the child dropdown value has changed.

My question is what can that event be used for? How can it be used? I tried to use it in the sample that I put forth earlier but it was not executing. For example how can I add/attach a hanlder in the page to this event?

Thanks

Hi Nkv321,

I think you can attach a Javascript to the CascadingDropDown's add_selectionChanged or add_populated. For example:

function pageLoad(){$find("CascadingDropDown's BehaviorID"). add_selectionChanged(onSelectionChanged); }

function onSelectionChanged(){//your codes here.}

add_selectionChanged //Add an event handler for the selectionChanged event

add_populated //Add an event handler for the populated event

I Hope this help.

Best regards,

Jonathan