Onclick Event im <div> Tag einfügen

[Mecintosch]

Hallo!

Möchte einen gesamten <div> Container verlinken in dem Text und Bild via Contao eingebunden sind.

<div class="mod_article block">
<div class="ce_text block" onclick="location.href='xyz.html';">
Text
Foto
</div>
</div>

Leider habe ich keine Ahnung ob sich das irgendwie lösen lässt… bitte um Hilfe?

Danke!

[marcos]

Hallo Mecintosch

Am einfachsten löst du das mit JS (jQuery).

Weise dem Artikel bzw. dem Element eine Klasse zu. Zum Beispiel: divlink
Danach sollte dein Quellcode so aussehen:

<div class="mod_article block">
	<div class="ce_text block divlink">
		Text
		Foto
	</div>
</div>

Dann folgendes JS dazu auf der Seite einfügen:

<script>
 $( document ).ready(function() { 
      $(".divlink").click(function(event) { 
        window.location.href = 'http://www.contao.org';
        event.preventDefault(); 
      }); 
 });
</script>

Wenn auf das DIV geklickt wird, wird die Seite http://www.contao.org aufgerufen
Damit das aber funktioniert, musst du noch jQuery einbinden. Das kannst du in Contao 3 bequem im Seitenlayout einfügen. (Häkchen setzen) Ansonsten kurz von Hand einbinden.


Hoffe, ich konnte dir weiterhelfen.

Gruss
Marco

[Mecintosch]

Hallo Marco,

funktioniert perfekt - danke!

Ich habe jetzt 4 divs mit jeweils anderer Ziel-URL…
lässt sich das alles in einem <script> verpacken?

Danke nochmals!

[marcos]

Hallo Mecintosch

Einfach jedem DIV eine eindeutige Klasse oder besser gleich eine ID zuweisen und für jedes einen Klick-Event schreiben.

<div class="mod_article block">
	<div class="ce_text block" id="div1">Text / Foto </div>
	<div class="ce_text block" id="div2">Text / Foto </div>
	<div class="ce_text block" id="div3">Text / Foto </div>
	<div class="ce_text block" id="div4">Text / Foto </div>
</div>

<script>
 $( document ).ready(function() { 
      $("#div1").click(function(event) { 
        window.location.href = 'http://www.contao.org';
        event.preventDefault(); 
      });
      $("#div2").click(function(event) { 
        window.location.href = 'http://www.contao.org';
        event.preventDefault(); 
      }); 
      $("#div3").click(function(event) { 
        window.location.href = 'http://www.contao.org';
        event.preventDefault(); 
      }); 
      $("#div4").click(function(event) { 
        window.location.href = 'http://www.contao.org';
        event.preventDefault(); 
      });  
 });
</script>

LG Marco

[MartinG]

Moin Mecintosch und marcos,

beim Lesen kam mir folgende Idee, vielleicht ja auch interessant.
Den Link könntest du normal in ein <a href="...">-Element verpacken, welches innerhalb deines <div> steht. Damit es nicht sichtbar ist, gibst du diesem <a> die Klasse "invisible".
Vorteil: dann brauchst du nur noch eine JavaScript-Funktion, die den jeweiligen Link dieses <div> aus dem innenliegenden <a> ausliest.
Weiterer Vorteil: erhöhte Accessibility durch einen echten Link.
Um die Accessibility noch weiter zu erhöhen, könntest du zusätzlich noch einen <noscript>-Bereich einfügen in der Art <a href="...">Klicken Sie hier, um auf die Seite ... weitergeleitet zu werden</a> (für Besucher ohne JavaScript).

Vielleicht so?

<div class="ce_text block divlink">
	<a href="..." class="invisible divlinktarget">Klicken Sie hier...</a>
	<noscript><a href="...">Klicken Sie hier...</a></noscript>
	Text
	Foto
</div>

JavaScript:
Beim Klick auf ein Element mit der Klasse "divlink" prüfen, ob dieses ein Kindelement mit der Klasse "divlinktarget" hat. Wenn das Attribut "href" dieses Kindelements gesetzt ist, auf diese URL weiterleiten.

<script>
$(document).ready(function() { 
	$(".divlink").click(function(event) {
		var $divLinkTarget = $(event.target).children(".divlinktarget").first;
		if ($divLinkTarget.attr("href")) {
			window.location.href = $divLinkTarget.attr("href");
		}
		event.preventDefault(); 
	}); 
});
</script>

PS: Code ungetestet!

[schman]

<script>
$(document).ready(function() { 
	$(".divlink").click(function(event) {
		var $divLinkTarget = $(event.target).children(".divlinktarget").first;
		if ($divLinkTarget.attr("href")) {
			window.location.href = $divLinkTarget.attr("href");
		}
		event.preventDefault(); 
	}); 
});
</script>

PS: Code ungetestet!

Vielleicht täusch ich mich ja aber ich dachte bei JS brauchts für eine Variable kein $ Zeichen

[marcos]

@MartinG
Danke für deinen Input. Ist auch eine gute Lösung. Vorallem mit der Berücksichtigung der Browser mit deaktiviertem JS!

Vielleicht täusch ich mich ja aber ich dachte bei JS brauchts für eine Variable kein $ Zeichen

kann man, muss man aber nicht

[psren]

Vielleicht täusch ich mich ja aber ich dachte bei JS brauchts für eine Variable kein $ Zeichen

Braucht nicht, kann aber. Macht der Gewohnheit denke ich.

[melzebub]

man könnte das auch ohne js lösen. Einfach den Link in die Box packen, auf display block und position absolute setzen, ganze breite und höhe einnehmen, das elternelement auf position relative setzen, fertig. pflegbar im backend, kein skript und reines css. bei html5 könnte man sogar ein div mit dem a wrappen. da gibts dann aber probleme mit contao und den templates .

[psren]

Aber der Text ist dann eben nicht mehr kopierbar :-)