• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Automatisches Inhaltsverzeichnis

L

ldb

Mitglied
Hallo liebe JavaScriptler,

Ich beherrsche JavaScript leider nicht wirklich und bin erst am Anfang einer langen Lernphase, deshalb eine Frage an euch Profis:

Ich möchte eine HTML-Seite erstellen, die ein automatisches Inhaltsverzeichnis erstellt. Zuoberst auf der Seite kommt ein Banner hin, danach das Inhaltsverzeichnis, welches 3-Spaltig sein soll (links das erste Kapitel, in der Mitte das zweite, rechts das dritte, unter dem ersten das Vierte usw.) Die jeweiligen Kapitel sollen Unterkapitel beinhalten und durch anklicken soll automatisch zum entsprechenden Text hinuntergescrollt werden. Der Inhalts/Textblock befindet sich nämlich unter dem Inhaltsverzeichnis. Ich möchte das Inhaltsverzeichnis nicht von Hand verlinken müssen, sondern automatisch alle h2 und h3-tags abfragen und per Script als Inhaltsverzeichnis darstellen lassen. Dazu soll auch die scroll-Funktion automatisch generiert werden.

Um das ganze zu visualisieren habe ich mal einen Entwurf gezeichnet:
Beispiel-01.jpg

(Das Bild sollte man sich auf einem grossen Monitor ansehen oder reinzoomen ;) )


Meine Frage an euch: Gibt es für so etwas bereits ein fertiges JQuery-Script oder hat jemand von euch eine Idee, wie ich als JavaScript-Anfänger so etwas lösen könnte? Oder hat jemand von euch sogar eine pfannenfertige Lösung?

Die Seite darf leider kein php enthalten, weil sie später ab CD und ohne XAMPP laufen muss :(


Ich bin froh um jeden eurer Beiträge!

Liebe Grüsse und vielen Dank,

Lukas
 
Hallo,

also fertiges nicht aber mit each() solltest schon recht weit kommen, muss halt logisch aufgebaut sein dein html das die schleife das richtig findet.

Cheffchen
 
Hallo Cheffchen,

Danke für den Tipp!

Leider habe ich noch zu wenig Erfahrung mit JQuery, um so etwas alleine aufzubauen. Google hat mich leider nicht wirklich weiter gebracht, hättest du eventuell etwas konkretere Beispiele?

Danke dir herzlich!
 
Hallo,

was fertiges natürlich nicht.
jquery site ist immer gut: jQuery.each() | jQuery API Documentation
Und hier mal was ich erst vor kurzen gebastelt habe: jquery each find schleife - jsFiddle
Da werden alle class span4 gesucht und dann weiter verarbeitet, bekommen eine neue classe dazu und alle 3 ändert die sich.

Du brauchst ja bloss alle eine classe geben und schon kannst die auslesen in der each() schleife mit
var text=$(this).html();
Zum Vergrößern anklicken....
und mit text oder so machst weiter....

Cheffchen
 
Danke! Ich werde mir das mal anschauen. Ich habe aber die Befürchtung, dass ich selbst damit nicht selber eine solche Funktion schrieben kann. Ich bin wohl auf eure Unterstützung angewiesen...

Irgendwie müsste ich es ja hinbekommen, dass zwei verschiedene Klassen (h1 und h2) automatisch erkannt und je nach Wert als Überschrift oder Unterüberschrift einsortiert werden. Ausserdem sollte ja noch ein automatischer scrollTo-Link generiert werden... Puh, da habe ich ganz schön was vor! Und zu guter letzt muss das alles auch noch 3-Spaltig sein. Ich habe echt keine Ahnung, wie ich anfangen soll.


Das danke hast du dir aber verdient!
 
Ich verstehe die Fragestellung nicht so wirklich.

- Es darf kein Webserver (PHP/MySQL) verwendet werden.
- Überschriften und Links sollen per JS als Inhaltsverzeichnis dargestellt werden.

Woher sollen denn die Inhalte der Links und Überschriften bezogen werden? Wenn diese mangels Datenbank ohnehin statisch im HTML angelegt werden müssen, benötigt man für das Inhaltsverzeichnis doch kein JS mehr. Das lässt sich ebenso per CSS gestalten.
 
Hallo Tronjer,

Ja, die Seite ist eine einzige, statische. Der Grund für das automatische Inhaltsverzeichnis liegt in der Grösse des Dokuments: Dieses word später den Umfang von ca. 30 Kapiteln mit jeweils ca. 10 Unterkapiteln haben, was von Hand extrem aufwändig zu machen ist. Ich müsste bei jedem neuen Kapitel immer eine id zuweisen, diese im Inhaltsverzeichnis per ScrollTo-Script abfragen und das ganze auch für die Umterkapitel...

Deshalb wäre die viel elegantere Lösung, einfach alle h1 und h2 automatisch ein Inhaltsverzeichnis generieren zu lassen. Ausserdem sollte das Inhaltsverzeichnis aus gefloateten divs bestehen, die automatisch bei jedem neuen h1-Element (Kapitelüberschrift) erstellt werden, so dass immer 3 Kapitel nebeneinander Platz haben...

Puh, das wird ja mal ein Projekt, vielleicht könnt ihr mich erleuchten?

Liebe Grüsse!
 
hallö,

Tronjer, er ist einfach zu faul :-)

