JS function question

[TechBoyJK]

I have the following code.

Looking at the first line, it sets 'menu' equal to whatever selector I put. In this case, I put #Messages

What I want to do is be able to provide the #messages part as an argument and rewrite this code as a re-usable function named 'menuCollapse'.

I need to apply this code to about 15 different selectors so I want to write it as a function with an argument.

Thoughts?

$(document).ready(function {
			var menu = $('#Messages');
			menu.menu();
			
			var blurTimer;
			var blurTimeAbandoned = 30;  // time in ms for when menu is consider no longer in focus
			
			menu.on('menufocus', function() {
				clearTimeout(blurTimer);
			});
			
			menu.on('menublur', function(event) {
				blurTimer = setTimeout(function() {
			    	menu.menu("collapseAll", null, true );
				}, blurTimeAbandoned);
			});
		});

 

[Savatar]

A couple of things.
1. It should be function() { ... stuff here ... }, not just function { ... }
2. Passing '#Messages' will pass that literal string, not the value contained in the messages bookmark. You would normally use window.location.hash to retrieve the hash value (#) in the URL string.
3. This looks like it would be human-writable on the URL, which can make it subject to injection attacks without proper validation. In general, you want to avoid javascript functions that rely on user data like that. If it's read from a database and passed in to the function, that's one thing, but reading it from a URL parameter can be dangerous.

 

[TechBoyJK]

A couple of things.
1. It should be function() { ... stuff here ... }, not just function { ... }
2. Passing '#Messages' will pass that literal string, not the value contained in the messages bookmark. You would normally use window.location.hash to retrieve the hash value (#) in the URL string.
3. This looks like it would be human-writable on the URL, which can make it subject to injection attacks without proper validation. In general, you want to avoid javascript functions that rely on user data like that. If it's read from a database and passed in to the function, that's one thing, but reading it from a URL parameter can be dangerous.

Thanks.

1) yea, typo.
2) I want that string passed.. It could be #Messages, #mySelector, #myAnything
3) huh?

 

[Savatar]

Thanks.

1) yea, typo.
2) I want that string passed.. It could be #Messages, #mySelector, #myAnything
3) huh?

Ahh, I thought you were wanting to read the hash tag from the URL itself (like http://www.google.com/#param) and then that was what would be used in the function, which is bad.

Cool, well just modify it to take a parameter then, and use something like function(myParam) { var menu = $(myParam); ... } Sounds like you've got it figured out. Obviously you couldn't define it directly in the document.ready block like that anymore, though - you'd define the function somewhere else and then call it from document.ready... or wherever.

 

[GregGreen]

This should work:

function menuThing(selector) {
    var menu = $(selector),
        blurTimeAbandoned = 30,
        blurTimer;

    menu.menu();

    menu.on('menufocus', function() {
        clearTimeout(blurTimer);
    }).on('menublur', function(event) {
        blurTimer = setTimeout(function() {
            menu.menu('collapseAll', null, true);
        }, blurTimeAbandoned);
    });

}

$(document)ready(function() {
    menuThing('#Messages');
});

 

[KB]

Why do you need a function unless you are changing menus on the fly? What I would do is give every element that will have a menu a certain class like class="menu" then call the jquery selector for that css class $(".menu") when applying my menu code. Remember that an html elment can have more then one class so it could be <div class="Messages menu"> and you could still use the class selector.