JavaScript Pfade kürzen

[rony]

Da mir schon mehrfach sehr erfolgreich hier geholfen wurde (wofür ich mich nochmals bedanken möchte ), schreibe ich nun wieder etwas zu einem kleinem "Problem".

Eine Internetseite hat in der Regel die Eigenschaft, dass man durch diese Navigieren kann - Man springt von einem menüpunkt in die nächste seite... etc.

Nun kennt man von etlichen Dateiexplorern, dass der "Pfad" angezeigt wird (C:/Windows/System32/driver)...
Nun wollte ich soetwas auch für meine Internetseite bauen, an der ich sitze. (./Bereich/zweiter Bereich/Titel)

An sich kein Zauberstück, jedoch habe ich da ein kleines problem, dass die Pfade natürlich nie eine feste Länge haben. So unterscheiden sich z.b. schon die Titel ständig, und dadurch kommen ja unterschiedliche länge raus. - Ist Denk ich mal klar

Meine seite soll jedoch keine feste Breite haben - so können leute mit einem breiterem monitor theoretisch mehr vom titel sehen als leute mit einem schmaleren

Meine erste idee war einfach mittles css (white-spaces: nowarp einfach das "berstehende schlucken lassen".
Das empfinde ich aber als dann doch sehr unschön.

Nun kam mir ein neuer Gedanke.
Könnte man nicht den benötigten und den vorhandenen Platz "messen" lassen, und dann mittles Javascript auswerten?

so könnte ein recht langer Pfad (./Bereich/Bereich2/Langer Titel) z.b. nach und nach zu (./.../Bereich2/Langer Titel) und (./.../.../Langer Titel) gekürzt werden
Bis jetzt ist jeder Pfad-Teil in einem extra <div>.

Hat dort jemand Ahnung, wie man soetwas anstellen könnte ^^?

Oder hat da jemand eine andere idee ?

 

[Daaron]

Mein erster Ansatz: Das <div> mit vollem Inhalt aus dem normalen Fluss entfernen (absolut positionieren) und irgendwo außerhalb des Sichtbereichs rendern lassen. Dann kannst du die Rendergröße problemlos ermitteln, genauso wie die Window-Größe (die musst du beim Resize-Event natürlich immer neu ermitteln).
Jetzt kannst du den Inhalt des Elements z.B. über reguläre Ausdrücke entsprechend einschrumpfen und das Element dann in den Sichtbereich verlegen.

 

[WingX]

Das nennt sich übrigens Brotkrümelnavigation und ist bei jedem halbwegs vernünftigen CMS dabei.

 

[Daaron]

WingX, setzen! 6!

Es geht nicht darum, eine Breadcrumb zu erzeugen. Der TE mag vielleicht das Wort nicht kennen, aber er weiß sehr wohl wie er eine erstellt. Es geht um eine Breadcrumb, die sich DYNAMISCH verkürzt in Abhängigkeit der Breite des Viewport, einfach damit nix überläuft bei niedrigen Auflösungen.

 

[rony]

Ne, das wort war ist mir neu - danke dafür

Wie Daaron schon sagte, ich weiß wie ich das erstelle - ich selber baue ja das php-Konstrukt darunter jedoch habe ich keine Ahnung wie ich das mit dem messen anstellen sollen :/
Daaron - danke schonmal. Jedoch habe ich so gut wie keinen plan von js

 

[Daaron]

Schnapp dir irgend eins der guten JS-Frameworks. Ich nutz lieber Mootools, die meisten Leute schwören auf JQuery.
Mit den Dingern ist das dann ne relativ simple Geschichte.

Für Mootools, unter der Annahme, dass deine Breadcrumb-Div die ID #breadcrumb hat:

window.addEvent('domready', function() {
    var bcWidth = $('breadcrumb').getStyle('width').toInt();
});

 

[rony]

ok, vielen Dank

ich habe eig. jquery in benutzung, weil schon einige js elemente nutzen eben dieses.

ich habe dennoch testweise mal Mootools eingebunden, und des code wie folg ans ende der seite gepackt:

<script type="text/javascript">
                window.addEvent('domready', function() {
                    var bcWidth = $('breadcrumb').getStyle('width').toInt();
                    alert(bcWidth);
                });
        </script>

ich dachte, nun würde ich eine ausgabe erhalten, wie breit der bereich ist.

Noch etwas - sagen wir mal, man berechnet nun die breiten, wie kann man dann die wörter ausfiltern lassen? es müsste dann ja eine "/" erkennung da sein.

 

[Kagee]

ich würde den Content als String vom Dokument holen, bei allen "/" auftrennen, die Elemente kürzen und wieder zusammensetzen, etwa so (gekürzt auf 3 Zeichen):

//Abfrage ob Div breit genug, wenn nicht:
var path = $('breadcrumbs').text()
var tiles = path.split('/');
var newpath = "";
for(i=0;i<tiles.length;i++)
{
    newpath += tiles.substring(0,3) + "/";
}
$('breadcrumbs').text(newpath)

mag sein, dass es für die Schleife noch ne effizentere Methode gibt, aber so ungefähr

 

[Daaron]

ich habe eig. jquery in benutzung, weil schon einige js elemente nutzen eben dieses.

ich habe dennoch testweise mal Mootools eingebunden, und des code wie folg ans ende der seite gepackt:

Hast du jQuery in den "noConflict"-Modus versetzt? Wenn nicht, dann kommen sich JQ und MT kräftig ins Gehege. So ziemlich jedes JS-Framework nutzt in der einen oder anderen Form '$' als Operator. Bei JQ heißt $() nix anderes als jQuery(). Bei Mootools hat $('bla') die Bedeutung von document.getElementById('bla'), wobei hier das DOM-Element noch zusätzlich zu einem MT-Objekt erweitert wird, mit all dessen coolen neuen Eigenschaften und Funktionen. Dann hat Mootools ja auch noch $$(), etwas das mir in anderen Frameworks noch gar nicht unter gekommen ist. In MT bedeutet das soviel wie: baue ein Array aus Elementen, auf die der Parameter als CSS-Selektor passt. $$('div') würde dir also ein Array aus allen <div> geben, $$('.dropdown') alle Elemente mit der Klasse "dropdown", etc...

Jedenfalls löst du fast unweigerlich einen JS-Fehler aus, wenn du jQ nicht in den konfliktfreien Modus versetzt.

ich dachte, nun würde ich eine ausgabe erhalten, wie breit der bereich ist.

Hätte funktionieren sollen, ja... aber ich denke mal, der Konflikt hinsichtlich des $-Operators zwischen jQ und MT hat dich torpediert. Schau mal in deine JavaScript - Konsole. Im IE9 (für Development die schlechteste Wahl) wäre sie unter F12 zu finden, genauso unter Chrome (beste Wahl, meiner Meinung nach). Bei Firefox solltest du FireBug nachinstallieren.

Und ein Tip zur Ausgabe von Testwerten: alert('bla') funktioniert zwar, viel eleganter ist aber console.log('bla'), denn dann taucht dein "bla" nur in der Konsole auf, nciht als Popup. Es nervt also weit weniger, falls du mal die Inhalte einer Schleife untersuchen willst. Außerdem kann man, zumindest im Chrome, dann auch Objekte untersuchen. Wenn du mit Mootools console.log($('breadcrumb')) machst, dann kannst du in der Con das Element angucken und dir in aller Ruhe all seine Attribute durchlesen.

 

[rony]

uff vielen Dank

jetzt hast du mir natürlich viel stoff gegeben ^^

also das mit dem konflikt war richtig - sobald ich jquery rausnehme, kommt eine ausgabe "NaN".
Wenn ich ".toInt()" rausnehme dann steht in der ausgabe "auto".

Ich würde schon jquery als alleiniges framework bevorzugen - alleine aus performancegründen - es muss einfach ein framework weniger geladen werden ^^.

 

[Daaron]

hm, klar... getStyle() gibt natürlich nur die CSS-Deklaration zurück, und die hast du ja nicht gesetzt. Mein Fehler.
tausch mal gegen getSize().x aus. getSize() gibt ein Objekt zurück, deshalb hinten das ".x". Du willst ja die Ausdehnung entlang der X-Achse aka. Breite.

 

[Spike S.]

Die jQuery Funktion css() liefert doch die aktuellen Werte, also auch Berechnete, wenn nichts anderes deklariert wurde, oder täusche ich mich?

<div id="seite">
  <div id="brotkrumen">
    <div>./</div><div>Bereich/</div><div>langer Titel</div>
  </div>
</div>

$("#brotkrumen div").each(function(index){
  if($("#brotkrumen").css("width") > $("#seite").css("width") && index < $("#brotkrumen div").length - 1)
    $(this).innerHTML(".../");
});

Läuft alle Pfadbestandteile durch und ändert den Text, wenn die Breite des Brotkrumen-DIV die des umschließenden DIV übersteigt oder der letzte Pfadbestandteil erreicht ist (Titel soll ja sicher dennoch bleiben).

 

[Daaron]

Keine Ahnung, wie jQ arbeitet. Da ich mich vor Jahren als Lieblings-CMS für Contao (damals noch TypoLight) entschieden habe, bin ich notgedrungen auch bei Mootools gelandet. Eine jQ-Unterstützung gibts in Contao erst seit jüngster Zeit.