Help popup for input fields. [Archive]

View Full Version : Help popup for input fields.

Animal

12-01-2006, 08:24 AM

A Help popup for input fields. The constructor takes an id/element/HTMLElement which is the input field for which the help is intended, and another which is the div containing the help text.

On F1, a small tooltip is displayed, and then F2 focesses it into a draggable, resizable dialog.

ESC/F1 to dismiss, or click outside.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script src="js/yahoo.js" type="text/javascript"></script>
<script src="js/dom.js" type="text/javascript"></script>
<script src="js/event.js" type="text/javascript"></script>
<script src="js/animation.js" type="text/javascript"></script>
<script src="js/container.js" type="text/javascript"></script>
<script src="js/dragdrop.js" type="text/javascript"></script>
<script src="js/yui-ext.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/yui-ext.css"></link>
<style type="text/css">
.yfloating-help-panel {
border:1px solid black;
background-color:#FFFFE1;
overflow:hidden
}

.yfloating-help-panel .ydlg-close {
display:none;
}

.yfloating-help-panel .yresizable-handle {
display:none
}

.yfloating-help-panel .ydlg-hd {
display:none;
}

.yfloating-help-panel .ydlg-dlg-body {
border:0px none;
padding:0px
}

.yfloating-help-panel .ydlg-bd {
background-color:#FFFFE1;
overflow:hidden
}

.yfloating-help-panel .ydlg-ft {
background-color:#FFFFE1;
padding:0px;
text-align:right;
border-top:1px solid grey
}

.yfocussed-help-panel {
background-color:#FFFFE1;
}

.yfocussed-help-panel .ydlg-bd {
width:auto;
background-color:#FFFFE1;
}

.yfocussed-help-panel .ydlg-ft {
display:none;
}

</style>
<script type="text/javascript">
/**
Create a dialog which contains information about a target element.
*/
YAHOO.ext.InputHelp = function(targetEl, helpEl)
{
this.targetEl = YAHOO.ext.Element.get(targetEl);
this.helpKeyListener = new YAHOO.util.KeyListener(this.targetEl.dom, {keys:112},
this.handleF1.createDelegate(this));
this.focusKeyListener = new YAHOO.util.KeyListener(document, {keys:[27,112,113]},
this.handleF2.createDelegate(this));
this.helpKeyListener.enable();

// Use the cached help panel if it's there, otherwise, create it
if (!this.helpPanelCache[helpEl])
{
YAHOO.ext.DomHelper.append(helpEl,
{
tag: "div",
cls: "ydlg-ft",
html: "Press 'F2' for focus."
});
this.helpPanel = this.helpPanelCache[helpEl] = new YAHOO.ext.BasicDialog(helpEl,
{
width:"30em",
closable:true,
resizable:true,
visible:false
});

// Calculate dialog height needed to contain the focussed header and body
// up to a maximum of 300. Use correct classes; focus disables the footer,
// float disables the header.
this.helpPanel.el.addClass("yfocussed-help-panel");
this.helpPanel.el.removeClass("yfloating-help-panel");
this.defaultHelpPanelHeight = Math.min(
(this.helpPanel.body.dom.scrollHeight + this.helpPanel.getHeaderFooterHeight()), 300);
}
else
{
this.helpPanel = helpPanel[helpEl];
}
this.helpVisible = false;
}

YAHOO.ext.InputHelp.prototype =
{
helpPanelCache: [],

handleF1: function(evtType, fireArgs)
{
YAHOO.util.Event.stopEvent(fireArgs[1]);
if (this.helpVisible)
{
return this.hideHelp(true);
}
this.targetEl.dom.blur();
this.setSizeMinimal();
this.helpPanel.show();
this.helpVisible = true;
this.hideListener = this.documentClick.createDelegate(this);
YAHOO.util.Event.addListener(document, "click", this.hideListener);
this.focusKeyListener.enable();
},

/**
Document clicks outside the help dialog hide the help dialog
*/
documentClick: function(e)
{
// If the target is not a descendant of the helpPanel, hide helpPanel.
if (!(YAHOO.util.Dom.isAncestor(this.helpPanel.el.dom, YAHOO.util.Event.getTarget(e))))
this.hideHelp(false);
},

hideHelp: function(focusTargetEl)
{
this.focusKeyListener.disable();
this.helpPanel.hide();
this.helpVisible = false;
YAHOO.util.Event.removeListener(document, "click", this.hideListener);

// Only focus back if hidden by keyboard action. Clicks allow the click event to blur
if (focusTargetEl)
this.targetEl.dom.focus();
},

/**
Focus the help dialog: Make it larger, scrollable, moveable and resizable
*/
handleF2: function(evtType, fireArgs)
{
var keyPressed = fireArgs[0];
var event = fireArgs[1];
YAHOO.util.Event.stopEvent(event);

// Any other key than F2, hides the help dialog
if (keyPressed != 113)
return this.hideHelp(true);

// Already focussed - ignore
if (this.focussed)
return;

this.setSizeDefault();
},

/**
Set the help dialog size to not much more than a tooltip, align it on the target element
*/
setSizeMinimal: function()
{
this.helpPanel.resizer.enabled = false;
this.helpPanel.el.addClass("yfloating-help-panel");
this.helpPanel.el.removeClass("yfocussed-help-panel");
this.helpPanel.el.setStyle(
{
width:"auto"
});
this.helpPanel.body.setStyle(
{
width:"30em",
height:"2.5em",
overflow:"hidden"
});
this.helpPanel.el.setHeight("3.75em");
this.helpPanel.el.setXY(this.targetEl.getXY());
this.helpPanel.refreshSize();
this.helpPanel.body.dom.scrollTop = 0;
this.focussed = false;
},

setSizeDefault: function()
{
this.helpPanel.resizer.enabled = true;
this.helpPanel.el.addClass("yfocussed-help-panel");
this.helpPanel.el.removeClass("yfloating-help-panel");
this.helpPanel.body.setStyle(
{
overflow:"auto"
});
this.helpPanel.el.setHeight(this.defaultHelpPanelHeight);
this.helpPanel.refreshSize();
this.helpPanel.syncBodyHeight();
this.focussed = true;
}

}
var h1, h2;
YAHOO.util.Event.addListener(window, "load", function()
{
h1 = new YAHOO.ext.InputHelp("poop", "helpForPoop");
h2 = new YAHOO.ext.InputHelp("zook", "helpForZook");
});
</script>
</head>
<body>

