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

Stimmt...das war genau mein Fehler. Ich hab mir das Schema extra noch hier aufgezeichnet ..

Jetzt hab ich aber ein Problem (mal wieder) und weiß echt nicht, wie ich das jetzt halbwegs verständlich hier reinbringen soll. Ich komm mit den ganzen divs nicht mehr klar.

Code: 
<span class="auto-style2">
			<a href="javascript:toggle('m6')" style="text-decoration: none; color: #000000;">Hauptpunkt</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;">Unterpunkt 1</a></span>
		<div id="s1-6" style="display: none;color: #FFFFFF" class="xxx">
<br/>
TEXT TEXT
TEXT TEXT
</div>
		<span class="auto-style2">
			<a href="javascript:toggle('s2-6')" style="text-decoration: none; color: #000000;">Unterpunkt 2</a></span>
		<div id="s2-6" style="display: none;color: #FFFFFF" class="xxx">
TEXT TEXT
TEXT TEXT
    </div>
</div>

So... so schauts bei mir aus.

Ich kann den Hauptpunkt nicht per </div> direkt beenden, weil dann als Folge alle Unterpunkte sichtbar sind und nicht mehr eingeklappt.

Wie ich das anders beschreiben soll, weiß ich leider wirklich nicht.

Wenn ich das jetzt richtig sehe (und verstehe -.-*), dann sind die Hauptpunkte gar nicht in einem div. Der (****) div beginnt erst beim einschließen des ersten Unterpunkts. Seh ich das richtig?


Und um noch eins weiter vor zu gehen:
Wie oben schon gepostet besteht der Aufbau aus einer Überschrift, einer Hauptkategorie unter der Überschrift (ein-/aufklappbar) und darunter wiederrum Unterpunkte (ein-/aufklappbar). Die Überschrift ist in einem div eingeschlossen, der erst am Ende der kompletten Kategorie wieder geschlossen wird. Es gibt aber noch ein div, der den gesamten Seiteninhalt einschließt. So.. aber die einzelnen Hauptpunkte werden in kein div mehr gefasst....nur noch in diese span-Befehle (wie oben in diesem Post).

Oh man... langsam aber sicher verliere ich den Überblick. Ist ja nicht so, als würde der Inhalt auf der Seite immer weniger :)



Das komplizierte Problem erledigt sich vllt. durch eine korrekte Arbeitsweise wie es soll. :)

Und nein, das mit der Farbe bekomm ich nicht in den Griff. auch im css sind keine Farbvorlagen mehr..nichts. Trotzdem mag er das rot nicht.

Danke schon mal und sorry für den ganzen Text... ich weiß echt nicht, ob ich das so optimal beschrieben hab.


e:/ ich sitz vor dem Code und hab echt keine Ahnung mehr wo ich ansetzen soll. Wo greift das div, was macht es und wo endet es? Warum schreibe ich den div Befehl erst unter den Titel des Hauptpunktes**** Glaub ich steig grad völlig aus. :(

e2:/ wenn ich jetzt keinen Denkfehler drin hab, dann kann ich (um bei dem Beispiel von oben zu bleiben) m6 nicht mit </div> beenden, da dieser Hauptpunkt ja mehrere Unterpunkte enthält, die ja bei aktivieren von m6 mit angezeigt werden müssen...aber wenn m6 eben nicht aktiviert wird, ausgeblendet bleiben..

Oah..ich hab Kopfschmerzen... -.-*


e3:/ Egal wie lange ich rumtüftle oder ändere, es kommt nie das gewünschte Ergebnis raus. Meist zerschießts mir meine kompletten Formatvorlagen. Aber gut... mal ausser Acht gelassen, dass ich jetzt 2x auf suchen klicken muss um einen Unterpunkt mit einem Treffer zu öffnen (kann man ja notfalls damit leben), klappt bei einem zweiten Treffer im gleichen Unterpunkt (und das ist so gut wie immer der Fall, da die Begriffe mehrfach vorkommen) der betroffene Unterpunkt einfach wieder ein. Das darf auf keinen Fall passieren. Help.. :)
 
