Inline links with large activation (touch) target
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 - 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);
}
Developer | Patrick H. Lauke |
Username | patrickhlauke |
Uploaded | September 25, 2022 |
Rating | 3.5 |
Size | 2,327 Kb |
Views | 28,336 |
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!
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!
Name | Username | Size |
DNA Double Helix | Hugo | 5,112 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
Blank Starter | Mhartington | 2,171 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!