Run Function Help

[driz]

Hi i have this script to show a modal box when a user clicks a link at the moment i have to add it MANUALLY using Onclick, but would like to run it whenever a user clicks anything, links, buttons etc. How could i edit the code to do this?

		<script type="text/javascript">				//----------------------------------------------------------------------		// Modal		//----------------------------------------------------------------------				var objModal;				function JS_Utils_ShowModal ()		{			// hide selects if IE6			bIsIE6 = /msie|MSIE 6/.test(navigator.userAgent);			if ( bIsIE6 )			{				var arSelects = document.getElementsByTagName("select");				for ( var n=0; n<arSelects.length; n++ ) arSelects[n].style.display = "none";			}						// require modal item to be on the page			objModal = document.getElementById("divModal");			objModal.style.display = "block";						return true;		}				function JS_Utils_HideModal ()		{			if ( objModal ) objModal.style.display = "none";		}				//----------------------------------------------------------------------		//----------------------------------------------------------------------				</script>

[chibineku]

Bind the event handler to a top level element, like a container div, or just body and it should capture the event no matter what its target.

[driz]

Can you explain that? How would I get the function to run if a user clicks a link? at the moment i just use: onclick="JS_Utils_ShowModal();"

[chibineku]

If you put the onclick="" line in the body tag, it should pick up any clicks on descendent elements.

[driz]

If you put the onclick="" line in the body tag, it should pick up any clicks on descendent elements.

I dont want to add anything like that if I can avoid it. Any other ways of getting around this? EDIT big bug with that is if the user clicks on the page but not a physical link, so in a textbox on whitespace, select text. This is a big no no.

[chibineku]

You can bind events from the javascript function a number of ways. It's generally slightly tedious because of the usual IE compatibility issues. I believe Dierdre's Dad is in the process of writing about event binding - if not, 'javascript bind event' and all will be revealed.

[driz]

I've had a look, but this isn't making sense to me. Can you give me an example that would integrate into my code above, that I can then play and test with? Thanks.

[jeffman]

You did say EVERYTHING, so that's the answer you got. :)I think this will be tedious. You could use getElementsByTagName('*') and then loop through the results to attach an event to every element's onclick property.BUT that would grab your body, head, title, and be a problem. You'd also trigger the handler multiple times as the click event bubbled up. Eliminating that can be tricky.To avoid all that, you'll need to SPECIFY the kinds of elements you want to attach your handler to. I would create an array of acceptable items, then loop through the array, then loop through the items it grabs.This code is off the top of my head and may not work exactly as you see it.

function my_handler () {	// open dialog}function init_handlers () {	var i, j, els, tags = ["input", "button", "a"]; // just for starters	for (i = 0; i < tags.length; i++) {		els = document.getElementsByTagName(tags[i]);		for (j = 0; j < els.length; j++) {			els[j].onclick = my_handler;		}	}}

EDIT. Yup. Noticed a mistake indexing els. Fixed it. Expect more.

[driz]

You did say EVERYTHING, so that's the answer you got. :)I think this will be tedious. You could use getElementsByTagName('*') and then loop through the results to attach an event to every element's onclick property.BUT that would grab your body, head, title, and be a problem. You'd also trigger the handler multiple times as the click event bubbled up. Eliminating that can be tricky.To avoid all that, you'll need to SPECIFY the kinds of elements you want to attach your handler to. I would create an array of acceptable items, then loop through the array, then loop through the items it grabs.This code is off the top of my head and may not work exactly as you see it.

function my_handler () {	// open dialog}function init_handlers () {	var i, j, els, tags = ["input", "button", "a"]; // just for starters	for (i = 0; i < tags.length; i++) {		els = document.getElementsByTagName(tags[i]);		for (j = 0; j < els.length; j++) {			els[j].onclick = my_handler;		}	}}

EDIT. Yup. Noticed a mistake indexing els. Fixed it. Expect more.

Okay so // open dialog is where my current JS code goes? how do init_handlers get run then? Or am i missing this completely :/

[chibineku]

<<== is stupido

[jeffman]

Okay so // open dialog is where my current JS code goes?

Yes.

how do init_handlers get run then? Or am i missing this completely :/

You choose when to run it. Maybe like this:

window.onload = init_handlers;

I didn't write that part because I don't know if you already have handlers attached to window.onload . If you do, try this:

function init () {	init_handlers ();	// other code}window.onload = init;

[jeffman]

Or you could do this:els[j].onclick = JS_Utils_ShowModal;

[driz]

It works great. But if i select an input box it runs, i only want it to run on input types such as submit and button. Is it possible for that JS to detect those?

[jeffman]

Try this. Notice that we're testing if the element is an input. If it is, we're testing the type of input. If the type is text or password, we skip to the next loop iteration. If the tag is not an input, or the type is not text/password, we assign the handler. I really hate type attributes.

function init_handlers () {	var i, j, els, typ, tags = ["input", "button", "a"]; // just for starters	for (i = 0; i < tags.length; i++) {		els = document.getElementsByTagName(tags[i]);		for (j = 0; j < els.length; j++) {			if (tags[i] == "input") {				typ = els[j].type.toLowerCase();				if (typ == "text" || typ == "password") {					continue;				}			}			els[j].onclick = my_handler;		}	}}

OR

if (typ != 'submit' && typ != "button") {	continue;}

That last bit SHOULD be right. Logical operators confuse me until I test them.

[driz]

Works perfectly Thanks. One final thing though. This script just shows a modal while the next page is loaded up, but doesn't actually give any indicators as to how long the next page will take to render. How easy would it be to modify this script to preload the next page and then show it you? Just food for thought really, not actively looking to implement it as of yet, but would be interested in looking into it as a future possibility. Thanks again.

[jeffman]

It would not be easy. It would be a whole other thing.