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

tracy

Thu, 20 Nov 2008 18:25:16 GMT

hi...this is very simple and exactly what i was looking for. thank you so much for posting it.

quick question: ...i'm trying to use the body.onload code to have everything hidden when the page loads...and i've read your WOM doc and implemented that ...but still not sure how or where to add the body.onload code?

please...some hints?

thanks

lobo235

Thu, 24 Jul 2008 16:12:48 GMT

egordin,

1) It is possible with the other method. You would basically have to do the same thing, break the function up into two parts and add the logic to update the link text.

2) There are ways to do smooth transitions but I have not done much with those so you're better of looking somewhere else with that.

3) They should work in Google Reader just fine but sometimes it takes a while for Google to realize that the feed has been updated. I believe Google Reader only fetches feeds every couple of hours unless it's a site that is updated frequently.

egordin

Thu, 24 Jul 2008 16:00:34 GMT

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!

lobo235

Thu, 24 Jul 2008 15:06:06 GMT

egordin,

Yes, you can have the link text change when the div is hidden or shown. In order to do this you will need to break the toggleDivOL function into two separate functions and add some code to each function to update the link text. I have created an example page that does just that. Please take a look at this example page where you can view the source and see how it could be done.

egordin

Thu, 24 Jul 2008 08:21:10 GMT

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!

djoaniel

Mon, 29 Oct 2007 13:58:52 GMT

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

no more element id fetching.

Sam

Tue, 04 Sep 2007 22:43:38 GMT

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
}
}

lobo235

Tue, 04 Sep 2007 22:28:56 GMT

It looks like your code is headed in the right direction but I am not aware of any cross-browser scripts that would accomplish what you need to do. You may want to try asking your question in a webmaster forum such as http://forums.digitalpoint.com/ or http://www.webmasterworld.com/

Sam

Mon, 03 Sep 2007 16:28:12 GMT

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
}
}

darrenforster99

Fri, 13 Jul 2007 14:29:48 GMT

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