	AllExperts > DHTML
	Search

About Andrew Hoffman
Expertise
I can field just about any question within this topic ranging from JavaScript to CSS, the two ingredients of DHTML. I`m very interested in the W3C and its validation rules for HTML, XHTML, and CSS, and enjoy answering questions of this type as well. I detest sleep and respond at all hours of the day or night.

Experience
Experience in the area
I've been working with DHTML and CSS for 7 years now and build/maintain websites of my own that implement DHTML navigation.

What I'm doing now
My contract with Microsoft has ended and I am working for myself once again. Please contact me for any front-end work at antibland@gmail.com

You are here: Experts > Computing/Technology > HTML/XML > DHTML > .a solution!

DHTML - .a solution!

Expert: Andrew Hoffman - 11/20/2008

Question
QUESTION: I have made a fake google,Just for fun.- http://gaurav09.tk/

In the search bar,the default value is "Gaurav Srivastav".
I want that the text "Gaurav Srivastav" should be written in color rgb(137,137,137)and when somebody click in the search box the text must disappear,and the person using the website can enter the search string in the search box in black colour.
Is it possible

ANSWER: Gaurav, run this code in any browser to test this solution. Basically, you want to add this to your loading code, if any exists already. The code first looks through all <input> fields and finds the one named "q". Next it sets the starting string color of "q" to rgb(137, 137, 137). If the user enters the field "q" then the text will disappear ONLY IF the string value is "Gaurav Srivastav". If not, this means the user has already entered some text in the field, left, and come back to the field again. In this case, we don't want that text to disappear. Finally, I assign event listeners to the input field so that it toggles correctly and alternates text colors as you requested.

Best of luck,

Andrew

-------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gaurav test</title>
<script type="text/javascript">
window.onload = function() {
  var inputs = document.getElementsByTagName("input");
  for (var i = 0; i < inputs.length; i++) {
     if (inputs[i].name == "q") {
        inputs[i].style.color = "rgb(137, 137, 137)";
        inputs[i].onfocus = function() {
           if (this.value == "Gaurav Srivastav") {
              this.value = "";
           }
           this.style.color = "rgb(0, 0, 0)";
        }
        inputs[i].onblur = function() {
           this.style.color = "rgb(137, 137, 137)";
        }
     }
  }
}
</script>
</head>

<body>

<form>
  <input name="q" type="text" value="Gaurav Srivastav" />
</form>
</body>
</html>

---------- FOLLOW-UP ----------

QUESTION: everything fine
simply awesome and perfect
one think that i wanna ask is the meta charset was UTF-8 but the code u gave has iso-8859-1
why??
and internet explorer gives the prompt to run activex :(
though working fine with firefox
thank you very much
u r really an expert

Answer
--

one think that i wanna ask is the meta charset was UTF-8 but the code u gave has iso-8859-1
why??

--

I simply created a new page in DreamWeaver and that was the default code that was included. I'm not sure why that is.

--

and internet explorer gives the prompt to run activex :(

--

This might be a security setting within the browser that prompts for that to happen. My versions of Internet Explorer 6 & 7 do not prompt me to run active x.

Andrew

Add to this Answer Ask a Question