Jump to content

Run Function Help


driz
 Share

Recommended Posts

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. Edited by driz
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

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 :/
Link to comment
Share on other sites

<<== is stupido

Edited by chibineku
Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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.

Edited by Deirdre's Dad
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...