<h1> width-abhängig als Link

[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'