Zuletzt bearbeitet:
Also ich glaube das war bislang die schwerste Geburt, aber so wie es aussieht habe ich nun endlich eine Lösung gefunden die funktioniert.

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;
//*************************************************************
	von = document.getElementsByTagName("div")[div_count].innerHTML.substr(0, start).toLowerCase().lastIndexOf("<div");

	if(von != -1) {
		sub = document.getElementsByTagName("div")[div_count].innerHTML.substring(von, start);
		reg = new RegExp(/[a-z]{1,}[0-9]{1,}-[0-9]{1,}/);
		id = reg.exec(sub);
		document.getElementById(id).style.display  = "block";
	}
//**************************************************************
    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;
}

}

Die neue Funktion steht zwischen den mit "//******************************" gekennzeichneten Zeilen (31 - 40).

Es wird geprüft ob innerhalb des DIV-Containers im dem der Treffer gefunden wurde noch mindestens ein weiteres DIV enthalten ist. In diesem Fall wird die ID ermittelt und damit der DIV-Container eingeblendet.

Was erfüllt sein muss damit es funktioniert:

1) anders wie zuerst noch geschrieben MÜSSEN die Conatiner nun verschachtelt sein so wie du es jetzt hast und auch haben wolltest.
2) die Untergruppen müssen alle eine ID in der Form "s1-1" oder "s10-5" oder "s22-33" haben damit diese erkannt wird.

Probier ob du mit dieser Lösung einen Schritt weiter kommst und berichte dann. Ich schau mich mal um ob ich eine Lösung für das Problem mit den Farben finde.

Gruß Thomas
 
Guten Morgen Thomas,

es funktioniert hervorragend... mir fehlen die Worte. Auch das kompliziertere Problem, bei einem geänderten Suchbegriff innerhalb des aufgeklappten Unterpunkts, hat sich erledigt. Alles funkioniert soweit wie es soll.
Werde das Ganze jetzt nochmal eingehendst testen....

Weiß gar nicht, wie ich mich bedanken soll...

Das letzte Problem bleibt nur noch die Farbe... dann wärs das. :)

Viele Grüße
 
Schön wenn es so funktioniert wie du es dir vorgestellt hast!!

Was die Farben angeht, klär mich bitte nochmal auf. War es zu irgendeiner Zeit mal so das die Treffer in rot angezeigt wurden oder ist es schon immer ein Fehler?

Wäre zwar merkwürdig. Aber kannst du den Browser als Fehlerquelle ausschließen? Nicht das es mit irgendwelchen Einstellungen zu tun hat. Teste die Seite mal an einem anderen Rechner und/oder mit einem anderen Browser!

Grüße Thomas
 
Code: 
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;

Hier wird die Farbe für die Trefferausgabe ja auf rot festgelegt... das mag er aber nicht. Auch jede andere Farbe (logischerweise) nicht.
Browser kann ich ausschließen...sowohl im FF als auch IE wirds nix.
Ich befürchte, dass der Hund irgendwo in den css-styles liegt... nur wo? :D

Und noch ein Bonus-Problem :D :
Bis jetzt wird der Treffer dick markiert und ans obere Ende der Anzeige geschoben. Premium wäre jetzt natürlich, dass der Treffer in die Mitte der Anzeige gerückt wird, sodass ich auf einen Blick sehe, in welchem Teilbereich/Unterpunkt ich mich gerade befinde ohne erst paar Zeilen nach oben scrollen zu müssen.
 

Anhänge

  • Unbenannt.JPG
    Unbenannt.JPG
    10,2 KB · Aufrufe: 6
Ich vermute auch das irgendeine der CSS Angaben die du definiert hast die obige überlagert.

Ist aber (vielleicht) relativ einfach zu finden das es eine Angabe für das span-Tag sein müsste! Im schlimmsten Fall müsstes du mal bei allen Angaben die Farbe schwarz durch verschiedene Farben ersetzen. Wenn dann an einer Stelle der Treffer nicht mehr schwarz sondern "hellgrün" markiert wird, dann weißt du woher es kommt!

Bin bis in etwa 1 Stunde zu Hause, dann schau ich mir mal alles an was ich noch von dir habe und dann schau ich auch mal wie wir die Treffer in die Mitte kriegen!!

Also bis später.
 
Ich habe mich von Anfang an eig. schon gewundert, warum eig. 3 verschiedene css-Dateien angelegt sind...nur eine hat Auswirkungen, das hab ich schon mehrfach getestet bzw. Änderungen vorgenommen. Die anderen zu löschen trau ich mich wieder ned... und sobald ich die Datei auch nur schief anschaue, änderts mir ab und an nach dem speichern die Vorlage komplett... da stimmen dann die Zeilenweite, Schriftgrößen usw. nicht mehr und es wird alles wirr....

Aber gut... denke, das müsst ich irgendwie finden. Ich hab jetz fast überall die Farbangabe grundsätzlich gelöscht...aber der Treffer wird immer noch nicht rot.

Mach dir da echt keinen Streß... du hast mir jetz schon derart enorm geholfen.. das ist jetzt eine Sache, die weder Eile noch Prio hat. Es ist einfach ein nice to have. :D

Viele Grüße
 
So da ich die nächsten 2 Tage nicht da bin, hier noch mein ersten Vorschlag zum Thema "die Mitte der Seite".

Folgende Zeile muss geändert werden:

Javascript: 
neu = orig_text.substring(0, start) + "<span style='color:red; font-weight: bolder;'><a name='treffer' id='treffer'>" + orig_text.substring(start, ende) + "</a></span>" + orig_text.substring(ende);

Die Änderung ist die id='treffer' innerhalb des a-Tags. Diese ID wird zum ermitteln der Position benötigt.

Dann noch folgenden 2 Zeilen (Zeile 6 und 7) in die Funktion highlight aufnehmen:

Javascript: 
// vorhandener Code
start = ende;
document.getElementsByTagName('div')[div_count].style.display = "block";
location.href = "#treffer";
// diese 2 Zeilen sind neu !!
pos = document.getElementById("treffer").offsetTop - (window.innerHeight / 2);
window.scrollTo(0, pos);

Innerhalb deiner Seite konnte ich es zwar nicht testen weil diese dafür zu kurz war.
Aber ich habe mir eine lange Seite mit sinnlosem Text und ein paar Sprungankern erstellt. In dieser Seite wurden dann die Anker nicht am oberen Rand des Browsers sonder in der Mitte (zumindest ziemlich mittig) platziert.

Versuche es und gib Bescheid wie es bei dir klappt.

Grüße Thomas
 
Leider klappte die Änderung nicht. Er schiebt den Treffer jetzt zwar nicht mehr ganz nach oben...aber dafür bewegt sich dann gar nichts mehr. Er springt zum ersten Treffer wie gewünscht... gibt es dann aber weitere Treffer, rührt sich nichts mehr vom Fleck.
Ein kurzes "blinken" wegen der Positionsabfrage merkt man...aber die Position ändert sich letztlich nicht.

Viele Grüße
 
Hmmmmmmmm, schade ich hatte gehpfft das es in deiner Seite genauso klappt wie in meiner Testseite.

Ich weiß zwar das du vertrauliche Daten in der Seite stehen hast aber kannst du mir vielleicht trotzdem per Mail nochmal die aktuelle Version von dir schicken. Kannst ja die Texte so kürzen das nur noch ein bisschen was drin steht. Mir geht es nicht um den Inhalt nur um den Aufbau selber.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück