www.webdeveloper.com
Results 1 to 2 of 2

Thread: Overlay and nested divs, turning on and off,

  1. #1
    Join Date
    Mar 2010
    Posts
    281

    Overlay and nested divs, turning on and off,

    Hi,
    I have an overlay div that gets turned on in certain conditions. Very standard stuff, covers the screen, has a semi-trans bg. When the user clicks on it, it turns it off (set's display property to none).

    but contained in the overlay is another div and when the user clicks on that, i don't
    want the overlay and (divs contained therein) and to be turned off. so far i haven't been able to accomplish.

    i tried to circumvent by doing this

    $('#interiorDiv').click(function() { return; });

    i'm sure jQuery can deal with this, no?! does anyone know how to do this?

    big thanks in advance.

  2. #2
    Join Date
    Apr 2012
    Posts
    12
    Hello,
    I believe something like this might be what you want, it checks on the click event of the parent to ensure that the Parent Div actually initiated the click.

    HTML Code:
    <html>
    <head>
    
    </head>
    <body>
    <div id="parentDiv">
    <br />Parent
    <div id="childDiv">Hello I am the child</div>
    <br />Parent
    </div>
    
    </body>
    
    <script>
    
    theParent = document.getElementById("parentDiv");
    theChild = document.getElementById("childDiv");
    if (theParent.addEventListener)
    {
      	theParent.addEventListener('click', clickedParent, false);
    	theChild.addEventListener('click', clickedChild, false);
    }
    else if (theParent.attachEvent)
    {
      	theParent.attachEvent('onclick',clickedParent);
      	theChild.attachEvent('onclick',clickedChild);
    }
    
    
    function clickedParent(e)
    {
    	var targ;
    	if (!e) 
    	{
    		var e = window.event;
    	}
    
    	if (e.target)
    	{
    		targ = e.target;
    	}
    	else if (e.srcElement) //IE
    	{
    		targ = e.srcElement;
    	}
    
    	if (targ.nodeType == 3) // handles a Safari bug
    	{
    		targ = targ.parentNode;
    	}
    
    	if (targ.getAttribute("id") == "parentDiv") {	
    		console.log("I am the parent");
    	}
    }
    
    function clickedChild(e)
    {
    	console.log("I am the child");
    }
    
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles