Skip to content

Instantly share code, notes, and snippets.

@JamoCA

JamoCA/clickDiv_jQuery.htm

Last active September 4, 2019 13:32
Show Gist options
  • Save JamoCA/7565762 to your computer and use it in GitHub Desktop.
Save JamoCA/7565762 to your computer and use it in GitHub Desktop.
Download ZIP
ClickDiv - Use jQuery to turn any container into an identifiable hotlink that performs a "click" on the first A element.
Raw
clickDiv_jQuery.htm
<!DOCTYPE html>
<html lang="en">
<head>
<title>clickDiv</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
$(function(){
if ($('.clickDiv').has('a').length){
$('.clickDiv').has('a').css('cursor','pointer');
}
$('body').on('click', '.clickDiv', function(e){
var a = $(this), t='_self';
if (a.find('a').length){
a = a.find('a');
if ((e.ctrlKey || e.shiftKey) && !a.prop('target').length){
t = '_blank';
}
if (a.prop('target').length) {t=a.prop('target');}
var newWnd = window.open(a.attr('href'), t);
newWnd.opener = null;
}
}).on('click', '.clickDiv a, .clickDiv input', function(e){
e.stopPropagation();
});
});
</script>
</head>
<body>
<h1>clickDiv (jQuery)</h1>
<p>Use jQuery to turn any container into an identifiable hotlink that performs a "click" on the first A element.</p>
<div style="padding:20px; width:80%; margin:10px auto; background-color:#e0e0e0; border:1px solid #000; text-align:center;">
<p><a href="/" target="_blank">Tiny link in the middle of a div</a></p>
</div>
<div class="clickDiv" style="padding:20px; width:80%; margin:10px auto; background-color:#e0e0e0; border:1px solid #000; text-align:center;">
<p><a href="/" target="_blank">Tiny link in the middle of a div</a></p>
<p><b>Note:</b> Enter container is "clickable"</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment