Inline links with large activation (touch) target

Size
2,327 Kb
Views
28,336

How do I make an inline links with large activation (touch) target?

What is a inline links with large activation (touch) target? How do you make a inline links with large activation (touch) target? This script and codes were developed by Patrick H. Lauke on 25 September 2022, Sunday.

Inline links with large activation (touch) target Previews

Inline links with large activation (touch) target - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Inline links with large activation (touch) target</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Inline links with large activation (touch) target</h1>
<p>An attempt to make the effective activation (touch) target for an inline link large enough to make it comfortably clickable/tappable. Relies on setting a generous <code>padding</code> (visualised here with a light green background), pulled back on the left and right by an equal amount of negative <code>margin</code>, combined with some CSS <code>pointer-events</code> juggling to make sure clicks/taps go <strong>through</strong> any of the subsequent lines of text in the paragraph. Of course, this is still problematic when two links on separate lines are too close together, with their effective activation targets overlapping...but it's perhaps a start. Additionally, this demo also forces a focus outline that's inset by the same amount as the padding.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <a href="#">link</a> labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem <a href="#">link</a> ipsum dolor sit amet, consetetur sadipscing elitr, <a href="#">link</a> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum <a href="#">link</a> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <a href="#">link</a> invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <script src="js/index.js"></script>
</body>
</html>

Inline links with large activation (touch) target - Script Codes CSS Codes

a { background: rgba(0,256,0,0.2); color: #000; padding: 1em; margin: 0 -1em; pointer-events: auto;}
a:focus { outline: 2px red solid; outline-offset: -1em}
p { pointer-events: none; }

Inline links with large activation (touch) target - Script Codes JS Codes

var a = document.querySelectorAll('a');
for (i = 0; i < a.length; ++i) { a[i].addEventListener('click', function() { alert('Link clicked...')}, true);
}
Inline links with large activation (touch) target - Script Codes
Inline links with large activation (touch) target - Script Codes
Home Page Home
Developer Patrick H. Lauke
Username patrickhlauke
Uploaded September 25, 2022
Rating 3.5
Size 2,327 Kb
Views 28,336
Do you need developer help for Inline links with large activation (touch) target?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Patrick H. Lauke (patrickhlauke) Script Codes
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!