javascript problem
-
thj01
- Indlæg: 2667
- Tilmeldt: 21. nov 2006, 10:06
- Geografisk sted: Fredericia
javascript problem
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?
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));
}
}
}
Forfatter til Ubuntuguiden: http://www.vidas.dk/guides/ubuntuguiden.html
Kører LTS udgaverne.
"It's always easy if you know how to do it."
Kører LTS udgaverne.
"It's always easy if you know how to do it."
-
AJenbo
- Admin
- Indlæg: 20860
- Tilmeldt: 15. nov 2009, 15:04
- IRC nickname: AJenbo
- Geografisk sted: Vanløse, København
Re: javascript problem
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: 2667
- Tilmeldt: 21. nov 2006, 10:06
- Geografisk sted: Fredericia
Re: javascript problem
Har lige testet ... scriptet dør ...
Starten af htmlfilen ser ud som følger:
Det er div'en jeg gerne vil have flyttet ind i scriptet ...
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 ...
Forfatter til Ubuntuguiden: http://www.vidas.dk/guides/ubuntuguiden.html
Kører LTS udgaverne.
"It's always easy if you know how to do it."
Kører LTS udgaverne.
"It's always easy if you know how to do it."
-
AJenbo
- Admin
- Indlæg: 20860
- Tilmeldt: 15. nov 2009, 15:04
- IRC nickname: AJenbo
- Geografisk sted: Vanløse, København
Re: javascript problem
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:
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.
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: 5095
- Tilmeldt: 27. apr 2008, 02:16
- IRC nickname: lars_t_h
- Geografisk sted: Fyn
Re: javascript problem
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
Jeg er Software ingeniør (Diplomingeniør) i Informationsteknologi og indlejede systemer, hvor indlejrede systemer er computer (microcontroller) + elektronik i for eksempel et TV, en router, en vaskemaskine og den slags
Hvem er online
Brugere der læser dette forum: [Bot], Majestic-12 [Bot] og 0 gæster