While doing a presentation on jQuery at work today, I went over a particular example I put together earlier today. I thought I’d share it with you here.

In the past, we have used popups for editing values inside of a input box. The most well known example I can think of is smilies on a forum script.

There are shortcuts to insert smilies on the right side of the your textarea. Then if you want more, you click on the more link. A popup window shows up, in the new window, you may click on any of the smiley to insert the shortcut into the textarea where your post is.

There is nothing wrong with the old way. It’s working fine but I believe there is a better way to handle this kind of scenario.

Take a look at this example. (More complete example)

When you click on “Edit Input”, a layer slides out and then if you click on anywhere else on the page to indicate you are done with that input field, the layer goes away. On the layer that slides out, you may display more smiley shortcuts.

Benefits of the new way:

1. You are not making another http request
2. You are not opening another window so you don’t have to worry about popup blockers
3. You don’t have to worry about the parent window child window crap in javascript
4. The layer is on the same page as your regular input, it’s a lot easier to access its content
5. Your code is probably is easier to understand.

HTML:

<div class="editing"><span id="trigger">Edit Input</span>
<div id="toolWrapper">Some kind of editing tool</div>
</div>

Very simple. Just an input box with a layer next to it. Within the layer is a trigger link (you may use an nice image icon if you wish).

CSS:

#trigger {
	cursor: pointer;
}
#toolWrapper {
	position:absolute;
	z-index:100;
	top:20px;
	left:20px;
	background:#eee;
	border:1px solid #111;
	display:none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	width:250px;
	padding-right:20px;
	height:200px;
}
div.editing {
	position: relative;
	display: inline;
}

The CSS utilizes the positioning trick. The outer wrapper (div.editing) is relatively positioned so the insider layer (#toolWrapper) may be positioned absolute to the outer one.

jQuery:

$(function() {
	$("#trigger").click(function() {
		$('#toolWrapper').toggle(function() {
			$(document).click(function(event) {
				if (!($(event.target).is('#toolWrapper') || $(event.target).parents('#toolWrapper').length || $(event.target).is('#trigger'))) {
					$('#toolWrapper').hide(500);
				}
			});
		});
	});
});

Uses the new toggle(showOrHide) method – the logic depends on where you click on the page. I will let you digest it yourself. Read the jQuery api if you need 🙂

Now take a look the time editor I wrote for work. It uses the slider widget from jQuery UI. I will not go over the javascript used. Feel free to view source if you are curious.

jQuery just got a new forum!! WOOHOO. I never liked discussion groups anyway. Forum is much more preference community format for me.