changing the background of element on the fly using javascript

Status
Not open for further replies.
Sridhar_Rao

Sridhar_Rao

In the zone
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

victor_rambo

हॉर्न ओके प्लीज़
In the status bar, near the left corner it may be hinting towards some error. Check it out!
 
kapsicum

kapsicum

spice it up
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>
 
Last edited:
pr.itdude

pr.itdude

tHe nEw gEEk......ITian
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

kapsicum

spice it up
pr.itdude said:
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!!
Click to expand...

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: 
<body onload="moveHorizontalScroll()">
 
pr.itdude

pr.itdude

tHe nEw gEEk......ITian
thnx ^^.......
actually its the template of my blog which forced me to do this........
 
Status
Not open for further replies.
Top Bottom