turning off div display

@ajimenezAug 04.2004

Hi there,

I have a javascript that toggles divs on and off by changing the display values. This is done simply by the onClick event handler via clicking on the text link.

Is there any other way to turning the display to ‘none’ OTHER than by clicking the same text link again? Basically, I’d like the divs to disappear whenever the user clicks anywhere on the page, much like a menu bar of a regular application.

Let me know if you’d like me to post the current script I’m using. Thank you.

to post a comment

JavaScript

13 Comments(s) _↴

@BillyRayAug 04.2004 — #I'd like the divs to disappear whenever the user clicks anywhere on the page[/quote]
Try this for size. I've not tested it, but the logic is sound ? :

document.onclick = function() {
 var divs = document.getElementsByTagName('div');
 for (var loop=0; loop&lt;divs.length; loop++) divs[loop].style.display = 'none';
 }

That should hide all DIVs whenever the page is clicked.

Hope this helps,

Dan

@ajimenezauthorAug 04.2004 — #um...

Wouldn't this hide ALL the divs on the page and not just the specific ones that are being toggled on and off?

Well, I'll try it...

@BillyRayAug 04.2004 — #Wouldn't this hide ALL the divs on the page and not just the specific ones that are being toggled on and off?[/quote]
Yes - But you didn't stipulate that you only wanted certain DIVs turned off.

If you only want to turn certain DIVs off, you need to give us more information about those specific DIVs. For example, if you only want to affect DIVs with a class of "toggle", this would work:

document.onclick = function() {
 var divs = document.getElementsByTagName('div');
 for (var loop=0; loop&lt;divs.length; loop++) {
 if (divs[loop].className == 'toggle') divs[loop].style.display = 'none';
 }
 }

Hope this helps,

Dan

@ajimenezauthorAug 04.2004 — #
Yes - But you didn't stipulate that you only wanted certain DIVs turned off.

If you only want to turn certain DIVs off, you need to give us more information about those specific DIVs.
[/QUOTE]

Well, sorry....

I thought I provided enough information and I did say if needed I can provide any code.

var divs = document.getElementsByTagName('div');
[/QUOTE]
These specific divs are only identified by their unique id's. So I think using the getElementById() will work better.

Anyhoo... here's is the javascript code that I'm using.

[CODE]
  function switchMenu(id) {
 if(document.getElementById) {
 var subNavDiv = document.getElementById(id);
 var ar = document.getElementById("nav").getElementsByTagName("div");
 if(subNavDiv.style.display != "block") {
 for (var i=0; i<ar.length; i++) {
 ar[i].style.display = "none";
 }
 subNavDiv.style.display = "block";
 }
 else {
 subNavDiv.style.display = "none";
 }
 }
 }
 [/CODE]

The function is applied to a series of text links. Whenever a link is clicked, a div that is associated with that link appears. To make it disappear, you can click on that same link OR click one of those other links that also have their own corresponding divs, by which would also appear or disappear. Like I noted before, functionally works just like a regular menubar. Except for the 'clicking anywhere' to make the menu go away... which is basically what I'm trying to achieve.

Does all this make sense? I appreciate your help on this, BillyRay.

@BillyRayAug 04.2004 — #Aaah - here's a thought... Try putting an onblur event on the A tag that hides the DIV again... something like this:

<a href="url" onclick="switchMenu('foo');" onblur="hideMenu('bar');">...</a>
That might be a better (and definately more efficient) way of doing things than my previous suggetion ?

Hope this helps,

Dan

@BillyRayAug 04.2004 — #Heh - oops - I just realised you used the same function to show and hide, so my code should have read:

<a href="url" onclick="switchMenu('foobar');" onblur="switchMenu('foobar');">...</a> :o

Dan

@ajimenezauthorAug 04.2004 — #YAY!! That worked!!

Well... almost.

It works fine if you click anywhere to make the div disappear. But if you click on the link itself to make it disappear, i think it throws it off somehow. If you click on the link to make it disappear, then clicking anywhere else the div will appear! How crazy is that?!?! Anyway around this??

(man... it's been a long day :o)

By the way... I want to point you towards another script I found that basically functions the same but adds some more functionality. One of the issues we have is that when these divs show up, and there happens to be drop-down select menus on the page, those drop-down select menus appear in front of the divs, partially hiding them. This is obviously an IE issue. And from what I've learned it's more of application/operating issue than just a mere browser issue. This javascript seems to fix this problem by manipulating an iframe that's placed in the page itself.

If anyone can, can you have a looksee and let me know if this is a good workaround?

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21024535.html

Thanks for all your help BillyRay! Hey if you post one more time, you'll be at the century mark ? ?!

@BillyRayAug 04.2004 — #Aaah - I forgot about the toggle being executed twice. Try something like this instead:

&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 function switchMenu(id) {
 if (document.getElementById) {
 var subNavDiv = document.getElementById(id);
 subNavDiv.style.display = (subNavDiv.style.display == 'block') ? 'none' : 'block';
 }
 }
 
 <i>	</i>	function hideMenu(id) {
 <i>	</i>		if (document.getElementById) document.getElementById(id).style.display = 'none';
 <i>	</i>	}
 <i>	</i>//--&gt;
 <i>	</i>&lt;/script&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;a href="" onclick="switchMenu('foo'); return(false);" onblur="hideMenu('foo');"&gt;link 1&lt;/a&gt;&lt;br /&gt;
 &lt;a href="" onclick="switchMenu('bar'); return(false);" onblur="hideMenu('bar');"&gt;link 2&lt;/a&gt;&lt;br /&gt;
 &lt;div id="foo" style="display:none;"&gt;div 1&lt;/div&gt;
 &lt;div id="bar" style="display:none;"&gt;div 2&lt;/div&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

Hope this helps,

Dan

@ajimenezauthorAug 05.2004 — #This is working beautifully now.

Thanks again, Dan!

@MontyAug 05.2004 — #What does onblur do?

@BillyRayAug 05.2004 — #onblur is the opposite of onfocus. You might say it should have been called "onunfocus" ?

Dan

@MontyAug 05.2004 — #cool thanks. im kinda new in java scripting so i dont know all that much

@ajimenezauthorAug 06.2004 — #Hi, back again.

Something I just noticed... I have text links on these divs that appear and disappear. Apparently, I can't click on these links to go to a different destination. As clicking anywhere else, all that happens is that divs disappears.

Is this happening because of the onBlur handler? Can I modify the javascript to change the behavior whenever a text link is clicked inside one of these divs?

Any input is appreciated. Thanks.

Also in #JavaScript _↴

Please somebody help me...how to Create Like Yahoomail Hotmail Plz Help Me Plz Have to click 2 times to trigger event

Success!

Help @ajimenez spread the word by sharing this article on Twitter...

Tweet This

turning off div display

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

turning off div display

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