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.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    onClick event handler

    Hi, I my script I have a pop-up widget, which gives auto-complete suggestions to what they are typing in, now I have got most of the selection code working, however I want to hide the box when the click anywhere that is not in the box. Can anyone help me, as I have had no luck so far. Thanks.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    using timeouts is normal

    var TO;

    ie document.onclick=function(){ TO=setTimeout('obj.style.visibility=\'hidden\'',200); }


    now for objects which are not to hide the object require an onclick/onfocus event to call

    clearTimeout(TO);

  • #3
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I came up with something like that, but wouldn't the onClick event fire if they click on the box, as I only want to run the function if they click outside of it.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    read this again

    now for objects which are not to hide the object require an onclick/onfocus event to call

    clearTimeout(TO);

  • #5
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe I mis-phrased the question, I will post the current code that I have to give a better idea about what isn't working.
    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Intellitype</title>
    <style type="text/css">
    .IntelliTypeItem {
    	font-family: tahoma, sans-serif;
    	font-size: 9pt;
    	display: block;
    	padding: 1px;
    }
    .IntelliTypeItemSelected {
    	padding: 0px;
    	font-family: tahoma, sans-serif;
    	font-size: 9pt;
    	display: block;
    	border: 1px dotted #000000;
    	background-color: #B2B4BF;
    }
    </style>
    <script type="text/javascript">
    //IntelliType Box Management
    //Globals
    var selected; //obj
    
    function IntelliSet(self) {
    	try {
    		selected.className = 'IntelliTypeItem';
    	}
    	catch (e) {
    	}
    	self.className = 'IntelliTypeItemSelected';
    	selected = self;
    }
    
    function IntelliHide(self) {
    	try {
    		selected.className = 'IntelliTypeItem';
    	}
    	catch (e) {
    	}
    	self.style.display = 'none';
    }
    </script>
    </head>
    
    <body>
    <div style="overflow: auto; width: 125px; height: 80px; border: 3px outset"> <!--onblur="IntelliHide(this);"-->
    	<span id="0" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 1</span>
    	<span id="1" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 2</span>
    	<span id="2" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 3</span>
    	<span id="3" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 4</span>
    	<span id="4" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 5</span>
    	<span id="5" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 6</span>
    </div>
    </body>
    
    </html>
    The box itself is for a javascript text editor, and that is the auto-complete function box for it (like one sees in programs like notepad++ and visual studio). However, I do not want to use a timeout, but rather when the click off anywhere out of the box. I have got that working with IE using the onblur call on my <div> but it does not work in any of the other browsers. Does anyone know how this can be done I have seen it work on many browsers on things like DHTML menus (the one on the hotmail mailbox for creating a new message for example).
    Thanks for all of your help anyway.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    couple of problems

    1) the onblue event can give problems with MozFF autocomplete with XP Pro, doees not appear to effect other operating systems)

    2) The hide can interupt the selected index being recognised and prevent completeing the text box.

    Edit had another thought

    toggle the document click event when the mse over/out of the text/selectbox
    Last edited by vwphillips; 07-10-2005 at 01:27 PM.

  • #7
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You mean like when the mouseover set a global eg var inCompleteBox = 1; then have an onlclick event in the containing area which checks if they are in the div and if they are not in it then removes the box.

    Well I have tried an onmouseover/out solution and it does not seem to work, does anyone have any other idea about how it can be done.
    Last edited by evilguru; 07-10-2005 at 02:05 PM.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    toggle the document click event when the mse over/out of the text/selectbox

    monitor the position of the mouse and txtBx and PUobj

    as we appear to have a coms prob see

    http://www.vicsjavascripts.org.uk/Au...ete/Trial6.htm

  • #9
    Regular Coder
    Join Date
    Jan 2005
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for that link, I now have the body handle all of the clicks, it then checks what is active and gets information about where the mouse cursor is and the size of the div and if either the X or Y coord of the mouse is not in the div then it hides it. While I am sure that the extra functions that I need would be in there anyway I think that there are some parts of the code which can be improved on. If anyone has any optimizations to it please tell me.
    Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Intellitype</title>
    <style type="text/css">
    .IntelliTypeItem {
    	font-family: tahoma, sans-serif;
    	font-size: 9pt;
    	display: block;
    	padding: 1px;
    }
    .IntelliTypeItemSelected {
    	padding: 0px;
    	font-family: tahoma, sans-serif;
    	font-size: 9pt;
    	display: block;
    	border: 1px dotted #000000;
    	background-color: #B2B4BF;
    }
    </style>
    <script type="text/javascript">
    //IntelliType Box Management
    //Globals
    var selected; //obj
    var globals = new Array();
    var intelliTypeIsActive = true;
    
    function IntelliSet(self) {
    	try {
    		selected.className = 'IntelliTypeItem';
    	}
    	catch (e) {
    	}
    	self.className = 'IntelliTypeItemSelected';
    	selected = self;
    }
    
    function IntelliHide(self) {
    	try {
    		selected.className = 'IntelliTypeItem';
    	}
    	catch (e) {
    	}
    	self.style.display = 'none';
    }
    
    function SetGlobal(index, val) {
    	globals[index] = val;
    }
    
    function GetElementPosition(elemID) {
        var offsetTrail = document.getElementById(elemID);
        var offsetLeft = 0;
        var offsetTop = 0;
        while (offsetTrail) {
            offsetLeft += offsetTrail.offsetLeft;
            offsetTop += offsetTrail.offsetTop;
            offsetTrail = offsetTrail.offsetParent;
        }
        if (navigator.userAgent.indexOf("Mac") != -1 && 
            typeof document.body.leftMargin != "undefined") {
            offsetLeft += document.body.leftMargin;
            offsetTop += document.body.topMargin;
        }
        return {left:offsetLeft, top:offsetTop};
    }
    
    function GetMousePosition(e) {
    	var posX = 0;
    	var posX = 0;
    	//var e = window.event;
    	if (e.pageX || e.pageY) {
    		posX = e.pageX;
    		posY = e.pageY;
    	}
    	else if (e.clientX || e.clientY) {
    		posX = e.clientX + document.body.scrollLeft;
    		posY = e.clientY + document.body.scrollTop;
    	}
    	return {x:posX,y:posY};
    }
    
    
    function ClickManager(e) {
    	if (intelliTypeIsActive = true) {
    		var position = GetElementPosition('intelliType');
    		var mouseCoords = GetMousePosition(e);
    		var intelliType = document.getElementById('intelliType');
    		var intelliTypeSize = {height:intelliType.style.height, width:intelliType.style.width};
    		if (!(mouseCoords.x > position.left && mouseCoords.x < (position.left + parseInt(intelliTypeSize.width)))
    		|| !(mouseCoords.y > position.top && mouseCoords.y < (position.top + parseInt(intelliTypeSize.height)))) {
    			intelliType.style.display = 'none';
    		}
    		/*alert('Div is: X ->' + position.left + ' Y ->' + position.top + '\n'
    		+ 'Div Size is: X ->' + (parseInt(intelliTypeSize.width)) + 'Y ->' + (position.top + parseInt(intelliTypeSize.height)) + '\n'
    		+ 'Mouse is: X ->' + mouseCoords.x + ' Y -> ' + mouseCoords.y);*/
    	}
    }
    </script>
    </head>
    
    <body onclick="ClickManager(event);"> <!-- If Opera you need to add some content as the body is only as big as it needs to be...-->
    <div id="intelliType" style="overflow: auto; width: 125px; height: 80px; border: 3px outset"> <!--onblur="IntelliHide(this);"-->
    	<span id="0" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 1</span>
    	<span id="1" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 2</span>
    	<span id="2" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 3</span>
    	<span id="3" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 4</span>
    	<span id="4" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 5</span>
    	<span id="5" class="IntelliTypeItem" onclick="IntelliSet(this);">Item 6</span>
    </div>
    </body>
    
    </html>

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    all code can be improved.

    The code I posted has additional features requested by users.


  •  

    Posting Permissions

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