wie gesagt den weg habe ich gezeigt, so was wildes ist das nun auch nicht, jquery solltest hält ein bisschen kennen.

cheffchen
 
Hallo Cheffchen, das finde ich jetzt ein bisschen unschön...

Ich bin durchaus gewillt, selber etwas zu leisten, aber ich habe von JQuery wirklich zu wenig Ahnung. Das ist auch der Grund, wieso ich überhaupt um eure Hilfe bitte. Ich finde es nicht besonders konstruktiv, wenn du mich als faul abstempelst, nur weil ich JQuery und JavaScript einfach viel zu wenig kenne, um so etwas zu realisieren...

Trotzdem, danke für die bisherigen Hilfstellungen, vielleicht hat ja jemand noch eine Idee?
 
Wieso soll es eigentlich genau eine Seite sein?

Hintergrund meiner Frage ist meine alternative Idee: man könnte auch XML mit XSL dafür verwenden. Die XML enthält dabei die Inhalte und ist die Datei die vom Browser aufgerufen wird. Die XSL wird dann dafür verwendet die in der XML vorhandenen Inhalte zu formatieren und (wie Du es wünschst) ggfs. auch ein Inhaltverzeichnis voranzustellen. Die XSL wird dabei nicht direkt aufgerufen sondern müsste vom Browser zur Darstellung der XML mitgeladen werden (was man per entsprechende Zeile in der XML-Datei sagt).

Voraussetzung dafür: genau wie bei der jQuery-Idee müsstest Du dich mit XML und XSL beschäftigen. Das ist im Vergleich mit jQuery durchaus komplexer. Zudem wäre es die Frage wie Du die Datei mit den Inhalten bearbeitest. Wenn Du sie in einem Texteditor wie Notepad++ bearbeitest, wäre die Pflege der XML-Datei durchaus möglich. Wenn Du aber irgendetwas anderes verwendest, könnte es evtl. schwierig werden.
 
Hallo threadi,

Danke für deine Fragen und Tipps!

Die Idee mit XML klingt zwar gut, aber wenn das komplexer als JQuery ist, werde ich wohl nicht damit arbeiten. Die Seite wird später ein Bewerbungsdossier, das in ca. einem halben Jahr fertig werden sollte.

Auf dieser Seite werde ich eine Art Workbook einbauen, also ein Dossier mit gelerntem und Informationen über Programme.

Ich denke mal, dass ich es wohl doch von Hand lösen muss, dein Vorschlag klingt zwar gut, aber ich denke mal dass der Aufwand nicht gerechtfertigt ist.

