✔ Eingeklappte Bausteine durchsuchbar, klappen aber nicht von alleine bei Treffer auf

N

Nusspli

Mitglied
Guten Morgen,

der Titel mag etwas verwirrend sein, aber ich wüsste es jetzt nicht anders zu beschreiben.

Ich habe von tombe hier schon großartige Hilfe bekommen, um eingeklappte Inhalte per Suche durchsuchbar zu machen und bei Treffer dann entsprechend aufzuklappen + zu markieren.

Code: 
<script language="javascript" type="text/javascript">
var orig = "";
var start = 0;
var div_count = 0;
 
function toggle(control) {
 
if(document.getElementById(control).style.display == "none") {
    document.getElementById(control).style.display = "block";
} else {
    document.getElementById(control).style.display = "none";
}
 
}
 
function highlight () {
suche = document.getElementById("txtSuche").value.toLowerCase();
 
if (orig == "") {
    orig = document.getElementById("inhalt").innerHTML;
} else {
    document.getElementById("inhalt").innerHTML = orig;
}
 
if (div_count >= document.getElementsByTagName('div').length) {
    div_count = 0;
    start = 0;
    alert("Das Ende der Seite wurde erreicht oder \n            der Suchbegriff wurde nicht gefunden!");
    return;
}
 
if (document.getElementsByTagName('div')[div_count].className == "xxx") {
    text = document.getElementsByTagName('div')[div_count].innerHTML.toLowerCase();
    orig_text = document.getElementsByTagName('div')[div_count].innerHTML;
    start = text.indexOf(suche, start);
    if (start == -1) {
        div_count = div_count + 1;
        start = 0;
        highlight();
        return;
    }
 
    ende = start + suche.length;
    neu = orig_text.substring(0, start) + "<span style='color:red; font-weight: bolder;'><a name='treffer'>" + orig_text.substring(start, ende) + "</a></span>" + orig_text.substring(ende);
    document.getElementsByTagName('div')[div_count].innerHTML = neu;
    start = ende;
    document.getElementsByTagName('div')[div_count].style.display = "block";
    location.href = "#treffer";
   } else {
    div_count = div_count + 1;
    start = 0;
    highlight();
}
 
if (div_count >= document.getElementsByTagName('div').length || start == -1) {
    div_count = 0;
    start = 0;
}
 
}
 
function reset (){
    start = 0;
    div_count = 0;
 
}
</script>

So...jetzt mein Problem, dass zwar alles durchsucht wird, aber nur die erste Ebene aufklappt. Sprich, habe ich unter einem eingeklappten Hauptpunkt mehrere eingeklappte Unterpunkte (der Übersichtlichkeit wegen), werden diese zwar durchsucht (und die Treffer auch markiert), aber nicht mehr automatisch aufgeklappt. Woran das liegt glaube ich zu wissen, kann es aber nicht beheben. Er versucht wohl, den Unterpunkt aufzuklappen...scheitert aber, da der Hauptpunkt ja noch gar nicht aufgeklappt ist. Liege ich da richtig?

Zudem ist als Markier-Farbe "rot" eingestellt...tatsächlich wird aber in schwarz markiert. :(

Schon mal vielen Dank für die Hilfe und viele Grüße

Nuss

Hallo zusammen,

ein kleiner Hinweis, ob die Funktionsweise wie ich sie mir vorstelle überhaupt machbar ist, würde mich auch schon einen Schritt weiter bringen.

Die Problematik ist das suchen nach auf- oder eingeklappter Unterpunkte, da nicht abgefragt wird OB ein Punkt auf- oder zugeklappt ist.

Kann das Problem so behoben werden? Die Angelegenheit hat eine gewisse Dringlichkeit und die Info "nö, geht so nicht" lässt mich nicht noch tagelang untätig rumsitzen sondern dann nach einer Lösung suchen.

Viele Grüße

Nuss
 
Servus Nusspli,

ich müsste mir unsere erste gemeinsame Arbeit nochmal genauer anschauen, aber ich habe da im Hinterkopf das nur class="xxx" durchsucht und aufgeklappt wird.

Schau mal ob du bei den Abschnitten die das jetzt betrifft diese Klasse angeben kannst!
 
Hey tombe,

danke dir für die Antwort.

Also class="xxx" ist sowohl für die Haupt- als auch die Unterpunkte vergeben. Das war ja schon für die Suche wichtig ... und durchsucht wird alles korrekt (bis auf die schwarze statt rote Markierung).
Es scheint so, als würde der Unterpunkt bei einem Treffer aufklappen. Ich sehe das allerdings nicht, da der entsprechende Hauptpunkt geschlossen bleibt. Klappe ich ihn manuell auf sehe ich, dass der Unterpunkt auch offen ist.
Habe ich jetzt aber einen erneuten Treffer in diesem Unterpunkt, wird dieser wieder zugeklappt.

Eine wirkliche Logik habe ich dahinter noch nicht gefunden. :(
 
Also wenn ich mich noch recht daran erinnere, hattest du das Problem mit der Farbe doch schonmal!?

Gibt es irgendeine Angabe an der man erkennen kann ob es sich um einen Haupt- oder Unterpunkt handelt?
 
ja.. das Problem bzgl. der Farbe hatte ich schon mal bzw. immer noch. Es wurde seitdem nie behoben. Auch wenn ich testweise die Farbe auf grün oder sonstwas stelle, bleibt es schwarz. Im zugehörigen css-style kann ich keinen Eintrag finden, der das verursachen würde.

Zum eigentlichen Problem: nein, eine solche Angabe gibt es bisher nicht. Daran scheitere ich gerade. Auch die Unterpunkte sind mit class="xxx" definiert und einfach eine Kopie der Hauptpunkte, nur eben eine Ebene tiefer und anders formatiert... hoffe ich konnte grad verständlich ausdrücken was ich meine. :) Also im div des Hauptpunktes ist ein weiterer div mit dem Unterpunkt angelegt... aber beide mit gleicher class-Bezeichnung.

Wenn ich jetzt die Hauptpunkte bei class="xxx" lasse und die Unterpunkte zu class="xxy" ändere traue ich mich nicht, das script bzgl. der Suche anzupassen. Denn es wird ja nur xxx durchsucht..und das wäre dann zu wenig.

Viele Grüße und eine gute Nacht. :)
 
Schönen guten Morgen.

Ich habe zwar noch die Datei die du mir damals geschickt hast. Aber da ich nicht weiß wie der Seitenaufbau jetzt aussieht, solltest du mir nochmal zeigen wie die Gliederung der Haupt- und Unterthemen gemacht ist.

Wenn es so ist wie hier dargestellt, hätte ich vermutlich eine Lösung.
HTML: 
<div class="xxx">
    Hauptmenü
    <div class="xxx">Untermenü 1</div>
    <div class="xxx">Untermenü 2</div>
    <div class="xxx">Untermenü 3</div>
</div
 
Ja... so habe ich das aufgebaut...
Wichtig ist halt wahrscheinlich noch, dass alle Punkte von Haus aus eingeklappt sind.

Viele Grüße und jetzt schon mal wieder danke für Zeit und Hilfe....
 
Ich bin zwar nicht so ganz glücklich mit dem was ich habe, aber eine andere Lösung finde ich im Moment leider nicht.

So sieht jetzt die Funktion "highlight" aus:

Javascript: 
function highlight () {
suche = document.getElementById("txtSuche").value.toLowerCase();

if (orig == "") {
    orig = document.getElementById("inhalt").innerHTML;
} else {
    document.getElementById("inhalt").innerHTML = orig;
}

if (div_count >= document.getElementsByTagName('div').length) {
    div_count = 0;
    start = 0;
    alert("Das Ende der Seite wurde erreicht oder \n            der Suchbegriff wurde nicht gefunden!");
    return;
}

if (document.getElementsByTagName('div')[div_count].className == "xxx") {
    text = document.getElementsByTagName('div')[div_count].innerHTML.toLowerCase();
    orig_text = document.getElementsByTagName('div')[div_count].innerHTML;
    start = text.indexOf(suche, start);
    if (start == -1) {
        div_count = div_count + 1;
        start = 0;
        highlight();
        return;
    }

    ende = start + suche.length;
    neu = orig_text.substring(0, start) + "<span style='color:red; font-weight: bolder;'><a name='treffer'>" + orig_text.substring(start, ende) + "</a></span>" + orig_text.substring(ende);
    document.getElementsByTagName('div')[div_count].innerHTML = neu;
    start = ende;
//****************** die nächsten beiden Zeilen sind neu ************************//
    id = document.getElementsByTagName("div")[div_count].id.substr((document.getElementsByTagName("div")[div_count].id.indexOf("-") + 1));
	if (document.getElementById("m" + id)) {
		document.getElementById("m" + id).style.display = "block";
	}
//***********************************************************************//
    document.getElementsByTagName('div')[div_count].style.display = "block";
    location.href = "#treffer";
} else {
    div_count = div_count + 1;
    start = 0;
    highlight();
}

if (div_count >= document.getElementsByTagName('div').length || start == -1) {
    div_count = 0;
    start = 0;
}

}

