www.webdeveloper.com
Results 1 to 10 of 10

Thread: Attach event to overlay elements

  1. #1
    Join Date
    Nov 2009
    Posts
    8

    Attach event to overlay elements

    I want to attach event to overlay so tht i can close the overlay on any click in the page, but not if you click on the overlay. (dont close if youclick on the overlay)

    I am usingdocument.body.attachEvent("onclick", closeoverlay), but its not working, this will close the overlay even if you click on the overlay. I want to close the overlay only if there is a click event on anywhere the page except on the overlay.

    Here is the code.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>

    <style type="text/css">

    #newoverlay {
    position: absolute;
    display:none;
    width: 200px;
    height: 55px;
    left:50px;
    top: 50px;
    text-align:center;
    z-index:113;
    border:2px solid #2D5C3D;
    background-color: #8bb093;
    }

    #orderLimitRatesBox {
    position: absolute;
    display:none;
    width: 700px;
    height: 55px;
    left:100px;
    top: 100px;
    text-align:center;
    z-index:113;
    border:2px solid #4F5873;
    background-color: #8bb093;
    padding-top:10px;
    padding-left:1px;

    }

    #orderLimitRatesBox li{
    float:left;
    margin-left: 30px;
    }


    #orderLimitRatesBox li{
    float:left;
    padding: 10px;
    }

    </style>
    </HEAD>

    <script language="JavaScript">

    function openOverlay(){

    var overlayElement = document.getElementById("newoverlay");

    //alert();

    overlayElement.style.display="block";
    overlayElement.attachEvent("onclick",closeoverlay);

    //document.body.attachEvent("onclick",closeoverlay);


    return false;
    }

    function openlink(url){

    var newWin = window.open(url, 'newWin','left=20,top=20,width=800,height=500,toolbar=yes,resizable=yes');
    newWin.focus();

    return false;
    }

    function closeoverlay(){

    var overlayElement = document.getElementById("newoverlay");
    if(overlayElement != null)
    overlayElement.style.display="none";

    return false;

    }




    </script>

    <BODY >
    <div id="mainsection">
    <TABLE>
    <TR>
    <TD><a onclick="openOverlay();"> Test overlay</a></TD>
    <TD></TD>
    </TR>

    </TABLE>

    <div id="newoverlay">
    <ul>
    <li><a href="#" onclick="openlink('http://google.com');"> Google Link</a></li>

    <li><a href="#" onclick="openlink('http://yahoo.com');"> Yahoo Link</a></li>

    </ul>
    </div>

    </div>
    </BODY>
    </HTML>

    Thanks of your help.

  2. #2
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    The key is to query the trigger element that caused the event. You should also know that attachEvent() and detachEvent() are IE-only.

    Code:
    <script type="text/javascript">
    
    function closeoverlay(e) {
    	var trigger = e.target ? e.target : e.srcElement; //only run if trigger is not overlay
    	if (trigger.id != 'overlay') document.getElementById('overlay').style.display = 'none';
    }
    
    if (window.addEventListener)
    document.addEventListener('click', closeoverlay, false);
    else if (window.attachEvent)
    document.attachEvent('onclick', closeoverlay);
    
    </script>
    
    <body>
    <div style="width: 300px; height: 200px; position: absolute; left: 300px; height: 200px; background: #f90;" id="overlay">
    I am the overlay element
    </div>
    </body>
    Last edited by mitya; 01-02-2010 at 02:22 PM.

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    What about a simpler one?:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function closeoverlay(e){
    var target=e?e.target:event.srcElement; // Moz&W3C : IE
    var mydiv=document.getElementById('overlay');
    target!=mydiv?mydiv.style.display='none':null;
    }
    document.onclick=closeoverlay;
    </script>
    </head>
    <body>
    <div style="width: 300px; height: 200px; position: absolute; left: 300px; height: 200px; background: #f90;" id="overlay">
    I am the overlay element
    </div>
    </body>
    </html>

  4. #4
    Join Date
    Nov 2009
    Posts
    8
    basically i have to show overlay when user click on a link (say showOverlay) and i want to attach the event only
    when this overlay is shown. so i attached event in the showoverlay function.

    document.attachEvent('onclick' closeoverlay); //lets assume for IE case

    when i click on showOverlay link, the overlay appears and disappears immidiately.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <style type="text/css">
    
    #overlay {
    position: absolute;
    display:none;
    
    }
    
    </style>
    <script type="text/javascript">
    
    function showOverlay(){
    //alert("inside");
    document.getElementById('overlay').style.display="block";
    //document.onclick=closeoverlay;
    document.attachEvent('onclick', closeoverlay);
    }
    
    function closeoverlay(e){
    var target=e?e.target:event.srcElement; // Moz&W3C : IE
    var mydiv=document.getElementById('overlay');
    target!=mydiv?mydiv.style.display='none':null;
    }
    
    </script>
    </head>
    <body>
    
    <a href="#" onclick="showOverlay();">Show Overlay </a>
    
    <div style="width: 300px; height: 200px; position: absolute; left: 300px; height: 200px; background: #f90;" id="overlay">
    I am the overlay element
    </div>
    </body>
    </html>
    Last edited by Kor; 01-04-2010 at 01:34 PM. Reason: wrap the code [code][/code]

  5. #5
    Join Date
    Nov 2009
    Posts
    8
    Hi Kor,

    Any idea how to fix this issue.

    Thanks

  6. #6
    Join Date
    Nov 2009
    Posts
    8
    Hi,

    Can anyone help me with the above issue.

    Thanks.

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    function showOverlay(){
    var overlay = document.getElementById('overlay');
    overlay.style.display=(overlay.style.display=="none")? "" : "none";
    }
    Code:
    <a href="#" onclick="showOverlay();return false;">Show Overlay </a>
    <div style="display:none; width: 300px; height: 200px; position: absolute; left: 300px; background: #f90;" id="overlay">
    I am the overlay element
    </div>

  8. #8
    Join Date
    Nov 2009
    Posts
    8
    Hi Fang,

    This just displays the overlay and when clicks on the link again it disappears, i want to close the overlay when user clicks anywhere on the page except on the actual overlay.

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Like this?:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function closeoverlay(e){
    var target=e?e.target:event.srcElement; // Moz&W3C : IE
    var mydiv=document.getElementById('overlay');
    var mylink=document.getElementById('show');
    target!=mydiv&&target!=mylink?mydiv.style.display='none':null;
    }
    function showoverlay(){
    document.getElementById('overlay').style.display='block';
    }
    document.onclick=closeoverlay;
    </script>
    </head>
    <body>
    <div style="width: 300px; height: 200px; position: absolute; left: 300px; height: 200px; background: #f90;" id="overlay">
    I am the overlay element
    </div>
    <br>
    <br>
    <a id="show" href="#" onclick="showoverlay();return false">Show div</a>
    </body>
    </html>

  10. #10
    Join Date
    Nov 2009
    Posts
    8
    Hi Kor,

    Thanks, it works i tried event adding document.onclick=closeoverlay; inside the showOverlay() method, so that the event is attached only when the overlay is opened.

    Thanks to everyone.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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