Ich hatte ursprünglich gehofft, dass es vielleicht bereits scripts gäbe, die man nur noch anpassen könnte. Aber es sieht wohl nicht so aus.

Zur Info: Ich nutze Gedit für Mac und Notepad++ für Windows.

Falls jemand noch irgendeinen Geistesblitz hat, würde mich das sehr freuen, andernfalls danke ich euch allen für eure Hilfe.

Liebe Grüsse
Lukas
 
@cheffchen
So ganz einfach ist das für einen Anfänger nicht. ;)

@ldb

Ich kann dir einen Ansatz nennen, aber wenn du willst, dass jemand diesen für umsetzt, musst du es schon als Auftrag an die Jobbörse geben. Ansonsten betrachte es als Gelegenheit, etwas jQuery zu lernen.

Zwei Divs im HTML. Ein leeres für das Inhaltsverzeichnis und eines mit dem Seiteninhalt.

HTML: 
<div id="inhaltsverzeichnis"><div>

<div id="seiteninhalt">
  <div id="projektmangement">
    <div id="einführung"></div>
    <div id="grundlegendes"></div>
    .....
  </div>
  <div id="Photoshop"></div>
  ...
</div>

Was ich jetzt machen würde, wäre:
- über alle Kindelemente der ersten und zweiten Ebene von #seiteninhalt iterieren.
- für jeden Treffer auf der ersten Ebene eine <ul> in #inhaltsverzeichnis anlegen und die ID des Kindelements als HTML in ein <li> schreiben.
- für jeden Treffer auf der zweiten Ebene ein <li><a> an die korrespondiere <ul> anhängen und dort die IDs als HTML übergeben.
- der Rest ist CSS

Du solltest diese Funktionen kennen: each(), html(), find(), children(), wrap(), appendTo() und wissen, was traversieren im DOM bedeutet.
 
Hallo Tronjer,

Danke vielmals für deine Hilfe!

Das hilft mir schon mal ziemlich weiter.
Ich befürchte aber, dass meine JavaScript-Kentnisse auch für eine solche, eigentlich recht simple Aufgabe nicht ausreichen.

Deine Idee mit der Jobbörse finde ich deshalb gut.

Ich überlege mir mal, was ich bereit wäre zu investieren bzw. was ich als "Tauschmittel" anbieten könnte.


Einen schönen Abend!

(Ich habe mal "Danke" geklickt ;) )
 
Finde ich eigentlich schade. Warum willst du es denn nicht selber machen? Solltest du dich weiterhin mit Webseiten beschäftigen wollen, wirst du ohnehin nicht darum herumkommen, die Grundlagen der Programmierung zu lernen.

Ich habe dir unten ein Script geschrieben, das die Elemente der ersten Ebene sammelt und daraus Listen baut. Dazu sind ganze drei Zeilen jQuery notwendig. Das kannst du nun entweder ausbauen oder weiterreichen.


Die Einrückungen macht der Editor hier. Keine Lust, das manuell zu korrigieren
HTML: 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        $('#seiteninhalt > div').each(function(index) {
          $('<ul><li>' + $(this).prop('id') + '</li></ul>').appendTo('#inhaltsverzeichnis');
        });
        
    })
    </script>
    <style type="text/css">
        ul {
            list-style: none;
            float: left;
        }
        ul li {
            text-transform: capitalize;
        }
        #seiteninhalt {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="inhaltsverzeichnis"></div>




    <div id="seiteninhalt">
      <div id="projektmangement">
         <div id="einführung"></div>
          <div id="grundlegendes"></div>
     </div>
    <div id="photoshop"></div>
</div>
</body>
</html>
 
Hallo Tronjer,

Vielen, vielen Dank für deine Mühe!

Ich schaue mir das mal an, vielleicht schaffe ich es ja wirklich selber, die nötigen Änderungen vorzunehmen.
Du hast im Grunde recht: So lerne ich auch gleich etwas wichtiges.

