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"></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&nbsp;&nbsp;<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},
    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.


Reply via email to