abclinuxu.cz AbcLinuxu.cz itbiz.cz ITBiz.cz HDmag.cz HDmag.cz abcprace.cz AbcPráce.cz
AbcLinuxu hledá autory!
Inzerujte na AbcPráce.cz od 950 Kč
Rozšířené hledání
Přihlášení | Registrace
×
napište » Zprávičky
inzerujte » Pracovní nabídky
    DietPi 9.20
    včera 17:11 | Nová verze

    Byla vydána nová verze 9.20 z Debianu vycházející linuxové distribuce DietPi pro (nejenom) jednodeskové počítače. Přehled novinek v poznámkách k vydání. Vypíchnout lze například nový balíček RustDesk Server pro vzdálený přístup.

    Ladislav Hagara | Komentářů: 0
    OpenShot 3.4.0
    včera 14:44 | Nová verze

    Jonathan Thomas oznámil vydání nové verze 3.4.0 video editoru OpenShot (Wikipedie). Představení novinek také na YouTube. Zdrojové kódy OpenShotu jsou k dispozici na GitHubu. Ke stažení je i balíček ve formátu AppImage. Stačí jej stáhnout, nastavit právo na spouštění a spustit.

    Ladislav Hagara | Komentářů: 0
    Opus a libopus 1.6
    včera 14:22 | Nová verze

    Byla vydána nová verze 1.6 otevřeného, licenčními poplatky nezatíženého, univerzálního ztrátového formátu komprese zvuku Opus (Wikipedie) a jeho referenční implementace libopus. Podrobnosti na demo stránce.

    Ladislav Hagara | Komentářů: 2
    Vojtux, linuxová distribuce pro zrakově postižené uživatele
    včera 01:33 | Komunita

    Vojtěch Polášek představil Vojtux, tj. linuxovou distribuci pro zrakově postižené uživatele. Vychází ze spinu Fedory 43 s desktopovým prostředím MATE. Konečným cílem je, aby žádný Vojtux nebyl potřeba a požadovaná vylepšení se dostala do upstreamu.

    Ladislav Hagara | Komentářů: 10
    GIMP 3.2 RC2
    včera 00:33 | Nová verze

    Byla vydána (Mastodon, 𝕏) druhá RC verze GIMPu 3.2. Přehled novinek v oznámení o vydání. Podrobně v souboru NEWS na GitLabu.

    Ladislav Hagara | Komentářů: 0
    Raspberry Pi Official Magazine 160
    15.12. 15:22 | Zajímavý článek

    Nové číslo časopisu Raspberry Pi zdarma ke čtení: Raspberry Pi Official Magazine 160 (pdf).

    Ladislav Hagara | Komentářů: 0
    Izrael od února zakáže mobilní telefony na základních školách
    15.12. 14:11 | IT novinky

    Izrael od února zakáže dětem používat v prostorách základních škol mobilní telefony. Podle agentury AFP to uvedlo izraelské ministerstvo školství, které zdůraznilo negativní dopady, které na žactvo používání telefonů má. Izrael se tímto krokem přidává k rostoucímu počtu zemí, které dětem ve vzdělávacích zařízeních přístup k telefonům omezují.

    Ladislav Hagara | Komentářů: 32
    EU pravděpodobně potrestá Google za preferování vlastních služeb
    15.12. 14:00 | IT novinky

    Internetová společnost Google ze skupiny Alphabet pravděpodobně dostane příští rok pokutu od Evropské komise za nedostatečné dodržování pravidel proti upřednostňování vlastních služeb a produktů ve výsledcích vyhledávání. V březnu EK obvinila Google, že ve výsledcích vyhledávání upřednostňuje na úkor konkurence vlastní služby, například Google Shopping, Google Hotels a Google Flights. Případ staví Google proti specializovaným

    … více »
    Ladislav Hagara | Komentářů: 8
    Prague PostgreSQL Developer Day 2026 / program a registrace
    15.12. 12:22 | Pozvánky

    Byl oznámen program a spuštěna registrace na konferenci Prague PostgreSQL Developer Day 2026. Konference se koná 27. a 28. ledna a bude mít tři tracky s 18 přednáškami a jeden den workshopů.

    TomasVondra | Komentářů: 0
    Síťařský CSNOG 2026: program a registrace jsou na webu
    15.12. 12:11 | Pozvánky

    Na webu československého síťařského setkání CSNOG 2026 je vyvěšený program, registrace a další informace k akci. CSNOG 2026 se uskuteční 21. a 22. ledna příštího roku a bude se i tentokrát konat ve Zlíně. Přednášky, kterých bude více než 30, budou opět rozdělené do tří bloků - správa sítí, legislativa a regulace a akademické projekty. Počet míst je omezený, proto kdo má zájem, měl by se registrovat co nejdříve.

    VSladek | Komentářů: 0
    Centrum | Napsat | Starší
    navrhněte » Anketa
    Jaké řešení používáte k vývoji / práci?
     (34%)
     (48%)
     (20%)
     (17%)
     (23%)
     (15%)
     (24%)
     (15%)
     (18%)
    Celkem 471 hlasů
     Komentářů: 19, poslední 11.12. 20:04
    Rozcestník
    AbcLinuxu
    HDmag.cz
    Tomáš - Tomik
    Aktuální zápisy
    ?Přístup k archivovaným zápisům za jednotlivé měsíce. Archív

    ?Přístup na osobní hlavní stranu a na hlavní stranu všech blogů. Navigace
    Nej blogů na AbcLinuxu
    Nejčtenější za poslední měsíc Nejkomentovanější za poslední měsíc
    AbcLinuxu:/ Blogy / Tomik / Linux / Užitečné skripty 3: automaticky generovaný obsah v HTML
    Štítky: HTML, web, Windows

    Užitečné skripty 3: automaticky generovaný obsah v HTML

    11.3.2007 21:49 | Přečteno: 2365× | Linux

    Dnešní téma nebude úplně linuxové, i když zkušený demagog by jistě zdůvodnil, že do linuxu patří. Podíváme se, jak udělat v HTML souboru obsah (table of content, abych předešel nedorozumnění), který se generuje úplně sám. Samozřejmě s pomocí Javascriptu.

    Abstrakt

    Určitě jste už někdy potřebovali napsat kratší návod nebo krátký technický dokument. Technická dokumentace by měla mít na začátku obsah (TOC). Musíme tedy najít takový formát, který umí obsah (TOC) vygenerovat sám, protože udržovat dokument i s obsahem (TOC) je mírně řečeno nešikovné.

    Popíšeme si tedy kousek Javascriptu, který umí vygenerovat a zobrazit klikací obsah v HTML. Někdy je totiž použití TeXu nevhodné (čtenář neocení krásné slitky fi, fl, ffi, ffl, vyrovnané mezery ve slově PLAVAT atd. Nehledě k tomu, že na Windows je GSView vzácnost. Stručně řečeno házíme perly sviním). Word nebo Swriter je je trošku jiná kategorie, hodně lidí s nimi nechce mít nic společného a navíc se moc nedá čekat, že příjemce uvidí dokument stejně jako my. (U HTML se to už vůbec nedá čekat, ale s tím se tak nějak počítá).

    Samotný skript

    Skript jsem nevymyslel sám, většinu jsem přebral z [2], ale poskládal jsem ho celý do stavu, ve kterém se dá hned použít. Zde je tedy prázdný dokument, který se bude sám udržovat obsah (TOC), stačí do něj jenom doplnit vlastní text. 
    

      

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      2. 

    2. <html>
      3. 

    3.   <head>
      4. 

    4.    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
      5. 

    5.    <META NAME="AUTHOR" CONTENT="Tomas Penicka">
      6. 

    6. <!-- Based on http://www.quirksmode.org/dom/toc.html, but some changes were made-->
      7. 

    7. <script type="text/javascript">
      8. 


    8. function getElementsByTagNames(list,obj) {
      9. 

    9. 	if (!obj) var obj = document;
      10. 

    10. 	var tagNames = list.split(',');
      11. 

    11. 	var resultArray = new Array();
      12. 

    12. 	for (var i=0;i<tagNames.length;i++) {
      13. 

    13. 		var tags = obj.getElementsByTagName(tagNames[i]);
      14. 


    14. 		for (var j=0;j<tags.length;j++) {
      15. 

    15. 			resultArray.push(tags[j]);
      16. 

    16. 		}
      17. 

    17. 	}
      18. 

    18. 	var testNode = resultArray[0];
      19. 

    19. 	if (!testNode) return [];
      20. 


    20. 	if (testNode.sourceIndex) {
      21. 

    21. 		resultArray.sort(function (a,b) {
      22. 

    22. 				return a.sourceIndex - b.sourceIndex;
      23. 

    23. 		});
      24. 

    24. 	}
      25. 

    25. 	else if (testNode.compareDocumentPosition) {
      26. 


    26. 		resultArray.sort(function (a,b) {
      27. 

    27. 				return 3 - (a.compareDocumentPosition(b) & 6);
      28. 

    28. 		});
      29. 

    29. 	}
      30. 

    30. 	return resultArray;
      31. 

    31. }
      32. 


    32. 

    33. function createTOC() {
      34. 

    34. 	var y = document.createElement('div');
      35. 

    35. 	y.id = 'innertoc';
      36. 

    36. 	var a = y.appendChild(document.createElement('span'));
      37. 

    37. 	a.onclick = showhideTOC;
      38. 

    38. 	a.id = 'contentheader';
      39. 


    39. 	a.innerHTML = 'hide page contents';
      40. 

    40. 	var z = y.appendChild(document.createElement('div'));
      41. 

    41. 	var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5,h6');
      42. 

    42. 	if (toBeTOCced.length < 2) return false;
      43. 

    43. 

    44. 	for (var i=0;i<toBeTOCced.length;i++) {
      45. 


    45. 		var tmp = document.createElement('a');
      46. 

    46. 		tmp.innerHTML = toBeTOCced[i].innerHTML;
      47. 

    47. 		z.appendChild(tmp);
      48. 

    48.         tmp.className = 'indent' + toBeTOCced[i].nodeName.substring(1);
      49. 

    49. 		var headerId = toBeTOCced[i].id || 'link' + i;
      50. 

    50. 		tmp.href = '#' + headerId;
      51. 


    51. 		toBeTOCced[i].id = headerId;
      52. 

    52. 	}
      53. 

    53. 	return y;
      54. 

    54. }
      55. 

    55. 

    56. var TOCstate = 'block';
      57. 

    57. 

    58. function showhideTOC() {
      59. 


    59. 	TOCstate = (TOCstate == 'none') ? 'block' : 'none';
      60. 

    60. 	var newText = (TOCstate == 'none') ? 'show page contents' : 'hide page contents';
      61. 

    61. 	document.getElementById('contentheader').innerHTML = newText;
      62. 

    62. 	document.getElementById('contentheader').onclick = showhideTOC;
      63. 

    63. 	document.getElementById('innertoc').lastChild.style.display = TOCstate;
      64. 

    64.     alert();
      65. 


    65. }
      66. 

    66. </script>
      67. 

    67. <style type="text/css">
      68. 

    68. 	#toc a   {display: block; margin-top: 2pt; background-color: #EEEEEE;}
      69. 

    69. 	#toc a:hover   {background-color: #CCCCFF;}
      70. 

    70. 	.indent2    {margin-left: 0em;}
      71. 

    71. 	.indent3    {margin-left: 2em;}
      72. 


    72. 	.indent4    {margin-left: 4em;}
      73. 

    73. 	.indent5    {margin-left: 6em;}
      74. 

    74. 	.indent6    {margin-left: 8em;}
      75. 

    75. </style>
      76. 

    76.     <title></title>
      77. 

    77.   </head>
      78. 


    78. <body onLoad="document.getElementById('toc').appendChild(createTOC());">
      79. 

    79. <!-- The following DIV is exactly the place, where to TOC will be located, don't remove this -->
      80. 

    80. <div id="toc"></div>
      81. 

    81. 

    82. </body>
      83. 

    83. </html>
      84.
    Lehké vysvětlení: Skript jsem testoval ve Firefoxu (Linux i Windows) a IE6. V obojím funguje.

    Chtěl jsem ještě přidat odkaz na příklad, ale zápisek už jsem uložil. (To byl vtip, ve skutečnosti jsem chtěl přidat k zápisku přílohu dostal jsem chybovou hlášku "přístup odmítnout")

    Odkazy

    1. http://www.quirksmode.org/dom/getElementsByTagNames.html
    2. http://www.quirksmode.org/dom/toc.html

    Místa k vylepšení, otázky

    1. Odkazy v obsahu mají nepříjemnou vlastnost--aktivní je celý řádek, ne jenom text. Dá se to nějak snadno zlepšit?
    2. Uměl by někdo přidat automatické číslování?
    3. Nadpisy v HTML se dost špatně opticky odlišují. Šlo by zařídit, aby i text dokumentu byl odražený od levého kraje podobně jako položky obsahu?
           

    Hodnocení: 100 %

            špatné • dobré        

    Anketa

    Shledali jste skript užitečným? (V případě záporného hodnocení napište důvody v diskusi)
     (15 %)
     (23 %)
     (15 %)
     (46 %)
    Celkem 13 hlasů

    Tiskni Sdílej: Linkuj Jaggni to Vybrali.sme.sk Google Del.icio.us Facebook

    Komentáře

    Nástroje: Začni sledovat (0) ?Zašle upozornění na váš email při vložení nového komentáře. , Tisk

    Vložit další komentář

    11.3.2007 22:49 anicka | blog: ze_zivota
    Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML
    Pokud jde o TeX, Windows a perly svinim: cspdftex mi vzdycky chodil docela pekne a psat v TeXu da IMHO min prace nez psat v cemkoliv jinem. Ale proti gustu... :-)
    ^D
    12.3.2007 09:40 botanicus | blog: Botanicusovi povzdechy | Prachatice
    Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML
    +1
    ... mam chut na jablicka ;)
    12.3.2007 11:55 Käyttäjä 11133 | skóre: 58 | blog: Ajattelee menneisyyttä
    Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML
    Spát v plaintextu je ještě méně práce, jinak taky LaTeX. :-)
    12.3.2007 13:22 Tomáš | skóre: 31 | blog: Tomik
    Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML
    Spát rozhodně. :-)

    TeX samozřejmě používám raději, mám plno svých maker pro plain (LaTeX moc nemusím). Někdy je ale lepší sáhnout po tom, co umí i kolegové, aby mohli opravovat chyby apod.

    11.3.2007 23:44 Ritchie | skóre: 27 | blog: Ritchie's | Berlin
    Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML
    Používat innerHTML je poněkud nečisté, co takhle zkusit metody cloneNode a replaceData?

    Ideální řešení by stavělo na DOM objektu NodeIterator. Bohužel jeho implementace v prohlížečích je problematická.

    Odpovědi na otázky

    1. Protože jste element a učinil blokovým elementem. Čisté řešení je použití zanořených seznamů a element a ponechat řádkovým.
    2. Elegantní řešení je obsaženo v předešlé odpovědi.
    3. Řešení spočívá v přiřazení záporného levého okraje nadpisům a kladného levého okraje předku všech textů.
    12.3.2007 08:56 Tomáš | skóre: 31 | blog: Tomik
    Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML
    Díky za odpovědi, ještě mám pár komentářů.
    1. Jak moc by to zkomplikovalo kód? Přeci jenom jsem se snažil o co nejjednodušší řešení
    2. A co číslování v textu?
    3. To je dobý hack. Až budu mít čas, tak si to přepíšu.
    12.3.2007 09:40 Ritchie | skóre: 27 | blog: Ritchie's | Berlin
    Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML
    1. Záleží, jak elegantně byste to napsal. ;-) Lze to napsat jako cyklus odhadem s 15–20 řádky kódu.
    2. Ideálně CSS 2.1 kapitola 12.4, v prohlížečích bohužel příliš nepodporováno. Jinak javascript na 10 řádků.
    12.3.2007 08:09 Zdeněk Burda | skóre: 61 | blog: Zdendův blog | Praha
    Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML
    Nemám rád zbytečný javascript. Ah, to není pravda, nenávidím ho! Proč při psaní dokumentu prostě nezvolit vhodný způsob, který ho vygeneruje automaticky? Používám Docbook, generuje číslování, toc a vše co potřebuju. Proti javascriptu má tu velkou výhodu, že funguje i v lynxu.
    -- Nezdar není hanbou, hanbou je strach z pokusu.
    12.3.2007 08:51 Tomáš | skóre: 31 | blog: Tomik
    Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML
    Plně souhlasím s námitkou (javascript taky moc nemusím), ale někdy prostě nemůžu použít pořádné řešení. První důvod je ten, že Docbook nemumím používat. Druhý důvod je, že dokument musí být univerzálně přenositelný a musí jít opravit odkudkoliv (ne všechny počítače mají nainstalovaný patřičný software). Třetí důvod je, si nemůžu vybírat programové prostředí. Prostě si na počítač nesmím instalovat všechno, na co si vzpomenu.
    Josef Kufner avatar 26.1.2012 18:45 Josef Kufner | skóre: 70
    Rozbalit Rozbalit vše Re: Užitečné skripty 3: automaticky generovaný obsah v HTML
    http://duramecho.com/ComputerPrograms/HtmlHeadingsToTableOfContents/index.html
    Hello world ! Segmentation fault (core dumped)

    Založit nové vlákno • Nahoru

    Píšeme jinde
    ISSN 1214-1267   www.czech-server.cz
    Redakce | Inzerce | Podmínky použití | Osobní údaje
    © 1999-2015 Nitemedia s. r. o. Všechna práva vyhrazena.