By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,695 Members | 1,597 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,695 IT Pros & Developers. It's quick & easy.

Cannot Hide layer when text length is zero? Help!

P: n/a
I am trying to hide a layer when a text box length is zero, and its
just not working! It hides the content in the layer, but you still
see a little 2 pixel width blip on the screen. I've spent hours
playing with stuff, its a brain cramp. Need someone to state the
obvious for me. Heres my code.....
<style type="text/css" media="screen">
#search_suggest {
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #3366CC;
}
</style>

<script language="javascript" type="text/javascript">

function OneStrcZeroLength(thelayer){
if ( document.getElementById('txtSearch').length == 0){
thelayer.style.display='none';
}
}
</script>
<form id="frmSearch">
<input type="text" id="txtSearch" name="txtSearch" alt="Search
Criteria" onkeyup="searchSuggest();"
onkeydown="OneStrcZeroLength(document.getElementBy Id('search_suggest'));"
autocomplete="off" />

<input type="submit" id="cmdSearch" name="cmdSearch" value="Search"
alt="Run Search" /><br />
<div id="search_suggest">
</div>
</form>

As you can see from the code, ONKEYDOWN for textbox "txtSearch", it
calls function OneStrcZeroLength, which then checks to see if
txtSearch has a zero length, and if it does, it tells the layer style
to change to display none.

Which it doesn't do. Ive done numerous things to try to correct this,
but to no avail. Any ideas?

Thanks!
JE

Jun 18 '07 #1
Share this Question
Share on Google+
5 Replies


P: n/a
JEgbert <jo**@onestructure.comwrote in news:1182203250.592225.115890
@w5g2000hsg.googlegroups.com:
I am trying to hide a layer when a text box length is zero, and its
just not working! It hides the content in the layer, but you still
see a little 2 pixel width blip on the screen. I've spent hours
playing with stuff, its a brain cramp. Need someone to state the
obvious for me. Heres my code.....
I could be totally wrong, but maybe two things?

a) could the blip be the 'remnants' of the text cursor? it seems like
you'd be hiding a DIV that has an active, flashing 'text input' cursor.
maybe its a screen redraw issue. try taking the focus() off the
layer/field first?

b) im assuming this isn't it, because you can get '0' right now, but
shouldnt it be:

if ( document.getElementById('txtSearch').value.length == 0) ??

(i added 'value'.. mentally i imagine that getElementById
('textSearch').length is the length of the DOM element, not the field
value. obviously i haven't executed your code)

:)

good luck

Jun 18 '07 #2

P: n/a

JEgbert wrote:
I am trying to hide a layer when a text box length is zero, and its
just not working! It hides the content in the layer, but you still
see a little 2 pixel width blip on the screen. I've spent hours
playing with stuff, its a brain cramp. Need someone to state the
obvious for me. Heres my code.....

try:
<script type="text/javascript">
function OneStrcZeroLength(txtSearch,thelayer){
if (!txtSearch.value.length)
thelayer.style.display='none';
}
</script>
<form id="frmSearch">
<input
type="text"
id="txtSearch"
name="txtSearch"

onkeyup="searchSuggest();OneStrcZeroLength(this,do cument.getElementById('search_suggest'));"
/>

<div id="search_suggest"></div>
</form>

Jun 19 '07 #3

P: n/a
hey guys,
Thanks for the shot.. unfortunately it didnt work, but I know why.....

it DOES hide the layer, but not the layer border. The border still is
1px, regardless of the info in the layer being hidden. if I take out
the border it works.

But I need the border :-) How would I dynamically hide the border?
JE

Jun 19 '07 #4

P: n/a
SPOKE TOO SOON. IT DOESNT WORK. forget everything I just said. none
of this is even hiding anything. Just put some content in the
search_suggest div and check it out for yourself.

Jun 19 '07 #5

P: n/a
JEgbert <jo**@onestructure.comwrote in news:1182282091.816991.260250
@q75g2000hsh.googlegroups.com:
SPOKE TOO SOON. IT DOESNT WORK. forget everything I just said. none
of this is even hiding anything. Just put some content in the
search_suggest div and check it out for yourself.
the code i provide at the end of this post works for me.

i left the "alert" in the function so you can see whats happening. You
ignored my earlier suggestion to leave "value" in there - i put it in
because you weren't checking for the value's length.

I changed the CSS to make it very apparant that the DIV is hiding
correctly.

Also, you were calling searchSuggest as a function which wasn't in the
code until I put something blank in.

Also, i don't know if you REALLY want to be calling your functions when
you do (onkeydown) because you have a fundamental flaw in your logic.
When i want to enter a character in your text box, you're calling the
function before my character is entered, so it reports '0' as the length
even though i just typed a character. Change it to "onkeyup", or better
yet, combine your function into the function searchSuggest.

Surely you can take it from here... after you buy me a beer.

**

<html>
<head>
<style type="text/css" media="screen">
#search_suggest {
position: absolute;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #3366CC;
width: 200px;
height: 400px;
}
</style>

<script language="javascript" type="text/javascript">

function OneStrcZeroLength(thelayer){
//note that you must have 'value' in there!!!
var dox = document.getElementById('txtSearch').value.length;
alert(dox); //see what happens if 'value' is removed for proof
if (dox == 0){
thelayer.style.display='none';
}
}

function searchSuggest() {
//nothing to see here
}

</script>

</head>
<body>

<form id="frmSearch">
<input type="text" id="txtSearch" name="txtSearch" alt="Search
Criteria" onkeyup="searchSuggest();"
onkeydown="OneStrcZeroLength(document.getElementBy Id
('search_suggest'));"
autocomplete="off" />

<input type="submit" id="cmdSearch" name="cmdSearch" value="Search"
alt="Run Search" />
<br />
<div id="search_suggest"></div>

</form>

</body>
</html>
Jun 19 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.