Loading ...
Sorry, an error occurred while loading the content.

[NH] outline to an html4 outline Div thingy

Expand Messages
  • Grant
    I got bored with eric s Topics to HTML clip so I thought I would spice it up using css javascript to create a sort of cross browser frameless frames div
    Message 1 of 3 , Feb 6, 2000
    • 0 Attachment
      I got bored with eric's Topics to HTML clip so I thought I would spice it
      up using css javascript to create a sort of cross browser frameless frames
      div thingy.
      Hope you don't mind me posting stuff like this as it is a bit long.
      Like erics' it uses the Readme.Otl as a default but any open OTL file
      should work.Uses the ntp beta 4.8 but if you remove line
      ^!IFTrue ^$IsBlank("^%p%")$ Para_loop Else Next
      should work in ntp4.6.
      The two clips work together.Annotated it a little so hopefully you can see
      whats going on.


      H=OutlineToHTMLOutline
      ;converts outline to html4 that looks like an outline.
      ^!IfFalse ^$IsOutlineDoc$ OpenReadme ELSE Start
      :OpenReadme
      ^!Open ^$GetAppPath$Readme.Otl
      ^!IfError Error
      :Start
      ^!Set %OutlineName%=^$GetName("^**")$
      ^!Set %TopicIndex%=0
      ^!Set %TopicCount%=^$GetTopicCount$
      ^!Set %vizDiv%=^$GetTopicName(1)$
      ^!Set %List%=^%EMPTY%
      ^!Set %Divs%=^%EMPTY%
      :LoopStart
      ^!Inc TopicIndex
      ^!If ^%TopicIndex% > ^%TopicCount% EndLoopStart Else NEXT
      ^!Set %TNAME%=^$GetTopicName(^%TopicIndex%)$
      ^!SET %ListItem%=<A href="javascript:showMsg('^%TNAME%')">^%TNAME%</A>
      ;eliminate delimiter if in string
      ^!SET %ListItem%=^$StrReplace(";";":";^%ListItem%;False;False)$
      ^!Set %List%=^%List%;^%ListItem%
      ;focus on outline
      ^!SetTopicIndex ^%TopicIndex%
      ^!Set %i%=0
      ^!Set %markup%=^%Empty%
      :Para_loop
      ^!INC:%i%
      ^!IF ^%i% > ^$GetParaCount$ EndPara_loop Else next
      ^!Set %p%="^$GetParagraph(^%i%)$"
      ^!Set %p%=^$StrTrim("^%p%")$
      ^!IFTrue ^$IsEmpty(^%p%)$ Para_loop Else Next
      ^!IFTrue ^$IsBlank("^%p%")$ Para_loop Else Next
      ^!Set %p%=^$StrInsert("<p>";"^%p%";1)$
      ^!Set %StrSize%=^$StrSize("^%p%")$
      ^!INC:%StrSize%
      ^!Set %p%=^$StrInsert("</p>";"^%p%";^%StrSize%)$
      ;concatenate paragraphs
      ^!Set %markup%="^%markup%^%NL%^%p%"
      ^!Goto:Para_loop
      :EndPara_loop
      ^!Set %markup%=<H1>^%TNAME%</H1>^%NL%^%markup%
      ^!Set %markup%=<div class="pos" id="^%TNAME%">^%markup%^%NL%</div>;
      ;eliminate delimiter if in string
      ^!SET %markup%=^$StrReplace("|";":";^%markup%;False;False)$
      ;concatenate Divs with built in delimiter
      ^!Set %Divs%="^%Divs%|^%markup%"
      ^!GoTo LoopStart
      :EndLoopStart
      ;List array
      ;remove first delimiter
      ^!Set %List%=^$StrDelete(^%List%;1;1)$
      ^!SetArray %ListArr%=^%List%
      ;Divs array
      ;remove first delimiter
      ^!Set %Divs%=^$StrDelete(^%Divs%;1;1)$
      ^!SetListDelimiter |
      ^!SetArray %DivsArr%=^%Divs%
      ^!TOOLBAR New Document
      ^$GetClipText(outLineDynHTML)$
      ^!Jump Doc_Start
      ^!Find "<BODY" CIWS
      ^!Jump Select_End
      ^%Space%onload="create_objects();showMsg('^%vizDiv%')"
      ^!Find "<!--SIDEPANEL-->" CIWS
      ^!Jump Line_End
      ^!KeyBoard ENTER
      ^!Jump Line_Start
      ^!set %i%=0
      ^%NL%<Span class="sidePanel">
      :UL-Loop
      ^!Inc %i%
      ^!IF ^%i% > ^%ListArr0% endUL-Loop ELSE NEXT
      ^%NL%<P>^%ListArr^%i%%</P>
      ^!GoTO:UL-Loop
      :endUL-Loop
      ^%NL%</Span>
      ^!Find "<!--DIVISION-->" CIWS
      ^!Jump Line_End
      ^!KeyBoard ENTER
      ^!Jump Line_Start
      ^!SET %j%=0
      :DivLoop
      ^!INC %j%
      ^!IF ^%j% > ^%DivsArr0% EndDivLoop ELSE NEXT
      ^%NL%^%DivsArr^%j%%^%NL%
      ^!GOTO:DivLoop
      :EndDivLoop
      ^!TOOLBAR View in Browser
      ;end of clip


      2nd clip consist of a html template
      called in above clip ^$GetClipText(outLineDynHTML)$
      Alter styles as you wish.
      Should work ok in all level4 browser and mozilla.

      H=_outLineDynHTML
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
      "http://www.w3.org/TR/REC-html40/strict.dtd">
      <HTML>
      <HEAD>
      <TITLE>Document Content Markup</TITLE>
      <STYLE type="text/css">
      BODY
      {
      background-color: #009900;
      color: #339999;
      }

      A:hover
      {
      color: #FF6600;
      }

      H1
      {
      color: #FF9900;
      }

      .sidePanel
      {
      width: 7em;
      height: 400px;
      overflow: auto;
      }

      DIV.pos
      {
      color: #66FF66;
      background-color: #660066;
      border: thin;
      border-color: #660066;
      border-style: solid;
      position:absolute;
      top: 1em;
      left: 9em;
      visibility: hidden;
      }
      </STYLE>

      <SCRIPT type="text/javascript">

      /*
      The original idea for this script can be
      found in an article by Shelley Powers
      http://www.inquiry.com/techtips/dhtml_pro/10min/10min1299/10min1299.asp
      I changed a few things mainly
      -the way the 'obj' gets
      passed to the branched
      Browser/dom Object constructors.
      Grant MacKenzie
      mailto:emerge@...
      ++++++++++++++++++++++++++++++++
      each browser gets its own object,
      with the same interfaces but
      differing implementations
      */

      // create IE DHTML object
      function ie_object(obj)
      {
      this.css = obj;
      this.name = obj.id;
      this.objHide = domHide;
      this.objShow = domShow;
      }

      // create DOM object
      function dom_object(obj)
      {
      this.css = obj; //ref
      this.name = obj.id; //property name
      this.objHide = domHide;//methods
      this.objShow = domShow;
      }

      // IE/DOM hide element
      function domHide()
      {
      this.css.style.visibility = "hidden";
      }

      // IE/DOM show element
      function domShow()
      {
      this.css.style.visibility = "visible";
      }

      /*
      --------------------------------------------------
      The Navigator specific scripting object methods
      -------------------------------------------------
      */

      // Navigator object
      function ns_object(obj)
      {
      this.css = obj;
      this.name = obj.name;
      this.objHide = nsHide;
      this.objShow = nsShow;
      }


      // hide element
      function nsHide()
      {
      this.css.visibility = "hidden";
      }

      // show element
      function nsShow()
      {
      this.css.visibility = "inherit";
      }

      /*
      ---------------------------
      Create the objects
      A set of browser sniffed branched functions
      ie4
      ie5
      Dom // the DOM is really what we want
      however we have to maintain backward comptability

      obj the current reference to a browser specific
      item in an array of DIV elements in a document
      document.all.tags("DIV") //for ie4
      document.layers[] array object //for nn4
      document.getElementsByTagName("DIV")//for the dom ie5 and nn5
      The obj gets passed to the new constructor for each browser
      and can be used to construct properties,methods
      for the object eg
      theobjs[i].name == obj.id
      -------------------------------
      */

      // create IE objects
      function create_ie_objects()
      {
      theelements = document.all.tags("DIV");
      theobjs = new Array();
      var obj
      for (i = 0; i < theelements.length; i++)
      {
      obj = theelements[i]
      theobjs[i] = new ie_object(obj);
      }
      }

      // create Navigator objects
      function create_ns_objects()
      {
      theobjs = new Array();
      var obj
      for (i = 0; i < document.layers.length; i++)
      {
      obj = document.layers[i];
      theobjs[i] = new ns_object(obj);
      }

      }

      // create DOM objects
      function create_dom_objects() {
      theelements = document.getElementsByTagName("DIV");
      theobjs = new Array();
      var obj
      for (i = 0; i < theelements.length; i++)
      {
      obj = theelements[i];
      theobjs[i] = new dom_object(obj);
      }
      }

      /*
      ----------------------------------
      Browser sniffer
      call correct object loading method
      To be called from onload in body tag
      Contains simple browser sniffer
      no opera
      -----------------------------------
      */

      function create_objects()
      {
      // if 5.0 browser
      if (navigator.appVersion.indexOf("5.0") != -1)
      create_dom_objects();
      else
      if (navigator.appName == "Microsoft Internet Explorer")
      create_ie_objects();
      else
      create_ns_objects();
      }

      /*
      -------------------------------------------
      The frameless frames script.
      Show DIV with ID="nm"
      Hide all others
      Developed by GnMacKenzie for use with above objects
      mailto:emerge@...
      ------------------------------------------------
      */

      function showMsg(nm)
      {
      for(i=0; i < theobjs.length;i++)
      {
      if(theobjs[i].name == nm)
      {theobjs[i].objShow();}
      else
      {theobjs[i].objHide()}
      }
      }
      </SCRIPT>
      </HEAD>
      <BODY>
      <!--SIDEPANEL-->
      <!--endSIDEPANEL-->
      <!--DIVISION-->
      <!--endDIVISION-->
      </BODY>
      </HTML>
    Your message has been successfully submitted and would be delivered to recipients shortly.