Extensible In-Line Help Code

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Oralloy
    Recognized Expert Contributor
    • Jun 2010
    • 988
    #1

    Extensible In-Line Help Code

    Folks,

    Sorry if this question is a little vague. I'm trying to improve on what looks to be a painful code methodology.

    In short, I have a web application where I'm trying to embed help bits as part of the prompts for various form fields.

    Basically I want to implement a "more/less" toggle, something like the code I have posted below.

    Since the fields are built into the forms dynamically, I'm not sure how to identify HTML segments, except by using distinct identifiers. If there is a shorter, easier way, I'm all eyes. I am really getting tired of having to change names in six places each time I add help text to a field.

    Anyway - the following is an example of what I have. Is there a better way to do this?

    Code:
    <script type='text/javascript'>
{
  function help_LL_Affected_Lifecycle_Phases()
  {
    var help = document.getElementById('help_LL_Affected_Lifecycle_Phases');
    var tag = document.getElementById('tag_LL_Affected_Lifecycle_Phases');
    if (help.style.display == 'none') {
      help.style.display = '';
      tag.innerHTML = 'less';
    } else {
      help.style.display='none';
      tag.innerHTML = 'more';
    }
  }
}
</script>
All project lifecycle phases affected by the lesson.&nbsp;&nbsp;<a href='#' onclick='help_LL_Affected_Lifecycle_Phases(); return false;'><strong id='tag_LL_Affected_Lifecycle_Phases'>more</strong></a>
<div id='help_LL_Affected_Lifecycle_Phases' style='display:none'>
<ul><li>Select all of the lifecycle phases, which are affected by this lesson.
<li>Example: <strong>Preliminary Design</strong></ul>
</div>

    Thanks,
    Oralloy
    Tags: None
    • RamananKalirajan
      Contributor
      • Mar 2008
      • 608
      #2
      You can use title attribute also. It is shown like a tool tip.

      ex:
      Code:
      <html>
<body>
 <div>
  This is the passage about the growing problem in human life. One of the major problem is <b><span style="cursor:pointer;" title="Complexity is a problem which affects the attitude of a person">complexity</span></b>
 </div>
</body>
</html>
      Thanks and Regards
      Ramanan Kalirajan

        Comment

        • Oralloy
          Recognized Expert Contributor
          • Jun 2010
          • 988
          #3
          Ramanan,

          This is what I've converged on:
          Code:
          <!--works-->
All project lifecycle phases affected by the lesson.&nbsp;&nbsp;
<div id='tagg_LL_Affected_Lifecycle_Phases'>(more)</div> 
<div id='help_LL_Affected_Lifecycle_Phases'>
 <ul><li>Select all of the lifecycle phases, which are affected by this lesson.
 <li>Example: <strong>Preliminary Design</strong></ul>
</div>
<script type='text/javascript'> 
 tagg = document.getElementById('tagg_LL_Affected_Lifecycle_Phases'); 

 tagg.help = document.getElementById('help_LL_Affected_Lifecycle_Phases'); 
 tagg.help.style.display = 'none';
 tagg.stat = 0;
 tagg.style.color = 'blue';
 tagg.style.fontWeight = 'bold';

 tagg.onclick = function() {
  if (this.stat == 0) {
   this.help.style.display = '';
   this.innerHTML = '(less)';
   this.stat = 1;
  } else {
   this.help.style.display='none';
   this.innerHTML = '(more)';
   this.stat = 0;
  }
  return false;
 }

 tagg.onmouseover = function() {
  this.style.cursor='help';
 }
</script>
          Have you got any addititional suggestions on how to make it cleaner?

            Comment

            Previous template Next
            Working...