<h1> width-abhängig als Link

[House, M.D.]

Hallo,
folgendes Problem:

Ich versuche, meine Seite per Javascript dazu zu bringen, ab einer gewissen Fensterbreite eine Überschrift nicht mehr als Link anzuzeigen. Dazu verpasse ich sowohl dem <h1> als auch dem <a> Tag eine ID, welche ich dann über javascript anspreche:

  
<script type="text/javascript">  
  
  
function linkodernicht() {  
	if (window.innerWidth >= 800) {  
	document.getElementById("klein").style.display = 'none';  
	document.getElementById("gross").style.display = 'block';  
	document.getElementById("gross").innerHTML="Ich mag es gar nicht, über 800px Breite ALS LINK angezeigt zu werden!";  
} else {  
	document.getElementById("gross").style.display = 'none';  
	document.getElementById("klein").style.display = 'block';  
	document.getElementById("klein").innerHTML="Ich mag es gar nicht, über 800px Breite ALS LINK angezeigt zu werden!";  
}  
}  
  
window.onresize = linkodernicht;  
  
</script>  

HTML lautet dann klarerweise:

<h1 id="gross"><a href="" id="klein"></a></h1>

Dies funktioniert aber offensichtlich nicht; liegt das an document.getElementById ?

Wie kann ich meinen Code dazu bringen, <h1> width-abhängig entweder als link oder als normale Überschrift anzuzeigen?

Vielen Dank für Aufklärung,
MfG,
House.

[Matthias Apsel]

Om nah hoo pez nyeetz, House, M.D.!

Eine nicht JS-Variante mit redundanten Markup sähe folgendermaßen aus

<h1><a href="…">Überschrift</a>Überschrift</h1>  

h1 {  
  visibility: hidden;  
}  
h1 a {  
  visibility: visible;  
}  
  
@media (max-width: 25em) {  
  h1 {  
    visibility: visible;  
  }  
  h1 a {  
    display: none;  
  }  
}

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Eine zweite Variante ohne redundantes Markup wäre:

<h1><a href="#">Überschrift</a></h1>  

@media (max-width:25em) {  
  h1 a {  
    display: none;  
  }  
  h1::before {  
    content: "Überschrift";  
  }  
}  

Vorteile: kein redundantes Markup, kürzerer CSS-Code
Nachteil: Überschriftstexte müssen an zwei Stellen geändert werden.

Das ließe sich ändern zu

<h1 data-content="Überschrift"><a href="#">Überschrift</a></h1>  

@media (max-width:25em) {  
  h1 a {  
    display: none;  
  }  
  h1::before {  
    content: attr(data-content);  
  }  
}  

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

<h1><a href="#">Überschrift</a></h1>

> ~~~css

  h1::before {  

>     content: "Überschrift";  
>   }

Vorteile: kein redundantes Markup,

Das ist Besc^Wgeschummelt! Die Redundanz ist immer noch da, nur dass sie auf mehrere Stellen verteilt ist, was das Ganze noch weniger wartbar macht.

Nachteil: Überschriftstexte müssen an zwei Stellen geändert werden.

Eben.

<h1 data-content="Überschrift"><a href="#">Überschrift</a></h1>

  
Da ist sie wieder, die Redundanz im Markup.  
  
  
Ich bin gewiss kein Freund des Einsatzes von JavaScript, wenn es auch ohne geht. Aber hier scheint doch JavaScript angebracht zu sein (wenn das Ganze überhaupt Sinn macht), denn auch [meine CSS-only-Lösung](https://forum.selfhtml.org/?t=215852&m=1478818) hat entscheidende Nachteile.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

<h1 data-content="Überschrift"><a href="#">Überschrift</a></h1>

> Da ist sie wieder, die Redundanz im Markup.  
  
Ja, aber im Gegensatz zu meiner ersten und auch zu deiner letzten (konsequent-redundanten) Variante sieht man die Redundanz nicht im Browser, wenn kein CSS unterstützt wird.  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Wand und Wanderung](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=W#wand).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Ja, aber im Gegensatz zu meiner ersten und auch zu deiner letzten (konsequent-redundanten) Variante sieht man die Redundanz nicht im Browser, wenn kein CSS unterstützt wird.

Ja. Und es ist auch kein Gefrickel mit ARIA-Attributen nötig. Wenn schon Redundanz, dann ist es mit @data-content wohl besser als mit doppelten h1.

Aber einen Haken gibt’s hierbei auch: In manchen Browsern lassen sich per CSS generierte Inhalte nicht selektieren, kopieren, …

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Aber einen Haken gibt’s hierbei auch: In manchen Browsern lassen sich per CSS generierte Inhalte nicht selektieren, kopieren, …

Wobei das manchmal erwünscht sein könnte:
  URL          http://wiki.selfhtml.org/wiki/Hilfe:Symbolleisten
  Überschrift: Hilfe: Symbolleisten

Das Leerzeichen ist nur zum schön aussehen da. Wenn jetzt jemand die Überschrift kopiert und in die Addresszeile einfügt, geht das schief. In einer früheren CSS-Variante habe ich dieses schmale Leerzeichen mit CSS generiert. Das funktionierte im FF wie gewünscht. Als ich feststellte, dass andere Browser das Leerzeichen mitselektieren, musste ich auf margin ausweichen.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

@media (max-width:25em) {

h1 a {
    display: none;
  }
  h1::before {
    content: attr(data-content);
  }
}

  
Wenn ich den OP richtig verstanden habe, muss es 'min-width' heißen. Und eher 50em als 25em.  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Wenn ich den OP richtig verstanden habe, muss es 'min-width' heißen. Und eher 50em als 25em.

Zitat2128 ;-)

Matthias

[Gunnar Bittersmann]

@@House, M.D.:

nuqneH

Ich versuche, meine Seite per Javascript dazu zu bringen, ab einer gewissen Fensterbreite eine Überschrift nicht mehr als Link anzuzeigen.

Was ist der Sinn dahinter? Wohin verlinkt die Überschrift bei kleinem Viewport? Warum soll sie das bei großem Viewport nicht tun?

„Nicht mehr als Link anzuzeigen“ heißt zweierlei:
(1) nicht mehr clickbar
(2) nicht mehr hervorgehoben (Farbe, Unterstreichung)

Muss es denn JavaScript sein?

(1) lässt sich mit CSS dadurch realisieren, dass der Link durch etwas Drüberliegendem abgedeckt wird, (2) ist trivial:

h1  
{  
	position:relative;  
}  
  
@media (min-width: 50em)  
{  
	h1::after  
	{  
		content:"";  
		position: absolute;  
		top: 0;  
		right: 0;  
		bottom: 0;  
		left: 0;  
	}  
  
	h1 a  
	{  
		color: inherit;  
		text-decoration: inherit;  
	}  
}

Der Haken daran: Es ist immer noch ein Link. Per Tastatur ist er immer noch fokussierbar und anwählbar.

Um das zu beheben, bedarf es dann doch JavaScripts. Einfach das href-Attribut des a-Elements entfernen bzw. setzen.

document.getElementById("gross").innerHTML="Ich mag es gar nicht, über 800px Breite ALS LINK angezeigt zu werden!";

document.getElementById("klein").innerHTML="Ich mag es gar nicht, über 800px Breite ALS LINK angezeigt zu werden!";

Warum wird der Linktitel per JavaScript gesetzt?

window.onresize = linkodernicht;

Und nicht auch schon beim load-Event?

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Der Haken daran: Es ist immer noch ein Link. Per Tastatur ist er immer noch fokussierbar und anwählbar.

Um das zu beheben, bedarf es dann doch JavaScripts.

Wirklich?

<h1><a href="#foo"></a>Überschrift</h1>  

h1 { position: relative; color: blue; text-decoration: underline }  
h1 a { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }  
  
@media (min-width: 50em)  
{  
	h1 {color: inherit; text-decoration: inherit }  
	h1 a { display: none }  
}

Aber auch diese Lösung hat Haken:

⑀ Das Markup mit dem leeren a-Element ist nicht semantisch. Für Nutzer von AT (Screenreader) hat der Link keinen Titel. (Lässt sich vielleicht mit ARIA-Attributen fürs h1-Element beheben?)

⑀ Da nicht das a-Element, sondern das h1-Element gestylt ist, kann nicht zwischen :link und :visited unterschieden werden.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

⑀ Das Markup mit dem leeren a-Element ist nicht semantisch. Für Nutzer von AT (Screenreader) hat der Link keinen Titel. (Lässt sich vielleicht mit ARIA-Attributen fürs h1-Element beheben?)

Äh nee, lässt sich nicht. Dann hätte ja das h1-Element auch die Rolle eines Links, wenn es kein Link ist. Zum dynamischen Setzen/Entfernen des Attributs ist auch wieder JavaScript notwendig.

Ohne JavaScript ginge noch mit redundantem Markup:

<h1 class="mit-link"><a href="…">Überschrift</a></h1>  
<h1 class="ohne-link">Überschrift</h1>

.ohne-link { display: none }  
  
@media (min-width: 50em)  
{  
    .ohne-link { display: block }  
    .mit-link { display: none }  
}

⑀ Clients ohne CSS-Auswertung haben die Überschrift doppelt.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Mensch Bittersmann, wo warst du mit deinen Gedanken?

⑀ Das Markup mit dem leeren a-Element ist nicht semantisch. Für Nutzer von AT (Screenreader) hat der Link keinen Titel. (Lässt sich vielleicht mit ARIA-Attributen fürs h1-Element beheben?)

Nei-en!!

Sowas wie <h1 role="link"> sollte man keinesfalls tun, denn dann ist es ja keine Überschrift mehr. (Second rule of ARIA use)

Qapla'