javascript problem

thj01 · Indlæg af **thj01** » 20. nov 2015, 09:25

Jeg er begyndt at skrive alle mine dokumenter til Linuxundervisning i HTML5, da det giver mig en god skriveproces samtidig med det giver mig fuld kontrol over design og opsætning.

I den sammenhæng har jeg hacket et TOC script: http://www.whitsoftdev.com/articles/toc.html. Det jeg har gjort er at tilføje to ekstra niveauer ... mener jeg at kunne huske.

Mit problem er, at jeg gerne vil have tocscriptet til også at generere en overskriftslinie der siger: "Indholdsfortegnelse" i en <div> tag ... og det kan jeg IKKE finde ud af

.

Er der nogen her der kan se løsningen?

Kode: Vælg alt

/*
 * Dynamic Table of Contents script
 * by Matt Whitlock <http://www.whitsoftdev.com/>
 * 
 * http://www.whitsoftdev.com/articles/toc.html
 * 
 */

function createLink(href, innerHTML) {
   var a = document.createElement("a");
   a.setAttribute("href", href);
   a.innerHTML = innerHTML;
   return a;
}


function generateTOC(toc) {
   var i1 = 0, i2 = 0, i3 = 0, i4 = 0, i5 = 0;
   toc = toc.appendChild(document.createElement("ul"));
   for (var i = 0; i < document.body.childNodes.length; ++i) {
      var node = document.body.childNodes[i];
      var tagName = node.nodeName.toLowerCase();

      if (tagName == "h5") {
         ++i5;
         if (i5 == 1) toc.lastChild.lastChild.lastChild.lastChild.appendChild(document.createElement("ul"));
         var section = i1 + "." + i2 + "." + i3 + "." + i4 + "." + i5;
         node.insertBefore(document.createTextNode(section + " "), node.firstChild);
         node.id = "section" + section;
         toc.lastChild.lastChild.lastChild.lastChild.lastChild.appendChild(document.createElement("li")).appendChild(createLink("#section" + section, node.innerHTML));
      }

      else if (tagName == "h4") {
         ++i4, i5 =0;
         if (i4 == 1) toc.lastChild.lastChild.lastChild.appendChild(document.createElement("ul"));
         var section = i1 + "." + i2 + "." + i3 + "." + i4;
         node.insertBefore(document.createTextNode(section + " "), node.firstChild);
         node.id = "section" + section;
         toc.lastChild.lastChild.lastChild.lastChild.appendChild(document.createElement("li")).appendChild(createLink("#section" + section, node.innerHTML));
      }
      else if (tagName == "h3") {
         ++i3, i4 = 0, i5 =0;
         if (i3 == 1) toc.lastChild.lastChild.appendChild(document.createElement("ul"));
         var section = i1 + "." + i2 + "." + i3;
         node.insertBefore(document.createTextNode(section + " "), node.firstChild);
         node.id = "section" + section;
         toc.lastChild.lastChild.lastChild.appendChild(document.createElement("li")).appendChild(createLink("#section" + section, node.innerHTML));
      }
      else if (tagName == "h2") {
         ++i2, i3 = 0, i4 = 0, i5 =0;
         if (i2 == 1) toc.lastChild.appendChild(document.createElement("ul"));
         var section = i1 + "." + i2 ;
         node.insertBefore(document.createTextNode(section + " "), node.firstChild);
         node.id = "section" + section;
         toc.lastChild.lastChild.appendChild(h2item = document.createElement("li")).appendChild(createLink("#section" + section, node.innerHTML));
      }
      else if (tagName == "h1") {
         ++i1, i2 = 0, i3 = 0, i4 = 0, i5 =0;
         if (i1 == 1) toc.appendChild(document.createElement("ul"));
         var section = i1;
         node.insertBefore(document.createTextNode(section + "  "), node.firstChild);
         node.id = "section" + section;
         toc.lastChild.appendChild(h2item = document.createElement("li")).appendChild(createLink("#section" + section, node.innerHTML));
      }
   }
}

Indlæg af **AJenbo** » 20. nov 2015, 11:16

Kode: Vælg alt

   var i1 = 0, i2 = 0, i3 = 0, i4 = 0, i5 = 0;
   toc = toc.appendChild(document.createElement("div").innerHTML = 'Indholdsfortegnelse');
   toc = toc.appendChild(document.createElement("ul"));

Skal lige indrømme at jeg ikke har testet, men jeg kan heller ikke se hvordan du kalder din funktion.

thj01 · Indlæg af **thj01** » 20. nov 2015, 14:23

Har lige testet ... scriptet dør ...

Starten af htmlfilen ser ud som følger:

Kode: Vælg alt

<html>

<body onload="generateTOC(document.getElementById('toc'));">
   
   <div class="title">Introduktion til Python</div>

   <div class="indhold">Indholdsfortegnelse</div>
   
   <div id="toc"></div>

Det er div'en jeg gerne vil have flyttet ind i scriptet ...

Indlæg af **AJenbo** » 27. nov 2015, 20:44

Beklager det tog lige lidt tid før jeg fik kigget på den her, du skal blot tilføje følgende kode i starten af generateTOC() funktionen:

Kode: Vælg alt

   var title = document.createElement('div');
   title.appendChild(document.createTextNode('Indholdsfortegnelse'))
   title.className = 'indhold'
   toc.parentNode.insertBefore(title, toc);

Jeg vil råde dig til at bruge et frame work eks. jQuery til at håndtere din DOM manipulation så det ikke bliver så komplekst som det du har pt.

lath · Indlæg af **lath** » 27. nov 2015, 21:24

thj01 skrev:Jeg er begyndt at skrive alle mine dokumenter til Linuxundervisning i HTML5, da det giver mig en god skriveproces samtidig med det giver mig fuld kontrol over design og opsætning.
...

Sjovt - jeg har også brugt HTML5 til dokumentation - og af de samme årsager.
Jeg vil som AJenbo også anbefale at bruge jQuery.

På et tidspunkt faldt jeg over AsciiDoc:

http://asciidoc.org/ der har implementeret det ved at bruge Python, og så er der AsciiDcotor: http://asciidoctor.org/, som har implementeret det ved at bruge Ruby.
https://en.wikipedia.org/wiki/AsciiDoc
What is AsciiDoc? Why do we need it?
http://asciidoctor.org/docs/what-is-asciidoc/
AsciiDoc cheatsheet
http://powerman.name/doc/asciidoc
Jeg er ret begejstret for at AsciiDoc kan generere dokumenter i blandt andet følgende formater:
HTML, PDF, EPUB, DVI, LaTeX, roff, PostScript, og man sider

AsciiDoc er lige mig.
Jeg vil godt anbefale at du tager et kig på det.

/Lars

Ubuntu Danmark support

javascript problem

javascript problem

Re: javascript problem

Re: javascript problem

Re: javascript problem

Re: javascript problem