1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#6a9fb5">
<title>Interacting with underlying element in HTML</title>
<!--
<link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />
-->
<link rel="stylesheet" href="/assets/c-hyde.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700|Abril+Fatface">
<link rel="stylesheet" href="/assets/main.css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="og:site_name" content="Navan Chauhan" />
<link rel="canonical" href="https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html" />
<meta name="twitter:url" content="https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html" />
<meta name="og:url" content="https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html" />
<meta name="twitter:title" content="Interacting with underlying element in HTML" />
<meta name="og:title" content="Interacting with underlying element in HTML" />
<meta name="description" content="With CSS you can disable any interactions with an element and directly control the underlying element" />
<meta name="twitter:description" content="With CSS you can disable any interactions with an element and directly control the underlying element" />
<meta name="og:description" content="With CSS you can disable any interactions with an element and directly control the underlying element" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/images/favicon.png" type="image/png" />
<link href="/feed.rss" type="application/atom+xml" rel="alternate" title="Sitewide Atom feed" />
<meta name="twitter:image" content="https://web.navan.dev/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png" />
<meta name="og:image" content="https://web.navan.dev/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png" />
<meta name="google-site-verification" content="LVeSZxz-QskhbEjHxOi7-BM5dDxTg53x2TwrjFxfL0k" />
<script data-goatcounter="https://navanchauhan.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script>
<script defer data-domain="web.navan.dev" src="https://plausible.io/js/plausible.js"></script>
<link rel="manifest" href="/manifest.json" />
</head>
<body class="theme-base-0d">
<div class="sidebar">
<div class="container sidebar-sticky">
<div class="sidebar-about">
<h1><a href="/">Navan</a></h1>
<p class="lead" id="random-lead">Alea iacta est.</p>
</div>
<ul class="sidebar-nav">
<li><a class="sidebar-nav-item" href="/about/">about/links</a></li>
<li><a class="sidebar-nav-item" href="/posts/">posts</a></li>
<li><a class="sidebar-nav-item" href="/3D-Designs/">3D designs</a></li>
<li><a class="sidebar-nav-item" href="/feed.rss">RSS Feed</a></li>
<li><a class="sidebar-nav-item" href="/colophon/">colophon</a></li>
</ul>
<div class="copyright"><p>© 2019-2024. Navan Chauhan <br> <a href="/feed.rss">RSS</a></p></div>
</div>
</div>
<script>
let phrases = [
"Something Funny", "Veni, vidi, vici", "Alea iacta est", "In vino veritas", "Acta, non verba", "Castigat ridendo mores",
"Cui bono?", "Memento vivere", "अहम् ब्रह्मास्मि", "अनुगच्छतु प्रवाहं", "चरन्मार्गान्विजानाति", "coq de cheval", "我愛啤酒"
];
let new_phrase = phrases[Math.floor(Math.random()*phrases.length)];
let lead = document.getElementById("random-lead");
lead.innerText = new_phrase;
</script>
<div class="content container">
<div class="post">
<h1 id="interacting-with-underlying-element-in-html">Interacting with underlying element in HTML</h1>
<p>I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame.</p>
<div class="codehilite">
<pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900"</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"content flex flex-wrap content-center justify-center"</span><span class="p">></span>
<span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"iphone-12-white.png"</span> <span class="na">class</span><span class="o">=</span><span class="s">"h-[60vh] z-10 absolute"</span><span class="p">></span>
<span class="cm"><!--<img src="screenshot2.jpeg" class="h-[57vh] mt-4 mr-1 rounded-[2rem]">--></span>
<span class="p"><</span><span class="nt">video</span> <span class="na">src</span><span class="o">=</span><span class="s">"screenrec.mp4"</span> <span class="na">class</span><span class="o">=</span><span class="s">"h-[57vh] mt-4 mr-1 rounded-[2rem]"</span> <span class="na">controls</span> <span class="na">muted</span> <span class="na">autoplay</span><span class="p">></</span><span class="nt">video</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</code></pre>
</div>
<p><img src="/assets/underlying/video-under-element.jpg" alt="Video Under a Transparent Image" /></p>
<p>Turns out, you can disable pointer events!</p>
<p>In Tailwind, it is as simple as adding <code>pointer-events-none</code> to the bezel screen.</p>
<p>In CSS, this can be done by:</p>
<div class="codehilite">
<pre><span></span><code><span class="p">.</span><span class="nc">className</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="k">pointer-events</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span>
<span class="p">}</span>
</code></pre>
</div>
<p>Let us try this in a simple example.</p>
<h2 id="example">Example</h2>
<p>Here, we create a button and overlay a transparent box</p>
<div class="codehilite">
<pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;"</span><span class="p">></span>
A box with 200px height and 200px width
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 1; margin-top: 20px; margin-bottom: 200px;"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"alert('You were able to click this button')"</span><span class="p">></span>Try clicking me<span class="p"></</span><span class="nt">button</span><span class="p">></span>
</code></pre>
</div>
<hr>
<div style="height: 200px; width: 300px; background-color: rgba(255, 0, 0, 0.4); z-index: 2; position: absolute;">
A box with 200px height and 300px width
</div>
<p><button style="z-index: 1; margin-top: 20px; margin-bottom: 200px;" onclick="alert('You were able to click this button')">Try clicking me</button>
<hr></p>
<p>As you can see, you cannot click the button because the red box comes in the way. We can fix this by adding <code>pointer-events: none</code> to the box. </p>
<div class="codehilite">
<pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;"</span><span class="p">></span>
A box with 200px height and 300px width
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">style</span><span class="o">=</span><span class="s">"z-index: 1; margin-top: 20px; margin-bottom: 200px"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"alert('You were able to click this button')"</span><span class="p">></span>Try clicking me<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
</code></pre>
</div>
<hr>
<div style="height: 200px; width: 300px; background-color: rgba(0, 255, 0, 0.4); z-index: 2; position: absolute; pointer-events: none;">
A box with 200px height and 300px width
</div>
<p><button style="z-index: 1; margin-top: 20px; margin-bottom: 200px" onclick="alert('You were able to click this button')">Try clicking me</button>
</div></p>
</div>
<blockquote>If you have scrolled this far, consider subscribing to my mailing list <a href="https://listmonk.navan.dev/subscription/form">here.</a> You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.</blockquote>
<script data-isso="https://comments.navan.dev/"
src="https://comments.navan.dev/js/embed.min.js"></script>
<section id="isso-thread">
<noscript>Javascript needs to be activated to view comments.</noscript>
</section>
</div>
<script src="assets/manup.min.js"></script>
<script src="/pwabuilder-sw-register.js"></script>
</body>
</html>
|