Heute Abend habe ich dafür leider keine Zeit, aber ich schaue mir das morgen genauer an.


Ich danke dir jedenfalls für deine Bemühungen und deinen freundlichen Rat!
 
Hallo,

Ich hatte doch Zeit, mir das mal anzuschauen. Ich habe es immerhin geschafft, die Untergeordneten Elemente anzusprechen. Jetzt bräuchte ich aber schon wieder eine Hilfestellung:

Ich spreche die Untergeordneten Elemente direkt mit ihrer id an, das ist aber ja nicht der Sinn der Sache, weil ich je nach Kapitel immer die entsprechenden Unterkapitel haben möchte. Ich nehme an, dass ich dafür irgendeinen Selektor verwenden kann, um die untergeordneten Elemente des jeweiligen Kapitels anzusprechen?

Mein Code:
HTML: 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

        $('#seiteninhalt > div').each(function(index) {
        $('<ul>' + $(this).prop('id') + '</ul>').appendTo('#inhaltsverzeichnis');

<!-- Hier sollte nicht #projektmanagement sondern der selektor des jeweiligen Überkapitels hin -->
            $('#projektmanagement > div').each(function(index) {
            $('<ul><li>' + $(this).prop('id') + '</li></ul>').appendTo('#inhaltsverzeichnis');
            });
        });

        
    })
    </script>
    <style type="text/css">
        ul {
    text-transform: capitalize;
    float:left;
        }
        ul li {
    text-transform: capitalize;
    margin-left:30px;

        }
        #seiteninhalt {
            clear: both;
        }
    </style>
</head>
<body>
    <div id="inhaltsverzeichnis">
    </div>




    <div id="seiteninhalt">
        <div id="projektmanagement">
            <h1>Projektmanagement</h1>

            <div id="einführung">
                <h2>Einführung</h2> <p>Some random Text, Lorem Ipsum</p>
            </div>

            <div id="grundlegendes">
                <h2>Grundlegendes</h2><p>Some random Text, Lorem Ipsum</p>
            </div>

        </div>

        <div id="photoshop">
            <h1>Photoshop</h1><p>Some random Text, Lorem Ipsum</p>

            <div id="Die Werkzeuge">
                <h2>Die Werkzeuge</h2> <p>Some random Text, Lorem Ipsum</p>
            </div>

            <div id="Weitere Infos">
                <h2>Weitere Infos</h2><p>Some random Text, Lorem Ipsum</p>
            </div>
        </div>
    </div>
</body>
</html>


Vielleicht kannst du mich da erleuchten?

In einem späteren Schritt müsste ich es noch schaffen, die jeweiligen Kapitel mit ihren Unterkapiteln in divs zu packen, die ich dann mit float:left zu
3er-Spalten anordnen kann.


Ich danke dir schon jetzt :)

Schönen Abend und liebe Grüsse

Lukas
 
Du kannst die Selektoren genauso wie in CSS setzen. Ich habe hier alle Divs der ersten Ebene in #seiteninhalt gewählt.
 
Das habe ich mir so gedacht. Was ich aber möchte, wäre immer die divs, die dem Kapitel untergeordnet sind. Also zum Beispiel:

Photoshop
-- Die Werkzeuge

Projektmanagement
-- Informationen

Ich möchte aber im Code nicht fix "#photoshop" schreiben müssen, denn dann wären ja immer nur die Unterthemen von Photoshop sichtbar. Statdessen möchte ich anstelle von Photoshop eine variable verwenden, die sich immer ändert. So dass bei Photoshop die Unterkategorien davon stehen und bei Projektmanagement die dazugehörigen.

Ich hoffe, ich habe mich verständlich genug ausgedrückt ;)

Danke und Gruss!
 
Hallo Cheffchen,

Genau so etwas hatte ich mir vorgestellt, vielen, vielen Dank!

Ich werde wohl mit diesem Code weiterarbeiten :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben