To get around the idea of having the embedded modalWindow in your html,
you could build it and inject it on dom:loaded
document.observe('dom:loaded', function () {
var helpShell = String()
+ "<div class='help_title'>Help<div class='help_close'></div></div>"
+ "<div id='help' class='help_content'></div>";
var mhw = new Element( 'div', { id : 'modalWindow', 'class' :
'modalHelpWindow', style : 'display:none;' }).insert(helpShell);
$(document.body).insert( mhw);
});
might want to inline all of the css on the shell div parts.
On 6/9/2013 2:03 PM, Phil Petree wrote:
Here's what I've come up with on the context sensitive help system
(thanks to a few tips from Walter). I'm not crazy about the idea of
having to include the hidden modalWindow on each page that uses the
help but I found it much simpler than doing it all inline (maybe
that's just my lacko skill set showing <g>):
sample html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Context Sensitive Help</title>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js
<http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js>"></script>
<script type='text/JavaScript' src='help.js'></script>
<link rel='stylesheet' type='text/css' href='help.css' />
</head>
<body>
<!-- this div is used by the context help system -->
<div id="modalWindow" class="modalHelpWindow" style="display:none;">
<div class='help_title'>Help<div class='help_close'></div></div>
<div id='help' class='help_content'></div>
</div>
<div class='content'>
<form>
<label for='name'>Name:<div class="help" id="name"></div></label>
<input type='text' name='name' /><br>
<label for='occupation'>Occupation:</label>
<input type='text' name='occupation'/><div class="help"
id="occupation"></div><br>
<label for='sex'>Sex:<div class="help" id="sex"></div></label>
<input type='radio' name='sex' value='female' />
Female <input type='radio' name='sex' value='male' /> Male
</form>
</div>
</body>
</html>
help.css:
/* CSS Document */
div.modalHelpWindow
{
position: absolute;
top: 50%;
left: 50%;
width:400px;
height:250px;
padding-top: 0px;
margin-top: -125px; /*set to a negative number 1/2 of your height*/
margin-left: -200px; /*set to a negative number 1/2 of your width*/
border: 4px solid green;
background-color: #ffffff;
z-index: 100;
}
.help_title
{
/* help system title bar */
float: left;
top: 0px;
width:400px; /* same width as the help popup */
height:25px; /* this plus height of help_content = height of
popup */
background: lightgray;
Padding: 5px;
overflow: hidden;
}
.help_close
{
/* the 'x' to close the help dialog */
position: absolute;
height: 16px; /* has to have a height/width or it won't display */
width: 16px;
margin-left: 345px; /* how far from left to position the 'x' */
background: url(images/delete_16x16.png) top no-repeat;
}
.help_content
{
width:400px;
height:225px;
overflow:auto;
background:#fff;
}
.help
{
display: inline;
height: 16px;
width: 16px;
margin-left: 3px;
padding-right: 20px;
background: url(images/help_16x16.png) left no-repeat;
}
help.js:
// JavaScript for context help system
document.on('click', '.help', function(evt, elm){
new Ajax.Updater('help', 'server/help.php', {
method: 'post',
parameters: {id: elm.id <http://elm.id>},
onSuccess: function(){
openHelpWindow();
}
});
});
document.on('click', '.help_close', function(evt, elm){
evt.stop();
closeHelpWindow()
});
// I implemented these as functions
// for easy customization
function openHelpWindow()
{
$('modalWindow').show();
}
// close the modal window
function closeHelpWindow()
{
$('modalWindow').hide();
}
server/help.php:
<?php
echo "<center><h3>User requested help on:</h3><h1>" .$_POST['id']
."</h1></center>";
?>
The MySQL table I implemented:
CREATE TABLE IF NOT EXISTS `help` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`language` char(2) CHARACTER SET ascii NOT NULL COMMENT 'language of
this record',
`help_topic` char(20) CHARACTER SET ascii NOT NULL COMMENT 'help topic',
`help_content` text CHARACTER SET ascii NOT NULL COMMENT 'help content',
PRIMARY KEY (`id`),
FULLTEXT KEY `help_system` (`help_topic`, `help_content`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='context help table'
AUTO_INCREMENT=1;
INSERT INTO `help` (`id`, `language`, `help_topic`, `help_content`) VALUES
(1, 'EN', 'name', 'Help about the name field goes here...');
--
You received this message because you are subscribed to the Google
Groups "Prototype & script.aculo.us" group.
To unsubscribe from this group and stop receiving emails from it, send
an email to prototype-scriptaculous+unsubscr...@googlegroups.com.
To post to this group, send email to
prototype-scriptaculous@googlegroups.com.
Visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to the Google Groups "Prototype
& script.aculo.us" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to prototype-scriptaculous+unsubscr...@googlegroups.com.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
Visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
