How are they doing this?

  • Thread starter Thread starter M.Siler
  • Start date Start date
M

M.Siler

www.live.com The search field at the top. I've figured out how to do the
background, etc. but what I can't find in their CSS or HTML is how they are
doing the words "search for..." that are there when the text box doesn't
have focus and they go way when it does.

Can anyone help me find how this is being done??

Thanks,
Mark
 
Wow... is there a way to format that without having to go through it by
hand?

Also, is the same file that permits that when you just start typeing on
www.live.com it knows to put you in the search box?
 
javascript


: www.live.com The search field at the top. I've figured
out how to do the
: background, etc. but what I can't find in their CSS or
HTML is how they are
: doing the words "search for..." that are there when the
text box doesn't
: have focus and they go way when it does.
:
: Can anyone help me find how this is being done??
:
: Thanks,
: Mark
:
:
 
Javascript... I see, they programmed it the page to do it. I would never
have guessed.
 
I found in the referenced app.js file the following:


Web.Bindings.attachElementBindingSync(m_searchBoxEl,Start.OnFocusEditBox,m_this,{"activeStyle":activeStyle,"inactiveStyle":"searchEditInactive","text":L_SearchFor_Text});

The var L_SearchFor_Text is where they set "search for..."

I don't understand the Web.Bindings. stuff. Is there a simple scaled down
verions of the javascript that does this?
 
You could write your own. I don't think Microsoft wanted anyone to copy and
use it, or they wouldn't have made it so difficult to read.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but you can't make it stink.
 
Do this -

<input type="text" name="n" value="Your message"
onFocus="if(this.value==this.defaultValue)this.value=''"
onBlur="if(this.value=='')this.value=this.defaultValue">
 
A lot of this code is created with visual studio as "code behind code"
(can't remember the right term right now) and it runs win Windows
servers using .NET framework and ASP.NET.

That particaul effect you can create tih javascitp and CSS. and you can
copy teh code from the their pages.
 
btw. To anser your question. They assign an ID to the input tag (used
with CSS) and they use javascript (in extrrnal file) to assign onfocus
and onblur properties.

Here's how to do what you want with inline code

<input type="text" name="searchfor" size="20" value ="search for..."
onfocus="if(this.value=='search for...')this.value=''"
onblur="if(this.value=='')this.value='search for...'"
/>

...PC
 
Thanks... Just what I was looking for.

p c said:
btw. To anser your question. They assign an ID to the input tag (used
with CSS) and they use javascript (in extrrnal file) to assign onfocus and
onblur properties.

Here's how to do what you want with inline code

<input type="text" name="searchfor" size="20" value ="search for..."
onfocus="if(this.value=='search for...')this.value=''"
onblur="if(this.value=='')this.value='search for...'"
/>

..PC
Click to expand...
 
Thanks... Just what I was looking for.

Murray said:
Do this -

<input type="text" name="n" value="Your message"
onFocus="if(this.value==this.defaultValue)this.value=''"
onBlur="if(this.value=='')this.value=this.defaultValue">
Click to expand...
 
Back
Top