Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    date & time picker issues: form elements show above div-style popup

    Hi,

    I'm probably asking way too much now, but I thought I should give it a try!

    I have a page with 2 scripts, a datepicker and a timepicker, both pops up in div-style.

    They seems to work fine, but there are a view things I want to change, but don't know how.

    • They both appear under the form-element <select>
    • After popping up the timepicker, the popup must also disappear when clicking outside the popup (like the datepicker). Now the popup only disappears when selecting a time.
    • Although the timpicker works o.k., it causes an js error ("object required") after poping up



    Since the example page code is too long I have to link it to a place in my website:

    http://www.3dpartij.nl/date-timepicker.htm



    Maybe someone can give it a try?
    (Glenn, you helped me out before , you see a challenge here?


    Thanks in advance,

    Nils

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    I can tackle one of these I think

    You say that the pop-up divs show up below your select elements.

    This ONLY happens in IE, you must browser detect for it, and you must use some javascript code to fix this (efficiently anyway).

    Select elements are drawn using a separate z-index because IE uses the select boxes inherent in the windows. They basically exist in their own little world, and they punch through everything except other windows. In order to fix this, you must put another window over the select boxes, which can be done using an iframe in your popup.

    So what you need to do is, create a new div, put an iframe in there (set the location to about:blank), and then put absolutely position your pop-up inside that div (not the iframe).

    The reason you should do this with browser-detecting javascript is that bringing up that iframe takes a good amount of time, and is unnecessarily slow, especially if you don't need it, which you don't in non-ie browsers.

    It's a hassle, but if you have some decent OO in your javascript, and a good handle on your elements, adding the iframe shim shouldn't be too big of a deal. If you need sample code, ask, and I'll try to pull up some of my previous work on it.

    As for the rest of your questions, hopefully someone else has more time for you.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Zwolle, The Netherlands
    Posts
    1,120
    Thanks
    2
    Thanked 31 Times in 31 Posts
    another way of doing this is to hide the select whenever the popup opens. unhide it when the popup closes
    I am the luckiest man in the world

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Heh, right sorry.

    That way works great, and is a lot faster, as long as you know exactly where your date picker is being deployed.

    My solution came from work on a date picker that was to be deployed in a lot of different places, some we didn't have control over, so we couldn't ensure the boxes would be hidden.

  • #5
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi there, Beagle and Roelf,

    First of all, thanks for replying!

    To be honest the code in my example is not mine. I just "borrowed" it
    I'm not that good in understanding javascripting.

    After all, I think it's better to split the code in 2 (1. datepicker, 2. timepicker)

    When I look at the code of the timepicker, as far as I can see it already covers the "hide the selectbox" part. Only it doesn't work!

    To be honest (again) I'm not to crazy about the solution of "hiding" & "showing". I prefer the option of just showing the "div" popup above the selectbox.

    As I said, I shortened the code:
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    	<title>Untitled</title>
     
     <script type="text/javascript" language="javascript">
    	var imagePath='../gfx/';
    	
    	var ie=document.all;
    	var dom=document.getElementById;
    	var ns4=document.layers;
    	var bShow=false;
    	var textCtl;
    
    	function setTimePicker(t) {
    		textCtl.value=t;
    		closeTimePicker();
    	}
    
    	function refreshTimePicker(mode) {
    		
    		if (mode==0)
    			{ 
    				suffix=""; 
    			}
    		else
    			{ 
    				suffix=""; 
    			}
    
    		sHTML = "<table border=0 cellpadding=0 cellspacing=0><tr><td><table border=0 cellpadding=0 cellspacing=0 bgcolor='#ffffff'>";
    		for (i=0;i<=11;i++) {
    
    			sHTML+="<tr align=right>";
    
    
    		if (mode==0)
    			{ 
    			if (i<=9) {
    				hr = "0" + i;
    			}
    			else {
    				hr=i;
    			}	
    			}
    		else
    			{ 
    				hr=i+12;
    			}
    
    
    
    
    
    			for (j=0;j<4;j++) {
    				sHTML+="<td style='padding-left:4;padding-right:4;cursor:hand;border=\"solid 1px #ffffff\"' onclick='setTimePicker(\""+ hr + ":" + padZero(j*15) + " " + suffix + "\")'><a onmouseover='this.style.color=\"#b22222\";' onmouseout='this.style.color=\"\"' style='text-decoration=none' href='javascript:setTimePicker(\""+ hr + ":" + padZero(j*15) + " " + suffix + "\")'>" + hr + ":"+padZero(j*15) + suffix + "</a></td>";
    			}
    
    			sHTML+="</tr>";
    		}
    		sHTML += "</table></td></tr></table>";
    		document.getElementById("timePickerContent").innerHTML = sHTML;
    	}
    
    	if (dom){
    		document.write ("<div id='timepicker' style='z-index:+999;position:absolute;visibility:hidden;'><table style='border-width:1px;border-style:solid;border-color:#c5c5c5' bgcolor='#ffffff' cellspacing=0 cellpadding=0><tr><td><table border=0 cellpadding=1 cellspacing=1 width='100%'><tr bgcolor='#ECE9ff'><td align='center' width='50%'><a onmouseover='this.style.color=\"#b22222\";' onmouseout='this.style.color=\"\"' style='text-decoration=none' href='javascript:refreshTimePicker(0);'>A.M.</a></td><td align='center' width='50%'><a onmouseover='this.style.color=\"#b22222\";' onmouseout='this.style.color=\"\"' style='text-decoration=none' href='javascript:refreshTimePicker(1);'>P.M.</a></td></tr></table></td></tr><tr><td colspan=2><span id='timePickerContent'></span></td></tr></table></div>");
    		refreshTimePicker(0);
    	}
    
    	var crossobj=(dom)?document.getElementById("timepicker").style : ie? document.all.timepicker : document.timepicker;
    	var currentCtl
    
    	function selectTime(ctl,ctl2) {
    		var leftpos=21
    		var toppos=-17
    
    		textCtl=ctl2;
    		currentCtl = ctl
    		currentCtl.src=imagePath + "clock.gif";
    
    		aTag = ctl
    		do {
    			aTag = aTag.offsetParent;
    			leftpos	+= aTag.offsetLeft;
    			toppos += aTag.offsetTop;
    		} while(aTag.tagName!="BODY");
    		crossobj.left =	ctl.offsetLeft	+ leftpos 
    		crossobj.top = ctl.offsetTop +	toppos + ctl.offsetHeight +	2 
    		crossobj.visibility=(dom||ie)? "visible" : "show"
    		hideElement( 'SELECT', document.getElementById("calendar") );
    		hideElement( 'APPLET', document.getElementById("calendar") );			
    		bShow = true;
    	}
    
    	// hides <select> and <applet> objects (for IE only)
    	function hideElement( elmID, overDiv ){
    		if( ie ){
    			for( i = 0; i < document.all.tags( elmID ).length; i++ ){
    				obj = document.all.tags( elmID )[i];
    				if( !obj || !obj.offsetParent ){
    						continue;
    				}
    				  // Find the element's offsetTop and offsetLeft relative to the BODY tag.
    				  objLeft   = obj.offsetLeft;
    				  objTop    = obj.offsetTop;
    				  objParent = obj.offsetParent;
    				  while( objParent.tagName.toUpperCase() != "BODY" )
    				  {
    					objLeft  += objParent.offsetLeft;
    					objTop   += objParent.offsetTop;
    					objParent = objParent.offsetParent;
    				  }
    				  objHeight = obj.offsetHeight;
    				  objWidth = obj.offsetWidth;
    				  if(( overDiv.offsetLeft + overDiv.offsetWidth ) <= objLeft );
    				  else if(( overDiv.offsetTop + overDiv.offsetHeight ) <= objTop );
    				  else if( overDiv.offsetTop >= ( objTop + objHeight + obj.height ));
    				  else if( overDiv.offsetLeft >= ( objLeft + objWidth ));
    				  else
    				  {
    					obj.style.visibility = "hidden";
    				  }
    			}
    		}
    	}
    		 
    	//unhides <select> and <applet> objects (for IE only)
    	function showElement( elmID ){
    		if( ie ){
    			for( i = 0; i < document.all.tags( elmID ).length; i++ ){
    				obj = document.all.tags( elmID )[i];
    				if( !obj || !obj.offsetParent ){
    						continue;
    				}
    				obj.style.visibility = "";
    			}
    		}
    	}
    
    	function closeTimePicker() {
    		crossobj.visibility="hidden"
    		showElement( 'SELECT' );
    		showElement( 'APPLET' );
    		currentCtl.src=imagePath + "clock.gif"
    	}
    
    	document.onkeypress = function hideTimePicker1 () { 
    		if (event.keyCode==27){
    			if (!bShow){
    				closeTimePicker();
    			}
    		}
    	}
    
    //	function isDigit(c) {
    //		return ((c=='0')||(c=='1')||(c=='2')||(c=='3')||(c=='4')||(c=='5')||(c=='6')||(c=='7')||(c=='8')||(c=='9'))
    //	}
    
    	function isNumeric(n) {
    		
    		num = parseInt(n,10);
    
    		return !isNaN(num);
    	}
    
    	function padZero(n) {
    		v="";
    		if (n<10){ 
    			return ('0'+n);
    		}
    		else
    		{
    			return n;
    		}
    	}
    
    
     
     </script>
    </head>
    <body>
    
    
       <table border="1" cellspacing="1" cellpadding="1">
         <form action="" method="post" name="frm_admin">
          <tr>
           <td>
            <input style="width:50px;text-align:center;" name="fld_start_time" id="fld_start_time" type="text" value="" size="8" maxlength="8">
            <a href="#"  OnClick="selectTime(this,fld_start_time)">pick starttime</a>
           </td>
          </tr>
          <tr>
          	<td>
            <select name="fld_country_id" style="width:400px;">
        							<option value="1" >Netherlands</option>
        							<option value="2" >Other ...</option>
            </select>
           </td>
          </tr>
         </form>
       </table>
    </body>
    </html>
    Roelf, you see that your solution is already in there? But not working?
    Beagle, can you give me a closer idea where to put your suggested solution?

    Thanks,

    Nils

  • #6
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    crap double-posted
    Last edited by Beagle; 03-07-2006 at 10:03 PM.

  • #7
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Ok, please take this opportunity to make this code your own in some way. I would recommend getting both the hide/show and the iframe shim to work. Use this experience to gain some knowledge and insight in javascript...

    ...cuz that code is not fun.

    if (dom){
    document.write ("<div id='timepicker'

    You'll need to add a second div inside the time picker div, positioned absolutely using the style attribute. Then, before the second div, inside the first div, you'll need an <iframe src="about:blank"></iframe> and that will need to have the necessary height and width to fully cover the area of the time picker:

    <div id='timepicker'...><iframe src="about:blank" style="height: 5px;width: 5px;"></iframe><div id='innerTimePicker'>ALL THE STUFF INSIDE</div></div>

    Good luck with this, the code you posted is unorganized and hard to follow. I hope you get either the shim or the hide/show functions working. Like I said, play with this a bit and increase your understanding. Feel free to ask what specific lines of code do, and ask about how to make them better (first provide what you think and what you believe would be an improvement, it'll go better that way)

  • #8
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Beagle,

    You're right. I had to play with it more. It was too easy to putting it on this forum and hoping that somebody should fix it. Won't do that again.

    I've gone through the script more thoroughly and put away all the stuff what wasn't necessary. Also put comments to make sure what it does (what I think it does!).

    Since I want to go for your iframe option I tried to put it in. Unfortunately it doesn't work yet. Did I misunderstood it?

    If you don't mind I put my cleaned code again, with your suggestion.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Timepicker Example</title>
     
    <script type="text/javascript" language="javascript">
    	var ie=document.all;
    	var dom=document.getElementById;
    	var textCtl;
    
    // sets the time and put it in the field, also hides the div popup
    	function setTimePicker(t) {
    		textCtl.value=t;
    		closeTimePicker();
    	}
    
     
     // toggling between A.M & P.M. : gives this js error "Expected ')'" only in IE. Not sure where/why it happens, but it doesn't influence the function
    	function refreshTimePicker(mode) {
    		sHTML = "<table><tr><td><table border=1>";
    		for (i=0;i<=11;i++) {
    			sHTML+="<tr align=right>";
     		if (mode==0)	{ 
    			 if (i<=9) {
    				 hr = "0" + i;
    			 }
    			 else {
    				 hr=i;
    			 }	
    			}
    		else	{ 
    				hr=i+12;
    			}
    
    			for (j=0;j<4;j++) {
    				sHTML+="<td onclick='setTimePicker("+ hr + ":" + padZero(j*15) + "\")'><a href='javascript:setTimePicker(\""+ hr + ":" + padZero(j*15) + "\")'>" + hr + ":"+padZero(j*15) + "</a></td>";
    			}
    
     		sHTML+="</tr>";
    		}
    		sHTML += "</table></td></tr></table>";
    		document.getElementById("timePickerContent").innerHTML = sHTML;
    	}
    
    	if (dom){
    		document.write ("<div id='timepicker' style='z-index:+999;position:absolute;visibility:hidden;'><iframe src='about:blank' style='height: 5px;width: 5px;' ></iframe><div id='innerTimePicker'><table bgcolor='#FFFFFF' border=1><tr><td><table border=1 width='100%'><tr><td align='center' width='50%'><a href='javascript:refreshTimePicker(0);'>A.M.</a></td><td align='center' width='50%'><a href='javascript:refreshTimePicker(1);'>P.M.</a></td></tr></table></td></tr><tr><td colspan=2><span id='timePickerContent'></span></td></tr></table></div></div>");
    		refreshTimePicker(0);
    	}
    
    	var crossobj=(dom)?document.getElementById("timepicker").style : ie? document.all.timepicker : document.timepicker;
    
    	
     // function to fire up the div-popup
     function selectTime(ctl,ctl2) {
    		var leftpos=21
    		var toppos=-17
    		textCtl=ctl2;
    		aTag = ctl
    		do {
    			aTag = aTag.offsetParent;
    			leftpos	+= aTag.offsetLeft;
    			toppos += aTag.offsetTop;
    		}
      while(aTag.tagName!="BODY");
    		crossobj.left =	ctl.offsetLeft	+ leftpos 
    		crossobj.top = ctl.offsetTop +	toppos + ctl.offsetHeight +	2 
    		crossobj.visibility=(dom||ie)? "visible" : "show"
    
    	}
    
     // hides the div-popup
    	function closeTimePicker() {
    		crossobj.visibility="hidden"
    	}
    
     
    // I'm not sure where tot put this, but it must hides the div-popup when clicking outside the div-popup
    //function autoHide(){
    // this.autoHideEnabled=true;
    //}
    
    
    // only adds an extra zero when time in minutes is below 10
    function padZero(n) {
    	if (n<10){ 
    		return ('0'+n);
    	}
    	else	{
    		return n;
    	}
    }
    
    
     
     </script>
    </head>
    <body>
    
    
       <table border="1" cellspacing="1" cellpadding="1">
         <form action="" method="post" name="frm_admin">
          <tr>
           <td>
            <input name="fld_start_time" id="fld_start_time" type="text" value="">
            <a href="" OnClick="selectTime(this,fld_start_time);return false;">pick starttime</a>
           </td>
          </tr>
          <tr>
          	<td>
            <select name="fld_country_id">
        							<option value="1" >This is the first option of the dropdownlist</option>
        							<option value="2" >Other ...</option>
            </select>
           </td>
          </tr>
         </form>
       </table>
    </body>
    </html>

  • #9
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Additional:

    If I change the width & height of the iframe then the iframe pops up above the selectbox but also pushes the div-popup under the iframe.
    Is it possible to get the div-popup into the iframe?

  • #10
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi again,

    As far as I can see, I got this thing working, remains 2 issues:

    1. a js error when I call the function refreshTimepicker;
    toggling between A.M & P.M. : gives this js error "Expected ')'" only in IE. Not sure where/why it happens, but it doesn't influence the function

    2. I'm trying to close the popup div when selecting outside the div. any suggestions? (I'm still trying myself)

    here is my new code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Timepicker Example</title>
     
    <script type="text/javascript" language="javascript">
    	var ie=document.all;
    	var dom=document.getElementById;
    	var textCtl;
    
    // sets the time and put it in the field, also hides the div popup
    	function setTimePicker(t) {
    		textCtl.value=t;
    		closeTimePicker();
    	}
    
     
     // toggling between A.M & P.M. : gives this js error "Expected ')'" only in IE. Not sure where/why it happens, but it doesn't influence the function
    	function refreshTimePicker(mode) {
    		sHTML = "<table border=1 width=100%>";
    		for (i=0;i<=11;i++) {
    			sHTML+="<tr align=right>";
     		if (mode==0)	{ 
    			 if (i<=9) {
    				 hr = "0" + i;
    			 }
    			 else {
    				 hr=i;
    			 }	
    			}
    		else	{ 
    				hr=i+12;
    			}
    
    			for (j=0;j<4;j++) {
    				sHTML+="<td onclick='setTimePicker("+ hr + ":" + padZero(j*15) + "\")'><a href='javascript:setTimePicker(\""+ hr + ":" + padZero(j*15) + "\")'>" + hr + ":"+padZero(j*15) + "</a></td>";
    			}
    
     		sHTML+="</tr>";
    		}
    		sHTML += "</table>";
    		document.getElementById("timePickerContent").innerHTML = sHTML;
    	}
    
    	if (dom){
    		document.write ("<div id='timepicker' style='position:absolute;visibility:hidden;'><iframe src='about:blank' style='height:350px;width:200px;position:absolute;'></iframe><div id='innerTimePicker' style='width:200;height:200;position:absolute;'><table bgcolor='#FFFFFF' border=1 width=200><tr><td><table border=1 width='100%'><tr><td align='center' width='50%'><a href='javascript:refreshTimePicker(0);'>A.M.</a></td><td align='center' width='50%'><a href='javascript:refreshTimePicker(1);'>P.M.</a></td></tr></table></td></tr><tr><td colspan=2><span id='timePickerContent'></span></td></tr></table></div></div>");
    		refreshTimePicker(0);
    	}
    
    	var crossobj=(dom)?document.getElementById("timepicker").style : ie? document.all.timepicker : document.timepicker;
    
    	
     // function to fire up the div-popup
     function selectTime(ctl,ctl2) {
    		var leftpos=21
    		var toppos=-17
    		textCtl=ctl2;
    		aTag = ctl
    		do {
    			aTag = aTag.offsetParent;
    			leftpos	+= aTag.offsetLeft;
    			toppos += aTag.offsetTop;
    		}
      while(aTag.tagName!="BODY");
    		crossobj.left =	ctl.offsetLeft	+ leftpos 
    		crossobj.top = ctl.offsetTop +	toppos + ctl.offsetHeight +	2 
    		crossobj.visibility=(dom||ie)? "visible" : "show"
    
    	}
    
     // hides the div-popup
    	function closeTimePicker() {
    		crossobj.visibility="hidden"
    	}
    
     
    // I'm not sure where tot put this, but it must hides the div-popup when clicking outside the div-popup
    //function autoHide(){
    // this.autoHideEnabled=true;
    //}
    
    
    // only adds an extra zero when time in minutes is below 10
    function padZero(n) {
    	if (n<10){ 
    		return ('0'+n);
    	}
    	else	{
    		return n;
    	}
    }
    
    
     
     </script>
    </head>
    <body>
    
    
       <table border="1" cellspacing="1" cellpadding="1">
         <form action="" method="post" name="frm_admin">
          <tr>
           <td>
            <input name="fld_start_time" id="fld_start_time" type="text" value="">
            <a href="#" OnClick="selectTime(this,fld_start_time);return false;">pick starttime</a>
           </td>
          </tr>
          <tr>
          	<td>
            <select name="fld_country_id">
        							<option value="1" >This is the first option of the dropdownlist</option>
        							<option value="2" >Other ...</option>
            </select>
           </td>
          </tr>
         </form>
       </table>
    </body>
    </html>

  • #11
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Good job getting the iframe shim working, and commenting and cleaning the code!

    This line is messed up. Check the quoting going on here:

    sHTML+="<td onclick='setTimePicker("+ hr + ":" + padZero(j*15) + "\")'><a href='javascript:setTimePicker(\""+ hr + ":" + padZero(j*15) + "\")'>" + hr + ":"+padZero(j*15) + "</a></td>";

    It results in:

    <td onclick='setTimePicker(6:15")'>.....

    You see the extra quote you have in there? Probably the source of some problems.

    As for hiding the div, that's ALWAYS fun. One way you can do it is to have a document.onclick handler close the div, and an onclick handler on the div itself to kill the event. That way, if you click anywhere but the div, it closes, but if you click on the div, the click event doesn't bubble to the document.

    But that's just for clicking. One popular solution is to have a timeout for closing the div. the div's onmouseover handler clears the timeout, and the onmouseout sets the time out with a function to close the div in something like 50 milliseconds.

    Good luck with that. The solution is highly dependent on your specific document structure.

  • #12
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've been trying and trying, but can't get it work!

    I'm able to close it when clicking outside the div, but after that I'm not able to popup the div anymore.

    I added this code at the end:

    Code:
    function hideCurrentPopup() {
     if(crossobj.visibility) {
      document.onclick = closeTimePicker
     }
    }
    document.onclick = hideCurrentPopup;
    Any idea what I'm doin' wrong?

    Btw, the extra quote thing is solved.

  • #13
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Well, once you click on the document, you overwrite the click handler, and therefore it doesn't fire again.

    You're question, simply put, looks like this:

    var x = 5;
    x= 6;
    Why doesn't x == 5?

    You see, the handler overwrites itself in this case.

    I think, not sure, you want:
    Code:
    function hideCurrentPopup() {
     if(crossobj.visibility) {
      closeTimePicker();
     }
    }
    document.onclick = hideCurrentPopup;

  • #14
    New Coder
    Join Date
    Jan 2006
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've tried that one too, but when I implement this (at the bottom of the script), the div doesn't popup at all (no errors)

    Actually, it opens and inmediately closes the div.
    Last edited by nilsn; 03-10-2006 at 03:24 PM.

  • #15
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Right, that's because you haven't added code to kill the event.

    you need this in your onclick handler for the div AND for the function that OPENS the picker:

    // *** IE
    window.event.cancelBubble = true;

    // *** FF
    e.stopPropagation()

    So example:
    Code:
    var clickerThatOpenChooser = document.getElementById('switch');
    clickerThatOpenChooser.onclick = function(e) {
      if (!e) e = window.event;
        e.stopPropagation;
        openChooser();
    };
    
    var chooser = document.getElementById('divThatIsTheChooser');
    
    chooser.onclick = function() {
      if (!e) e = window.event;
      e.stopPropagation;
    };
    
    document.onclick = closeChooser();
    See this page (the site is good in general) for information:

    http://www.quirksmode.org/js/events_order.html
    Last edited by Beagle; 03-10-2006 at 05:55 PM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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