Comments for Showing/Hiding a DIV using the Off-Left Method

I've a few comments about this article, firstly the suggestion to hide the DIV section when it first loads, the ONLOAD function will work except if you have a few images in the DIV section. There is an easier way to hide it at the beginning and that's to use css to hide it as follows:


div#hiddenid
{
position: absolute ;
left: -4000px ;
}


Also I ammended the code a bit for a website I am making so that I could make it appear with an onmouseover event and disappear with an onmouseout event, this modification seperates the hide and show sections into seperate this makes it more object orientated and more flexible with the ways you can use it.


function showDiv ( elemID )
{
var elem = document.getElementById ( elemID ) ;
elem.style.position = 'relative' ;
elem.style.left = '0px' ;
return ( true ) //everythings ok
}

function hideDiv ( elemID )
{
var elem = document.getElementById ( elemID ) ;
elem.style.position = 'absolute' ;
elem.style.left = '-4000px' ;
return ( true ) ; //everythings ok
}

function toggleDivOL( elemID )
{
var elem = document.getElementById ( elemID ) ;
/*returns true if everything is ok*/
return ( ( elem.style.position != 'absolute' ? hideDiv ( elemID ) : showDiv ( elemID ) ) ) ;
}


For an onmouseover/out event you could use the following code:



or if you could still use it the same for toggle

Hi,

I am trying to use this javascript and couple it together with the ability to hide a div if you click off it, but nt hide it if you click on it.

So you open a div that has a form in it. You click in the form and everything is normal. However if you click outside of the form div, it should close.

Do you know of a good cross browser script to allow me to do that? .. I am currently adding onto what you have above with the following. Works in Firefox, but not ie :

/*************************************************************/
/* Catch onbody clicks to initiate certain actions - Sam Allen Aug 07 */
var menuStatus = "closed";
document.onclick = loadEventListener;

// Function to add event listener - see what is clicked
function loadEventListener() {

document.getElementById('locmenu_wrapper').addEventListener("click", stopLooking, false); // if location menu is clicked do nothing
document.getElementById('defaultlocation').addEventListener("click", stopLooking, false); // if location box is clicked do nothing
document.getElementById('container').addEventListener("click", checkMenuStatus, false); // check if the page is clicked anywhere, if it is check menu status
}


function stopLooking(e) // stop looking for inpage click events - stopping page bubbling and capturing
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}

function checkMenuStatus(e) // there is a valid click event now do something
{
if (menuStatus == "opened"){ // if a menu is open
hideDiv('locmenu_wrapper'); // hide this menu div
hideDiv('defaultlocation'); // hide this menu div
stopLooking; // stop looking for inpage click events
}
}

Found a solution that is a good cross browser implementation. Thought I would share it just in case someone else needs it :

/*************************************************************/
/* Catch onbody clicks to initiate certain actions - Sam Allen Aug 07 */
document.onclick = loadEventListener; // Capture every click to fire LoadEventListener
var clickedElement = "MenusClosed"; // set variable to contol shutting menus

function loadEventListener() {
document.getElementById("defaultlocation").onclick = function() { clickedElement = 'defaultlocationMenuClicked';window.setTimeout("clickedElement = 'noMenuClicked'",100);} // If defaultlocation div is clicked set variable and timer new value for closing menus
document.getElementById("defaultlocationLink").onclick = function() { clickedElement = 'defaultlocationMenuClicked';window.setTimeout("clickedElement = 'noMenuClicked'",100);} // If defaultlocationLink is clicked set variable and timer new value for closing menus
document.getElementById("locmenu_wrapper").onclick = function() { clickedElement = 'locmenu_wrapperMenuClicked';window.setTimeout("clickedElement = 'noMenuClicked'",100);} // If location_menu div is clicked set variable and timer new value for closing menus
if (clickedElement == "defaultlocationMenuClicked") { // if defaultlocationMenuClicked
hideDiv('locmenu_wrapper'); // hide this menu div
}
else if (clickedElement == "noMenuClicked"){ // on mouseclick, if no menu is clicked
hideDiv('locmenu_wrapper'); // hide this menu div
hideDiv('defaultlocation'); // hide this menu div
clickedElement = "MenusClosed"; // change status to MenusClosed waiting for menu to open
}
}

very excellent use of css positioning. its probably the simpliest show hide i've seen byfar.

no more element id fetching.

Great Tutorial! Just one question - is it possible to have the link change depending on the state of the div?

What I mean is, can the link text change to HIDE when the div is showing and SHOW when the div is hidden?

Thanks again!

Lobo235,

Thank you so much! I am coding an iPhone interface and this is really helpful.

Three questions:

1) Is this same indicator thing possible with your other method (http://www.netlobo.com/div_hiding.html) too?

2) If it is possible with the other method, is there any way to slow down the transition so that it goes slightly more smoothly?

3) Not really a question but the RSS links for subscribing to these comments don't seem to work with Google Reader. Just thought you should know.

Thanks again for your help. It's immensely useful not only for me but for a lot of people! Keep up the great work!