Und so müssen die Themengruppen aufgebaut sein:
HTML: 
<div id="inhalt">
    <div class="xxx" id="m1">Hauptgruppe 1</div>
    <div class="xxx" id="s1-1">Untergruppe 1-1</div>
    <div class="xxx" id="s2-1">Untergruppe 2-1</div>
    <div class="xxx" id="s3-1">Untergruppe 3-1</div>

    <div class="xxx" id="m2">Hauptgruppe 2</div>
    <div class="xxx" id="s1-2">Untergruppe 1-2</div>
    <div class="xxx" id="s2-2">Untergruppe 2-2</div>
    <div class="xxx" id="s3-2">Untergruppe 3-2</div>
</div>

Wichtig ist das der DIV-Container der jew. Hauptgruppe nicht erst nach der letzten Untergruppe geschlossen wird! Die Hautpgruppen werden durch die id="m1", id="m2", ... gekennzeichnet (wobei das M für Main stehen soll und dann halt eine fortlaufende Nummer).

Jetzt stellt sich die Frage ob du das so für deine Seite umsetzten kannst?

Gruß Thomas
 
Zuletzt bearbeitet:
Super...vielen Dank.
Ich hab alles soweit umgesetzt... allerdings wirds jetzt glaub ich langsam richtig kompliziert.

Erstes Problem:
Bei einem Treffer in einem Unterpunkt klappt erst der Hauptpunkt auf... erst eine erneute Suche gibt die gleiche Stelle ein zweites Mal als Treffer aus und klappt erst dann den zugehörigen Unterpunkt auf. Sprich: ich muss 2x den gleichen Begriff suchen, bis ich im Unterpunkt lande. Es ist soweit schon ein Fortschritt, dass der Hauptpunkt dann nicht mehr eingeklappt wird. :)

Zweites Problem:
...hat sich erledigt... das verkompliziert die Sache nur noch mehr.

Vielen Dank jetz schon mal wieder. .. :)


e:/ So..ich hab mir den Aufbau noch einmal genauer angeschaut. So schauts bei mir aus:

Code: 
<div><a name="Tiere"></a>
			<h2>Tiere</h2>

		<span class="auto-style2">
			<a href="javascript:toggle('m6')" style="text-decoration: none; color: #000000;">Thema innerhalb der Überschrift z.B. "Hunde"</a></span>
		<div  id="m6" style="DISPLAY: none;color: #FFFFFF" class="xxx">
<br/>
		<span class="auto-style2">
			<a href="javascript:toggle('s1-6')" style="text-decoration: none; color: #000000;">Unterthema 1 z.B. "Terrier"</a></span>
		<div id="s1-6" style="display: none;color: #FFFFFF" class="xxx">
<br/>
       </div> "Unterthema zu"
   </div>    "Hauptpunkt zu"
</div>    "ganze Kategorie/Überschrift zu"

e2:/ Und was mir noch auffällt: die Suche ist relativ langsam. Aber damit wird man wahrscheinlich leben müssen, oder?
 
Zuletzt bearbeitet:
Hast du die "Verschachtelung" des Hauptpunktes und der dazugehörenden Unterpunkte so gemacht wie ich es bei #9 geschrieben habe?
Das selbe Problem hatte ich auch solange die Unterpunkte innerhalb des DIVs des Hauptpunktes gestanden sind. Deshalb habe ich das ja geändert!

Wenn es kompliziert wird, dann wird es doch erst richtig interessant. Also was ist mit dem zweiten Problem?

Und was ist mit der Farbe. Konntest du das lösen?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück