Show and Hidden

**baltazhor200401** · 11-22-2006, 08:13 AM

Lets say i have a menu 'search'. when i clik that menu i want to show a table with searching form (textbox and submit button). in javascript how to do that. using document.getElementById.style.display="none/show", but how ?

Please Tell Me
I really need your answer

**codeexploiter** · 11-22-2006, 08:36 AM

Code:

document.getElementById('search').style.visibility = "visible";

The above code will do that.

Search is the id of the container which you want to display.

**mastergeek70** · 11-22-2006, 05:12 PM

See if this is kind of what you had in mind:

Code:

<html><head>
<script type="text/javascript">

function toggleDisplay(element) {
    var style;

    if (typeof element == 'string')
        element = document.getElementById ? document.getElementById(element) : null;
    if (element && (style = element.style))
        style.display = (style.display == 'none') ? 'block' : 'none';
}

</script> 
</head><body>

<p style="cursor:hand;" onclick="toggleDisplay('divSearch');">Search</p>

<div id="divSearch" style="position:absolute;left:75px;border:solid 1px black;width:250px;height:100px;display:none;">
<center><br />
    Enter Your Search Criteria:
    <textarea id="TextArea1" cols="20" rows="2"></textarea>
    <input id="Button1" type="button" value="Submit" />
</center>
</div>

</body></html>

**mwinter** · 11-22-2006, 09:22 PM

Originally Posted by mastergeek70

The language attribute has been deprecated for years. Use the type attribute, instead:

HTML Code:

<script type="text/javascript">

<!-- Hide from old browsers

That hasn't been necessary for years, either. No "old browsers" are old enough not to understand a script element, whether they can support client-side scripts or not. The same applied to embedded style sheets.

function toggle(id) {

var b = document.getElementById(id);

No feature detection?

Code:

function toggleDisplay(element) {
    var style;

    if (typeof element == 'string')
        element = document.getElementById ? document.getElementById(element) : null;
    if (element && (style = element.style))
        style.display = (style.display == 'none') ? 'block' : 'none';
}

<a href="javascript: toggle('divSearch');">Search</a>

Don't use the javascript pseudo-scheme to do that. It's not only bad form for users that don't have scripting enabled (or script-capable browsers, for that matter), but the pseudo-scheme causes problems in MSIE - and not unreasonably.

If important features are to be hidden and shown using scripting, then scripting should be used to hide them in the first place. Do not use a CSS rule, in-line or in an embedded or linked style sheet.

<div style="position:absolute;left:75;

75 what, exactly?

border-style:solid;border-color:black;border-width:1px;

That's quite a waste:

border: solid 1px black;

width:250;height:100;

250 what? 100 what?

The center element? Good grief...

<br />

Pseudo-XHTML markup, coupled with

</BODY>

upper-case tag names. That's really not a good example to set to anyone, let alone someone asking for help.

Mike

**mastergeek70** · 11-23-2006, 03:57 AM

There's got to be something better you could do with all that time on your hands? Perhaps therapy?

>The language attribute has been deprecated for years. Use the type attribute, instead:

Deprecated yes, but still widely in use and accepted by all browsers. As a matter of fact, hundreds of examples of Javascript code on THIS board can be found using this declaration (random example -> http://www.dynamicdrive.com/dynamici...ounceimage.htm). You can even still find this declaration being used out on W3Schools, at (http://www.w3schools.com/htmldom/met...etinterval.asp). Trust me, it ain't a big deal!

>That hasn't been necessary for years, either. No "old browsers" are old enough not to understand a script element, whether they can support client-side scripts or not. The same applied to embedded style sheets.

True, but no consequence and purely preference.

>Don't use the javascript pseudo-scheme to do that. It's not only bad form for users that don't have scripting enabled (or script-capable browsers, for that matter), but the pseudo-scheme causes problems in MSIE - and not unreasonably.

Yes, it would be better to use an onclick event. But I had just answered another post before this one where somebody had posted this exact example using the toggle function, and I literally copied and pasted their code to this message to try and save time. Like I said, it was a 5 minute reply and I was just trying to get the flavor across.

>75 what, exactly? width:250;height:100;

By default, if you dont specify "px", most browsers will default to pixels. I am used to doing it this way because we have an IE-only environment at work. This may not work with Firefox though. Just a habit, I was in a hurry to respond.

>No feature detection?

No, not necessary for just a quick example

>That's quite a waste:

Brevity is preference. If it looks prettier to you in shorthand, go for it.

>The center element? Good grief...

Yeah, it's deprecated in HTML 4.0 . Unfortunately text-align and margin-left/right to auto is not supported consistently in all browsers, so I opt for what I know is.

>upper-case tag names.

Another case of inconsequential and preferential (and not worth even bringing up, but I am guessing you were hard up for finding anything significant)

**mwinter** · 11-24-2006, 12:14 AM

Originally Posted by mastergeek70

There's got to be something better you could do with all that time on your hands?

If you thought my post such a wasted effort, why did you respond to it?

Perhaps therapy?

Insults already?

The language attribute has been deprecated for years. Use the type attribute, instead:

Deprecated yes, but still widely in use and accepted by all browsers.

What sort of argument is that? "There's a 'right way' and a 'wrong way', both work, but I'd prefer the wrong way?"

Browsers accept many things, both as a result of error correction mechanisms and attempts at backwards-compatibility, but that is not a reason for using those features when they are trivial to avoid.

As a matter of fact, hundreds of examples of Javascript code on THIS board can be found using this declaration ...

And? I don't maintain this site, and I've already pointed that out in the past.

This is similar to your previous "point". Many sites use poor markup, employ fragile designs, and write bad code (client- and server-side), but not of these are necessary or sensible. What I often wonder is, why do so many people think that this is something to emulate?

You can even still find this declaration being used out on W3Schools, the standards consortium ...

If you actually wish to be convincing, it helps to get your facts straight. The W3C is in no way related to W3Schools, the latter being a private development and consultancy company that produces somewhat questionable tutorials. They aren't even W3C members, let alone representative of the consortium.

[markup comments in script element content] That hasn't been necessary for years, either.

True, but no consequence and purely preference.

You posted code that demonstrated a (rather poor) attempt at XHTML. That should be reason enough to avoid it for anyone that understands XML. Granted, serving XHTML as HTML (dubious as that is) negates those concerns, but if such a document was migrated to "real" XHTML one may get a nasty shock. It also does a disservice to readers to perpetuate what is essentially myth.

>75 what, exactly? width:250;height:100;

By default, if you dont specify "px", most browsers will default to pixels.

In "Quirks" rendering mode, some might. Others, including any operating under "Standards" mode will ignore the declaration. Any non-zero length value in CSS must have a unit specifier.

No feature detection?

No, not necessary for just a quick example

Do you realistically expect the OP to add it?

The center element? Good grief...

Yeah, it's deprecated in HTML 4.0 . Unfortunately text-align and margin-left/right to auto is not supported consistently in all browsers, so I opt for what I know is.

Using margins has ample support.

upper-case tag names.

Another case of inconsequential and preferential (and not worth even bringing up, but I am guessing you were hard up for finding anything significant)

You omitted the part before that where I commented on your attempt to use XML-like syntax. Given that XML is case-sensitive, I find it hard to reconcile the two.

Mike

**mastergeek70** · 11-25-2006, 07:48 PM

If you spent a quarter of the amount of time trying to help answer questions for needing people as you do trying to nit-pick posts, you'd actually be a useful member of this forum. Sadly, you have nothing to offer.

Your replies are useless and non-constructive. Criticizing preferences is a pretty weak argument and shows desperation. I feel that you have an major insecurity and seek approval of people, hoping to appear superior by finding any possible fault in others. This is a bad quality you have, my friend.

The best you can do is whine about ways that you might have done it if you had your own set of testicles to try. There's a fine line towards meticulously following exact standards by the book and practical programming in the real world, perhaps you will learn the balance some day. I meet more stringent standards when it matters at work, not when I am writing quick 3-4 min replies on an internet message board. These forums are not bound by any rules governing the exact and precise use of all current standards, nor are they intended to be policed by <Radio Edit> like you seeking to enforce and reprimand any such person who steps out of line by using a deprecated tag.

**Twey** · 11-25-2006, 09:08 PM

Criticizing preferences is a pretty weak argument and shows desperation.

Everything is a preference. No preferences were questioned here without ample explanation as to why the habit in question were better avoided.

I feel that you have an major insecurity and seek approval of people, hoping to appear superior by finding any possible fault in others. This is a bad quality you have, my friend.

I would also have corrected that code. Correction only benefits the corrected; by making notes on where your code was lacking, Mike helped you. There was no offence intended.

There's a fine line towards meticulously following exact standards by the book and practical programming in the real world, perhaps you will learn the balance some day.

In 99% of cases, both can be followed completely. There is no need for a balance.

The best you can do is whine about ways that you might have done it if you had your own set of testicles to try.

Mike quite frequently writes large scripts and entire demo pages. I find your love for ad hominem insults tiresome.

**mastergeek70** · 11-26-2006, 05:47 AM

Originally Posted by Twey

Everything is a preference. No preferences were questioned here without ample explanation as to why the habit in question were better avoided.I would also have corrected that code. Correction only benefits the corrected; by making notes on where your code was lacking, Mike helped you. There was no offence intended.In 99% of cases, both can be followed completely. There is no need for a balance.Mike quite frequently writes large scripts and entire demo pages. I find your love for ad hominem insults tiresome.

No, Mike didn't help me. Actually, if he would have asked me politely to review and correct the code, I'd have done it. You'll notice by review, that didn't happen. As such, your biased defense is unnecessary. You may both be high posters in the forums, but it doesn't equate to ownership or policing on your part. If someone posts a code example that could be done differently, then by all means correct it yourself if you don't like it and offer it as an improved version. It isn't going to benefit ANYONE when you guys gang up on someone donating their time and knowledge for free to jump on them and beat them down for trying to help. It's actually quite junvenile. That's NOT the spirit of this forum or this website. Try kindness first, we're all here to lend a helping hand and try to offer our knowledge and experience. Set the ostentatious pretension aside, and humble yourself (you're not that great).

**Twey** · 11-26-2006, 12:07 PM

No, Mike didn't help me.

He did, or at least believed he did. You posted poor-quality code; it's a reasonable assumption that you didn't realise it was of poor quality. If you did realise the problems with it but posted it anyway, that's an entirely different matter: posting bad code (especially when it looks as if it's a finished product, as here, rather than a code snippet) will quite often not help at all; the OP will assume that it's of good quality and use it, only to run into problems later.

Actually, if he would have asked me politely to review and correct the code, I'd have done it. You'll notice by review, that didn't happen.

No, he all but did it for you, meticulously pointing out each of the areas in which it could have been improved.

If someone posts a code example that could be done differently, then by all means correct it yourself if you don't like it and offer it as an improved version.

Mike did so. He offered improvements on each area of the code where it was certain as to what you had intended. He didn't, for example, correct the pseudo-XHTML or upper-case tag names, since if you meant to use HTML one would have been valid, and if you meant to use XHTML the other would have been. Here we can see where he has rewritten your function:

Code:

function toggleDisplay(element) {
    var style;

    if (typeof element == 'string')
        element = document.getElementById ? document.getElementById(element) : null;
    if (element && (style = element.style))
        style.display = (style.display == 'none') ? 'block' : 'none';
}

(although I'd make a further change to that and use an empty string rather than "block", since one can't be certain that the element was originally a block-level element).

It isn't going to benefit ANYONE when you guys gang up on someone donating their time and knowledge for free to jump on them and beat them down for trying to help.

Sorry, are we reading the same thread? The only one to beat people down here is you. You posted bad code; Mike corrected it; you presumably hated the thought that somebody might know more on a subject than you and started having tantrums and insulting him.

Try kindness first, we're all here to lend a helping hand and try to offer our knowledge and experience.

Just as Mike did.

Set the ostentatious pretension aside, and humble yourself (you're not that great).

... the hell?