Re: [Proto-Scripty] Help system

[Phil Petree]

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  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()
> +  "Help"
> +  "";
>
>   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 ):
>
> sample html:
> 
> 
> 
> 
> Context Sensitive Help
> 
> 
> 
> 
> 
>   
>   
> Help
> 
>   
>   
> 
>   Name:
>   
>   Occupation:
>id="occupation">
>   Sex:
>   
> Female   Male
> 
>   
> 
> 
>  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: #ff;
>   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:
>  echo "User requested help on:" .$_POST['id']
> ."";
> ?>
>  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.co

Re: [Proto-Scripty] Help system

[Monty Munro]

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()
+  "Help"
+  "";

  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 ):

sample html:




Context Sensitive Help
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>">





  
  
Help

  
  

  Name:
  
  Occupation:
  id="occupation">

  Sex:
   
Female   Male


  


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: #ff;
  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:
echo "User requested help on:" .$_POST['id'] 
."";

?>
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.