Inserting has it's merits in that the centering method I used will not work
if you have scrolled way down via the scroll bars so inserting the
modalWindow will keep the help popup "near" the element from which the help
was invoked... on the flip side, I've had issues with inserting new
elements and inherited CSS as attributes not explicitly set are inherited
from the parent.

On Sun, Jun 9, 2013 at 3:05 PM, Monty Munro <monty.mu...@gmail.com> wrote:

>  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"></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.
>
>
>
>
>  --
> 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.


Reply via email to