Link to home
Start Free TrialLog in
Avatar of Forrest_Gump
Forrest_Gump

asked on

close onclick outside the div

at the moment i need to click on X to close the div.
how can it be gone if user will click on some area outside the div or will be pointing out side the div for long time?

http://ilmc.brinkster.net/nogray_timepicker/n.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" src="mootools.v1.11.js"></script>
<script language="javascript" src="nogray_time_picker_min.js"></script>
<script language="javascript">
   window.addEvent("domready", 
      function ()
      {
         for (var tp = 1; tp <= 2; tp++)
         {
            var tp2 = new TimePicker('time' + tp + '_picker', 'time' + tp, 'time' + tp + '_toggler', 
               {
                  format24:true, 
                  lang:{'am':'AM', 'pm':'PM'},
                  startTime:{hour:13, minute:0},
                  onOpen:
                     function()
                     {
                        this.ampm.style.visibility = "hidden";
                        this.lastHour = this.time.hour;
                        this.changes = // [hour, lastHour, newHour]
                        [
                           [0, 11, 12],
                           [23, 12, 11],
                           [11, 0, 23],
                           [12, 23, 0]
                        ];
                        if (this.time.hour >= 12)
                        {
                           this.options.faceImage = "clock_face2.gif";
                           if (!(this.faceImage))
                           {
                              this.faceImage = this.holder.getElementsByTagName("img")[0];
                           }
                           this.faceImage.src = this.options.imagesPath + "/" + this.options.faceImage;
                        }
                     },
                  onChange:
                     function()
                     {
                        for (var index = 0; index < this.changes.length; index++)
                        {
                           if (this.time.hour == this.changes[index][0])
                           {
                              if (this.lastHour == this.changes[index][1])
                              {
                                 this.time.hour = this.changes[index][2];
                                 this.updateAmPm();
                              }
                              break;
                           }
                        }
                        var faceImage = (this.time.hour < 12) ? "clock_face.gif" : "clock_face2.gif";
                        if (this.options.faceImage != faceImage)
                        {
                           this.options.faceImage = faceImage;
                           if (!(this.faceImage))
                           {
                              this.faceImage = this.holder.getElementsByTagName("img")[0];
                           }
                           this.faceImage.src = this.options.imagesPath + "/" + this.options.faceImage;
                        }
                        this.lastHour = this.time.hour;
                     }
               }
            );
         }
      }
   );
</script>
 
<style>
   * 
   {
      font-family:Arial, Helvetica, sans-serif;
      font-size:9pt;
   }
 
   .time_picker_div
   {
      padding:5px;
      border:solid #999999 1px;
      background:#FFFFFF;
   }
</style>
</head>
<body>
   <div onselectstart="return false">
      <input type="text" name="time1" id="time1" /> <a href="#" id="time1_toggler">Open time picker</a>
      <div id="time1_picker" class="time_picker_div"></div>
   </div>
 
   <div onselectstart="return false">
      <input type="text" name="time2" id="time2" /> <a href="#" id="time2_toggler">Open time picker</a>
      <div id="time2_picker" class="time_picker_div"></div>
   </div>
</body>
</html>

Open in new window

Avatar of MMDeveloper
MMDeveloper
Flag of United States of America image

I would wrap the content div inside another div. This 'container' div would be positioned absolutely with a z-index higher than anything else on the page. This container would be positioned to top: 0px and left: 0px and have a width of 100% and a height of 100% (to completely cover the page).

Inside this container div is your content div which will have a z-index of 1 higher than the container div's z-index. Now attach an onclick event listener to the container div to close it all when clicked (dont forget to make the container div become invisible as well (display: none).
Avatar of Forrest_Gump
Forrest_Gump

ASKER

sorry not sure what you mean, can you paste that div line?
ASKER CERTIFIED SOLUTION
Avatar of Lolly-Ink
Lolly-Ink
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
thank you thank you thank you:)

this is my last question on javascript:
https://www.experts-exchange.com/questions/23588799/working-on-Mozila-but-not-on-IE6-what-can-i-do.html
please see if you can help