changing the background of element on the fly using javascript

Sridhar_Rao · 27-01-2009, 09:34 PM

Hello,

I wish to change the background color plus the text color of a form element on the fly using javascript. When click on a link, not only the focus should be on the element but the background colour and font colour too should change.

I experimented using getElementById property and it worked well in firefox and chrome but not in IE 7.

How can this be done?

victor_rambo · 27-01-2009, 11:05 PM

In the status bar, near the left corner it may be hinting towards some error. Check it out!

kapsicum · 28-01-2009, 01:32 PM

its better if u could show the code ...

well you can do in following way :

1. Create a new style class which may be something like this :

Code:

.newClass {
	background-color: #003399;
	color: #FFFFFF;
}

2. Add a javascript function something like this :

Code:

function changeClass(element) {
	var elementObj = document.getElementById(element);
	elementObj.focus();
	elementObj.className = 'newClass';
}

3. Call the function onClick of an element something like this :

Code:

<a href="javascript:void(0);" onClick="javscript: changeClass('formElementId');" >Sometext</a>

Sridhar_Rao · 02-02-2009, 08:07 PM

Thanks a lot Kapsicum, this is exactly what I was looking for.

pr.itdude · 02-02-2009, 08:36 PM

hey i too need someones help.....

actually i need a code/javascript so that whenever user opens the page of my blog (blogspot), and if the user's screen resolution is 600x800 pixels then the horizontal scroll bar (below) of the window, comes in the middle. And if the screen resolution is 1024x768 pixels or more then the page should open normally i.e., this code then should not be executed.!!

Thnx. waiting eagerly of some help!!

kapsicum · 04-02-2009, 05:13 PM

Quote:

Originally Posted by pr.itdude

hey i too need someones help.....

actually i need a code/javascript so that whenever user opens the page of my blog (blogspot), and if the user's screen resolution is 600x800 pixels then the horizontal scroll bar (below) of the window, comes in the middle. And if the screen resolution is 1024x768 pixels or more then the page should open normally i.e., this code then should not be executed.!!

Thnx. waiting eagerly of some help!!

cant imagine y do u want to do dat but try the following :

Code:

<script type="text/javascript"> 
function moveHorizontalScroll() {
	if(screen.width == 800 && screen.height == 600) //check for users Screen Resolution
	{
		var browserWidth ,browserHeight;
		//get the Browser's Inner Dimentions 
		if(window.innerHeight || window.innerWidth) {  // FF, Chrome, Safari
			browserWidth = window.innerWidth;
			browserHeight = window.innerHeight;
		}
		else { // IE
			browserWidth = document.documentElement.clientWidth;
			browserHeight = document.documentElement.clientHeight;
		}
		var midPos = Math.round(browserWidth / 2); // set to half of the browser's inner width .... change as u feel the need
		window.scroll(midPos,0); // Horizontal ,Vertical scroll position in pixels
	}
}
</script>

then call the function on body onload as follows :

Code: