DIV Container mit Paramter in URL aktivieren

[Jan82]

Hallo zusammen,

ich habe in einer index.html sieben DIVs übereinander positioniert wobei das erste als Auswahlfläche bzw. Linkbox fungiert (display:block;) und die anderen als content-Seiten zu verstehen sind (display:none;). Mit einem JS (getElementById) werden die DIVs je nach Auswahl des Users eingeblendet, während das aktuell aktive wieder ausgeblendet wird (die ausgewählte ID wird also auf "block" gesetzt, die aktuelle ID erhält den Wert "none").

Ich möchte nun aber mit einem gezielten Aufruf im Browser nicht das Start-DIV (also meine Auswahlfläche ID=layer0) in der index.html aktivieren, sondern eines der anderen DIVs. So in der Richtung www.domain.de?id=layer2. Im Ergebnis soll also das gleiche geschehen, als würde ich auf der normalen index.html auf die Auswahlfläche klicken (beispielsweise Link2), sodass die ID layer2 sichtbar (block) und die ID layer1 nicht sichtbar (none) ist.

Geht sowas? Meine IDs heißen "layer0" bis "layer6". Ich nehme es vorweg: www.domain.de?id=layer2 funktioniert nicht.

Habt vielen Dank!

[ralphi]

Hi,

also mit JS  ‘GET- Geschichten’ zu handeln ist es was primelig.
wenn du allerdings php nutzt kannst du ja mit if..  $_GET[‘id’] alles mögliche (HTML CSS JS) als aktiv schreiben

Viele Grüße aus LA

[JürgenB]

Hallo Jan82,

URL-Parameter können über location.search() abgefragt werden.

Gruß, Jürgen

[Der Martin]

Hi,

ich habe in einer index.html sieben DIVs übereinander positioniert wobei das erste als Auswahlfläche bzw. Linkbox fungiert (display:block;) und die anderen als content-Seiten zu verstehen sind (display:none;). Mit einem JS (getElementById) werden die DIVs je nach Auswahl des Users eingeblendet, während das aktuell aktive wieder ausgeblendet wird (die ausgewählte ID wird also auf "block" gesetzt, die aktuelle ID erhält den Wert "none").

abgesehen davon, dass man keine "Seite" direkt anwählen oder verlinken kann, hat das Konzept auch noch den empfindlichen Schönheitsfehler, dass man ohne Javascript überhaupt nicht navigieren kann.

Ich möchte nun aber mit einem gezielten Aufruf im Browser nicht das Start-DIV (also meine Auswahlfläche ID=layer0) in der index.html aktivieren, sondern eines der anderen DIVs. So in der Richtung www.domain.de?id=layer2. Im Ergebnis soll also das gleiche geschehen, als würde ich auf der normalen index.html auf die Auswahlfläche klicken (beispielsweise Link2), sodass die ID layer2 sichtbar (block) und die ID layer1 nicht sichtbar (none) ist.

Mit der Pseudoklasse :target ließe sich das elegant allein mit CSS lösen - wenn man auf uralte Browser verzichten kann. Die würden dann alle verfügbaren Seiten untereinander anzeigen, wenn man es clever löst.

So long,
 Martin

[Gunnar Bittersmann]

@@Jan82:

nuqneH

wobei das erste [div] als Auswahlfläche bzw. Linkbox fungiert

Was genau meinst du damit? Ich hoffe, nicht so was wie <div onclick=…> http://www.heydonworks.com/article/reinventing-the-hyperlink

und die anderen als content-Seiten zu verstehen sind (display:none;

Dafür wäre dann das section- oder articleElement angebracht. http://blog.selfhtml.org/2013/04/29/html5-serie-inhalte-strukturieren/

Mit einem JS (getElementById) werden die DIVs je nach Auswahl des Users eingeblendet, während das aktuell aktive wieder ausgeblendet wird (die ausgewählte ID wird also auf "block" gesetzt, die aktuelle ID erhält den Wert "none").

Barrierefrei ist das nicht. http://forum.de.selfhtml.org/archiv/2014/6/t217798/#m1497497

Qapla'

[Jan82]

Hallo @all,
vielen Dank für die Rücklmeldungen. Nachstehend der Code zum Verständnis:

<script type="text/javascript">
var layer = new Array();
layer[0] = 'layer1';
layer[1] = 'layer2';
layer[2] = 'layer3';
layer[3] = 'layer31';
layer[4] = 'layer32';
layer[5] = 'layer4';
layer[6] = 'teaser';

function switch_layer(id)
{ if(document.getElementById(id).style.display="none")
{ for(i=0;i<layer.length;i++)
{ document.getElementById(layer[i]).style.display="none"; }
  document.getElementById(id).style.display="block";}
  else
{ document.getElementById(id).style.display="none"; }
}

</script>
...
<a id="Nav" onclick="switch_layer('layer1'); return false" href="layer1.html">
...

Die Links haben also eine Weiche, sollte JS nicht erlaubt sein (insofern "barrierefrei" auch wenn das ScreenReader nach wie vor Probleme haben dürfte). Nun ist die Frage berechtigt, warum dann der Quatsch mit der URL? Ist einfach eine Geschmackssache. Ich findes es "schöner" wenn der User auf einer html bleibt und hier über JS navigieren kann...auch wenn ich mir vorstellen kann, dass es programmiertechnisch nicht sauber ist.

@Gunnar: Du nennst im Beispiel das hidden-Attribut. Wo ist der Unterschied? display=block oder hidden=false bringen doch den selben effekt?!

Mit Blick auf eure Hinweise scheint es aber keine Lösung dafür zu geben, dass ich auf einer anderen Website bin (www.seite.de) und hier mit einem Link auf meine index.html gelange aber eben nicht der layer1 angezeigt wird (wie es beim Standard-Aufruf von www.domain.de der Fall ist), sondern der layer2 :-(

Sollte noch jemand eine Idee haben, bin ich gan Ohr.
Habt vielen Dank.

[1UnitedPower]

Hakuna matata!

Hallo @all,
vielen Dank für die Rücklmeldungen. Nachstehend der Code zum Verständnis:

Ich hab deinen Code mal durch einen JavaScript-Beautifier gejagt, damit die Verschachtelungen deutlich werden:

var layer = new Array();  
layer[0] = 'layer1';  
layer[1] = 'layer2';  
layer[2] = 'layer3';  
layer[3] = 'layer31';  
layer[4] = 'layer32';  
layer[5] = 'layer4';  
layer[6] = 'teaser';  
  
function switch_layer(id) {  
    if (document.getElementById(id).style.display = "none") {  
        for (i = 0; i < layer.length; i++) {  
            document.getElementById(layer[i]).style.display = "none";  
        }  
        document.getElementById(id).style.display = "block";  
    } else {  
        document.getElementById(id).style.display = "none";  
    }  
}

In dem if-Statemeante machst du eine Zuweisung und keinen Vergleich. Das Ergebnis einer Zuweisung ist immer der zugewiesene Wert selbst, in diesem Fall also "none". Und wenn man das in einen boolschen Kontext setzt, evaluiert "none" zu true. Deshalb wird der nachfolgende Zweig immer ausgeführt und der else-Zweig immer ignoriert.

Du wolltet an dieser Stelle bestimmt einen Vergleich mit == oder === machen. Aber auch dann gibt es noch Probleme. Das style-Objekt ist nicht geeignet, um Style-Angaben zu lesen. Dafür gibt es window.getComputedStyle().

Mit Blick auf eure Hinweise scheint es aber keine Lösung dafür zu geben

Doch natürlich geht das und es hat hier auch noch niemand etwas gegenteiliges behauptet. Zusätzlich zu den bisher genannten Möglichkeiten, gibt es auch noch pushState() und history.state.

[Jan82]

In dem if-Statemeante machst du eine Zuweisung und keinen Vergleich. Das Ergebnis einer Zuweisung ist immer der zugewiesene Wert selbst, in diesem Fall also "none". Und wenn man das in einen boolschen Kontext setzt, evaluiert "none" zu true. Deshalb wird der nachfolgende Zweig immer ausgeführt und der else-Zweig immer ignoriert.

Zugegeben, jetzt "steige ich aus". Ich übersetze das mal wie folgt: Die letzte Zeile ist irrelevant, weil Sie nicht berücksichtigt wird, da ich scheinbar einen Fehler drin habe?

Ich habe einen DIV mit der ID 'layer1' versehen, bei dem im style keine display-angabe erfolgt. Stattdessen ist bei allen anderen IDs "none" hinterlegt. So ist die index.html quasi im Standard konfiguriert. Beim Seitenaufruf wird also der DIV mit der ID 'layer1' angezeigt.

Das "Umschalten" funktioniert auch. Wenn ich im div mit der ID 'layer1' einen Link betätige, dann blendet er den gewünschten DIV (der die entsprechende ID hat) ein und den aktuell sichtbaren aus. Das geht dann immer munter so weiter und (da die alle DIVs unter einander "verlinkt" sind) ich kann von jedem DIV alle anderen öffnen während der aktuelle nicht sichtbar geschlaten wird. Die Weiche bei inakivem JS funkioniert auch. Dann ruft er eben die layerXY.html auf.

Doch natürlich geht das und es hat hier auch noch niemand etwas gegenteiliges behauptet. Zusätzlich zu den bisher genannten Möglichkeiten, gibt es auch noch pushState() und history.state.

Bei diesen Hinweisen verstehe ich nur "Browserverlauf" manipulieren. Das will ich doch gar nicht (oder doch?). Ein Link von dieser Seite hier beispielsweise soll meine index.html aufrufen. Hier soll aber nicht der 'layer1' aktiv (block) sein, sondern der 'layer2'. Nach meinem Verständnis muss ich meiner index.html durch irgendeinen Code klar machen, dass der Standard ('layer1' = block) ignoriert werden muss wenn jemand die seite über "www.domain.de?welcher-code-auch-immer" aufruft und stattdessen den 'layer2' aktiv schalten muss. Ich habe das aus den genannten Beispielen bislang nicht rauslesen können. Mir fehlt da einfach eine Hirnwindung, da ich das nie gelernt habe, sondern versuche mir das selbst zu erschließen. Hier steige ich irgendwie aus.

Bislang nehme ich mit, dass ich mein JS anpassen muss, um das im DIV zu verankern und so letztendlich über die Angabe in einem Link (Zusatz in der URL) steuern kann, welche ID zu sehen ist und welche nicht?!

[Auge]

Hallo

Doch natürlich geht das und es hat hier auch noch niemand etwas gegenteiliges behauptet. Zusätzlich zu den bisher genannten Möglichkeiten, gibt es auch noch pushState() und history.state.

Bei diesen Hinweisen verstehe ich nur "Browserverlauf" manipulieren. Das will ich doch gar nicht (oder doch?).

Bei allen Hinweisen in diese Richtung geht es um folgendes. Wenn du mehrere Layer auf einer Seite anbietest und das Umschalten zwischen den Layern nur mit JS realisierst und zusätzlich nicht die URL manipulierst, wird der Aufruf der Seite immer nur im Standardmodus möglich sein. Das heißt, es wird beim Aufruf immer Layer Numero eins angezeigt.

Nun stelle dir vor, jemand findet auf deiner Seite für ihn wichtige Infos, die er, so richtig Web-2.0-gerecht, mit anderen teilen will. Die relevante Info ist im Layer drei zu finden. Da dieser aber wegen der fehlenden Manipulation der URL nicht direkt verlinkbar ist, muss er sinngemäß folgendes machen.

1. kopieren der URL (http://www.example.org/wichtig.html).

2. Posten der Nachricht mit der URL und einer Gebrauchsanleitung.

„Hier ist eine gute Quelle: http://www.example.org/wichtig.html

Auf die Seite gehen und Tab Nummer drei aufrufen! Da findet ihr die Info.“

Änderst du hingegen bei jedem Wechsel des Layers die URL mit einem Parameter, mit dem die Seite mit dem gewünschten Layer im Vordergrund ohne weiteres ausgeliefert wird, fällt die Gebrauchsanleitung weg. Das sähe dann sinngemäß so aus.

1. kopieren der URL (http://www.example.org/wichtig.html?layer=3).

2. Posten der Nachricht mit der URL.

„Hier ist eine gute Quelle: http://www.example.org/wichtig.html?layer=3.“

Fertich. Und das ist ja nicht nur für den, der deine Seite verlinkt, einfacher, auch derjenige, der die Seite aufruft, mus nicht noch einen unnötigen Schritt weiter gehen.

Tschö, Auge

[Jan82]

...
Änderst du hingegen bei jedem Wechsel des Layers die URL mit einem Parameter, mit dem die Seite mit dem gewünschten Layer im Vordergrund ohne weiteres ausgeliefert wird, fällt die Gebrauchsanleitung weg. Das sähe dann sinngemäß so aus.

1. kopieren der URL (http://www.example.org/wichtig.html?layer=3).

2. Posten der Nachricht mit der URL.

„Hier ist eine gute Quelle: http://www.example.org/wichtig.html?layer=3.“

Fertich. Und das ist ja nicht nur für den, der deine Seite verlinkt, einfacher, auch derjenige, der die Seite aufruft, mus nicht noch einen unnötigen Schritt weiter gehen.

Das habe ich doch tatsächlich verstanden. Hab vielen Dank.

Nur die Umsetzung bekomme ich nicht hin. Die Seiten hinter den genannten Links bekomme ich zwar übersetzt, wie ich das in der Praxis anwenden soll weiß ich jedoch nicht. Ich verstehe, dass ich ein weiteres Skript benötige, dass neben dem aktivieren und deaktivieren der Sichtbarkeit auch die URL modifiziert. Das müsste zusätzlich im jeweiligen DIV hinterlegt werden?

Solltet ihr weiterhin gewillt sein mich zu unterstützen, habt vielen Dank. Anderenfalls lass ich das Vorhaben vorerst sein, da es bei weitem meinen Laien-Horizont übersteigt. Beste Grüße, Jan.

[Der Martin]

Hallo,

Nun ist die Frage berechtigt, warum dann der Quatsch mit der URL? Ist einfach eine Geschmackssache. Ich findes es "schöner" wenn der User auf einer html bleibt und hier über JS navigieren kann...

ja, aber trotzdem sollte die aktuell angezeigte Adresse immer (inhaltlich!) der aktuell angezeigten Seite entsprechen, anders gesagt, die momentan angezeigte Information sollte auch zukünftig wieder unter genau dieser Adresse erreichbar sein.

@Gunnar: Du nennst im Beispiel das hidden-Attribut. Wo ist der Unterschied? display=block oder hidden=false bringen doch den selben effekt?!

Für dich ja. Für Screenreader teilweise nicht.

Mit Blick auf eure Hinweise scheint es aber keine Lösung dafür zu geben, dass ich auf einer anderen Website bin (www.seite.de) und hier mit einem Link auf meine index.html gelange aber eben nicht der layer1 angezeigt wird (wie es beim Standard-Aufruf von www.domain.de der Fall ist), sondern der layer2 :-(

Doch, ich erwähnte sie schon: Zeichne deine "Layer" bereits im Markup mit passenden IDs aus, und schreib dann sinngemäß ins Stylesheet:

#layer1:not(:target)  
 { display: none;  
 }

Die Verrenkung mit der Negation deshalb, dass Browser, die :target nicht kennen, als Ersatzlösung alle Layer untereinander anzeigen. Die Navigation muss dann nur noch gewöhnliche Links enthalten:

<a href="#layer1">Seite 1</a>

Und fertig ist die Laube - im Prinzip. Das kann man dann auch von extern direkt verlinken oder bookmarken.

Ciao,
 Martin