<label for="testinput">Some input: </label><input id="poop"></input>

Some text

<label for="testinput">Some more input: </label><input id="zook"></input>

more text

etc...
<div id="helpForPoop" class="yfloating-help-panel" style="visibility:hidden">
<div class="ydlg-hd">Help for the input</div>
<div class="ydlg-bd">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit
amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui.
Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus,
quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque
orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam
erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris.
Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec
et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo,
facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.

<h1>Foobar</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit
amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui.
Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus,
quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque
orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam
erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris.
Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec
et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo,
facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.

</div>
</div>
<div id="helpForZook" class="yfloating-help-panel" style="visibility:hidden">
<div class="ydlg-hd">Help for the input</div>
<div class="ydlg-bd">
This is some stupid text.This is some stupid text.This is some stupid text.
This is some stupid text.This is some stupid text.This is some stupid text.
This is some stupid text.This is some stupid text.This is some stupid text.
This is some stupid text.This is some stupid text.This is some stupid text.
This is some stupid text.This is some stupid text.This is some stupid text.
This is some stupid text.This is some stupid text.This is some stupid text.
</div>
</div>
</body>
</html>

jack.slocum

12-01-2006, 09:01 AM

Hey animal, send me a zip file with this and I will put a link on this server with the example.

Animal

12-01-2006, 09:51 AM

Sent.

jack.slocum

12-02-2006, 08:42 AM

mdissel

12-02-2006, 08:55 AM

Thanks!!!

In my opinion you should have a global option somewhere on the screen to show (large) tooltips when you hit a control/group of controls inside your page.. Hitting F1 should bring up a new dialog, that contains a help text explaining the complete page/form (dynamically loaded). This dialog can be docked to the right of the current page (resizable).. Something like the Task Pane in Microsoft Office.

Thanks

Marco

Animal

12-02-2006, 09:05 AM

I just got this working. The main delay was I had to pull out KeyListener from container.js. Any chance you'd be willing to convert the key stuff to Element.addKeyListener()?

Other than that it looks good. I can do some UI help on it if you want. Maybe some rounded corners and gradient bg to make it look nice. ;)

The only other thing I can think of is the help popup total covers the input field. Maybe it makes sense to align it to the top right corner and constrain to viewport?

In IE7 it seems to do an odd expanded layout.

Yes, I'll convert it to use the Element's addKeyListener, and shift the initial position. It's not good that it obscures the help target. I'll set constraintoviewport.

Yep, some rounded corners for the floating tooltip would be cool.

I'll post my new code back soon.

Animal

12-02-2006, 09:18 AM

I'd rather not add a key listener to a YAHOO.ext.Element which wraps the document.body to listen for ESC. You can't enable/disable key listeners on YAHOO.ext.Element. The YUI one has a disable which removes the listener.

I'm looking at adding a small handler class into Element.js which can encapsulate a keyListener handler, which could be returned from addKeyListener and expose enable() and disable(). It would be enabled by default.

Sound feasible/desirable?

jack.slocum

12-02-2006, 12:23 PM

You can can't remove an event handler attached with mon() directly. You have to remove the wrapped function.

this.handler = this.el.mon('keydown', this.handleKeydown, this);

and

if(this.handler){
this.el.removeListener(this.handler);
}

or the better option, in the constructor:

this.keyDownDelegate = YAHOO.ext.EventManager.wrap(this.handleKeyDown, this, true);

then:

this.el.on('keydown', this.keyDownDelegate); (not mon)

and

this.el.removeListener(this.keyDownDelegate);

This way you aren't constantly wrapping the function.

I like the idea of splitting it.

Animal

12-02-2006, 12:56 PM

I'll send you a zip of this thing when I get it fully working.

jack.slocum

12-02-2006, 02:11 PM

Sounds good - thanks.

sjivan

12-03-2006, 11:33 AM

While the idea is neat, it does seem non standard to be using the F1 key for context help in web apps. I've see various forms with context help : few have a right div updating as you move fields, and some have a balloon popup above the field itself. Personally I just like having a small (?) icon next to the field which when clicked pops up the context help pane.

Sanjiv

Animal

12-03-2006, 04:44 PM

Yes, this thing definitely needs to be configurable as to how you pop it up, not blindly add an F1 listener. I'll give it some more thought.

seldon

12-13-2006, 02:16 PM

I would like to you your tooltip. Do you have the final code?
Thanks!

Seldon

Alidad

01-13-2007, 12:58 PM

i would love to see the sample, is that possible to send link to jack forums!

dmedina2000

01-26-2008, 02:24 PM

I'll send you a zip of this thing when I get it fully working.

Has the example been posted

origin

02-05-2008, 12:38 AM

I'd be keen to see this aswell, sounds excellent.

I would suggest though, that people do not associate pressing F1 for help in a browser context...or in my experience, many contexts...

Perhaps a mouse over tooltip would be more appropriate?