summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNavan Chauhan <navanchauhan@gmail.com>2024-02-26 12:09:08 -0700
committerNavan Chauhan <navanchauhan@gmail.com>2024-02-26 12:09:08 -0700
commit2ede57d571e382f5aae167bd2a059a12fa1108ea (patch)
tree7b2defef7ce1786f30635469cbaca066b6cd1526
parentf5faa2ef095f035110f83e17da0b35d3a34d6b97 (diff)
add new post
-rw-r--r--Content/posts/2024-02-26-control-element-under-another-element-html-css.md35
-rw-r--r--Resources/assets/underlying/video-under-element.jpgbin0 -> 155017 bytes
-rw-r--r--Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.pngbin0 -> 22985 bytes
-rw-r--r--docs/assets/underlying/video-under-element.jpgbin0 -> 155017 bytes
-rw-r--r--docs/feed.rss48
-rw-r--r--docs/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.pngbin0 -> 22985 bytes
-rw-r--r--docs/index.html32
-rw-r--r--docs/posts/2024-02-26-control-element-under-another-element-html-css.html88
-rw-r--r--docs/posts/index.html13
-rw-r--r--docs/tags/CSS.html71
-rw-r--r--docs/tags/HTML.html13
11 files changed, 279 insertions, 21 deletions
diff --git a/Content/posts/2024-02-26-control-element-under-another-element-html-css.md b/Content/posts/2024-02-26-control-element-under-another-element-html-css.md
new file mode 100644
index 0000000..1c253fe
--- /dev/null
+++ b/Content/posts/2024-02-26-control-element-under-another-element-html-css.md
@@ -0,0 +1,35 @@
+---
+date: 2024-02-26 11:57
+description: With CSS you can disable any interactions with an element and directly control the underlying element
+tags: HTML, CSS
+draft: false
+---
+
+# Interacting with underlying element in HTML
+
+I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame.
+
+```html
+<div class="row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900">
+ <div class="content flex flex-wrap content-center justify-center">
+ <img src="iphone-12-white.png" class="h-[60vh] z-10 absolute">
+ <!--<img src="screenshot2.jpeg" class="h-[57vh] mt-4 mr-1 rounded-[2rem]">-->
+ <video src="screenrec.mp4" class="h-[57vh] mt-4 mr-1 rounded-[2rem]" controls muted autoplay></video>
+ </div>
+</div>
+```
+
+![Video Under a Transparent Image](/assets/underlying/video-under-element.jpg)
+
+Turns out, you can disable pointer events!
+
+In Tailwind, it is as simple as adding `pointer-events-none` to the bezel screen.
+
+In CSS, this can be done by:
+
+```css
+.className {
+ pointer-events: none
+}
+```
+
diff --git a/Resources/assets/underlying/video-under-element.jpg b/Resources/assets/underlying/video-under-element.jpg
new file mode 100644
index 0000000..96afed2
--- /dev/null
+++ b/Resources/assets/underlying/video-under-element.jpg
Binary files differ
diff --git a/Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png b/Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png
new file mode 100644
index 0000000..2817224
--- /dev/null
+++ b/Resources/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png
Binary files differ
diff --git a/docs/assets/underlying/video-under-element.jpg b/docs/assets/underlying/video-under-element.jpg
new file mode 100644
index 0000000..96afed2
--- /dev/null
+++ b/docs/assets/underlying/video-under-element.jpg
Binary files differ
diff --git a/docs/feed.rss b/docs/feed.rss
index 5cafe59..244ab87 100644
--- a/docs/feed.rss
+++ b/docs/feed.rss
@@ -4,8 +4,8 @@
<title>Navan's Archive</title>
<description>Rare Tips, Tricks and Posts</description>
<link>https://web.navan.dev/</link><language>en</language>
- <lastBuildDate>Sat, 17 Feb 2024 19:51:03 -0000</lastBuildDate>
- <pubDate>Sat, 17 Feb 2024 19:51:03 -0000</pubDate>
+ <lastBuildDate>Mon, 26 Feb 2024 12:07:42 -0000</lastBuildDate>
+ <pubDate>Mon, 26 Feb 2024 12:07:42 -0000</pubDate>
<ttl>250</ttl>
<atom:link href="https://web.navan.dev/feed.rss" rel="self" type="application/rss+xml"/>
@@ -3549,6 +3549,50 @@ Otherwise, it calls the custom action.</p>
<item>
<guid isPermaLink="true">
+ https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html
+ </guid>
+ <title>
+ Interacting with underlying element in HTML
+ </title>
+ <description>
+ With CSS you can disable any interactions with an element and directly control the underlying element
+ </description>
+ <link>https://web.navan.dev/posts/2024-02-26-control-element-under-another-element-html-css.html</link>
+ <pubDate>Mon, 26 Feb 2024 11:57:00 -0000</pubDate>
+ <content:encoded><![CDATA[<h1>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">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900&quot;</span><span class="p">&gt;</span>
+ <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;content flex flex-wrap content-center justify-center&quot;</span><span class="p">&gt;</span>
+ <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;iphone-12-white.png&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;h-[60vh] z-10 absolute&quot;</span><span class="p">&gt;</span>
+ <span class="cm">&lt;!--&lt;img src=&quot;screenshot2.jpeg&quot; class=&quot;h-[57vh] mt-4 mr-1 rounded-[2rem]&quot;&gt;--&gt;</span>
+ <span class="p">&lt;</span><span class="nt">video</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;screenrec.mp4&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;h-[57vh] mt-4 mr-1 rounded-[2rem]&quot;</span> <span class="na">controls</span> <span class="na">muted</span> <span class="na">autoplay</span><span class="p">&gt;&lt;/</span><span class="nt">video</span><span class="p">&gt;</span>
+ <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</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>
+]]></content:encoded>
+ </item>
+
+ <item>
+ <guid isPermaLink="true">
https://web.navan.dev/posts/2019-12-10-TensorFlow-Model-Prediction.html
</guid>
<title>
diff --git a/docs/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png b/docs/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png
new file mode 100644
index 0000000..2817224
--- /dev/null
+++ b/docs/images/opengraph/posts/2024-02-26-control-element-under-another-element-html-css.png
Binary files differ
diff --git a/docs/index.html b/docs/index.html
index 2f442d9..3bee970 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -50,6 +50,19 @@
<h2>Recent Posts</h2>
<ul>
+ <li><a href="/posts/2024-02-26-control-element-under-another-element-html-css.html">Interacting with underlying element in HTML</a></li>
+ <ul>
+ <li>With CSS you can disable any interactions with an element and directly control the underlying element</li>
+ <li>Published On: 2024-02-26 11:57</li>
+ <li>Tags:
+
+ <a href='/tags/HTML.html'>HTML</a>,
+
+ <a href='/tags/CSS.html'>CSS</a>
+
+ </ul>
+
+
<li><a href="/3D-Designs/2024-02-17-Can-Holder-Mountain-Bike.html">Bike Soda Can Holder</a></li>
<ul>
<li>Carry your favourite soda (or beer) can with you while you ride</li>
@@ -108,25 +121,6 @@
</ul>
- <li><a href="/posts/2023-10-04-bomb-lab.html">Bomb Lab</a></li>
- <ul>
- <li>Walkthrough of Phases 1-6 of Bomb Lab for CSCI 2400 Computer Systems Lab 2</li>
- <li>Published On: 2023-10-04 13:12</li>
- <li>Tags:
-
- <a href='/tags/gdb.html'>gdb</a>,
-
- <a href='/tags/Reverse-Engineering.html'>Reverse-Engineering</a>,
-
- <a href='/tags/C++.html'>C++</a>,
-
- <a href='/tags/CSCI2400.html'>CSCI2400</a>,
-
- <a href='/tags/Assembly.html'>Assembly</a>
-
- </ul>
-
-
</ul>
<b>For all posts go to <a href="/posts">Posts</a></b>
diff --git a/docs/posts/2024-02-26-control-element-under-another-element-html-css.html b/docs/posts/2024-02-26-control-element-under-another-element-html-css.html
new file mode 100644
index 0000000..8b72ac5
--- /dev/null
+++ b/docs/posts/2024-02-26-control-element-under-another-element-html-css.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+ <link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />
+ <link rel="stylesheet" href="/assets/main.css" />
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Interacting with underlying element in HTML</title>
+ <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 rel="alternate" href="/feed.rss" type="application/rss+xml" title="Subscribe to Navan Chauhan" />
+ <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>
+ <center><nav style="display: block;">
+|
+<a href="/">home</a> |
+<a href="/about/">about/links</a> |
+<a href="/posts/">posts</a> |
+<a href="/3D-Designs/">3D designs</a> |
+<!--<a href="/publications/">publications</a> |-->
+<!--<a href="/repo/">iOS repo</a> |-->
+<a href="/feed.rss">RSS Feed</a> |
+</nav>
+</center>
+
+<main>
+
+ <h1>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">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;row-span-2 md:col-span-1 rounded-xl border-2 border-slate-400/10 bg-neutral-100 p-4 dark:bg-neutral-900&quot;</span><span class="p">&gt;</span>
+ <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;content flex flex-wrap content-center justify-center&quot;</span><span class="p">&gt;</span>
+ <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;iphone-12-white.png&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;h-[60vh] z-10 absolute&quot;</span><span class="p">&gt;</span>
+ <span class="cm">&lt;!--&lt;img src=&quot;screenshot2.jpeg&quot; class=&quot;h-[57vh] mt-4 mr-1 rounded-[2rem]&quot;&gt;--&gt;</span>
+ <span class="p">&lt;</span><span class="nt">video</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;screenrec.mp4&quot;</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;h-[57vh] mt-4 mr-1 rounded-[2rem]&quot;</span> <span class="na">controls</span> <span class="na">muted</span> <span class="na">autoplay</span><span class="p">&gt;&lt;/</span><span class="nt">video</span><span class="p">&gt;</span>
+ <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
+<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</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>
+
+ <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>
+</main>
+
+ <script src="assets/manup.min.js"></script>
+ <script src="/pwabuilder-sw-register.js"></script>
+</body>
+</html> \ No newline at end of file
diff --git a/docs/posts/index.html b/docs/posts/index.html
index 566d3de..4194100 100644
--- a/docs/posts/index.html
+++ b/docs/posts/index.html
@@ -52,6 +52,19 @@
<ul>
+ <li><a href="/posts/2024-02-26-control-element-under-another-element-html-css.html">Interacting with underlying element in HTML</a></li>
+ <ul>
+ <li>With CSS you can disable any interactions with an element and directly control the underlying element</li>
+ <li>Published On: 2024-02-26 11:57</li>
+ <li>Tags:
+
+ <a href='/tags/HTML.html'>HTML</a>,
+
+ <a href='/tags/CSS.html'>CSS</a>
+
+ </ul>
+
+
<li><a href="/posts/2024-01-05-hello-20224.html">Hello 2024</a></li>
<ul>
<li>Recap of 2023, and my goals for 2024</li>
diff --git a/docs/tags/CSS.html b/docs/tags/CSS.html
new file mode 100644
index 0000000..b11c63d
--- /dev/null
+++ b/docs/tags/CSS.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+ <link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />
+ <link rel="stylesheet" href="/assets/main.css" />
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>"CSS"</title>
+ <meta name="og:site_name" content="Navan Chauhan" />
+ <link rel="canonical" href="https://web.navan.dev" />
+ <meta name="twitter:url" content="https://web.navan.dev />
+ <meta name="og:url" content="https://web.navan.dev" />
+ <meta name="twitter:title" content="Hey - Home" />
+ <meta name="og:title" content="Hey - Home" />
+ <meta name="description" content="code snippets, long-form rants, and tutorials" />
+ <meta name="twitter:description" content="code snippets, long-form rants, and tutorials" />
+ <meta name="og:description" content="code snippets, long-form rants, and tutorials" />
+ <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 rel="alternate" href="/feed.rss" type="application/rss+xml" title="Subscribe to Navan Chauhan" />
+ <meta name="twitter:image" content="https://web.navan.dev/images/logo.png" />
+ <meta name="og:image" content="https://web.navan.dev/images/logo.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>
+ <center><nav style="display: block;">
+|
+<a href="/">home</a> |
+<a href="/about/">about/links</a> |
+<a href="/posts/">posts</a> |
+<a href="/3D-Designs/">3D designs</a> |
+<!--<a href="/publications/">publications</a> |-->
+<!--<a href="/repo/">iOS repo</a> |-->
+<a href="/feed.rss">RSS Feed</a> |
+</nav>
+</center>
+
+
+<main>
+ <h1>CSS</h1><p>Posts tagged 'CSS'</p>
+</main>
+
+<ul>
+
+ <li><a href="/posts/2024-02-26-control-element-under-another-element-html-css.html">Interacting with underlying element in HTML</a></li>
+ <ul>
+ <li>With CSS you can disable any interactions with an element and directly control the underlying element</li>
+ <li>Published On: 2024-02-26 11:57</li>
+ <li>Tags:
+
+ <a href='/tags/HTML.html'>HTML</a>,
+
+ <a href='/tags/CSS.html'>CSS</a>
+
+ </ul>
+
+
+</ul>
+
+
+ <script src="assets/manup.min.js"></script>
+ <script src="/pwabuilder-sw-register.js"></script>
+</body>
+</html> \ No newline at end of file
diff --git a/docs/tags/HTML.html b/docs/tags/HTML.html
index dce5e7b..411407f 100644
--- a/docs/tags/HTML.html
+++ b/docs/tags/HTML.html
@@ -49,6 +49,19 @@
<ul>
+ <li><a href="/posts/2024-02-26-control-element-under-another-element-html-css.html">Interacting with underlying element in HTML</a></li>
+ <ul>
+ <li>With CSS you can disable any interactions with an element and directly control the underlying element</li>
+ <li>Published On: 2024-02-26 11:57</li>
+ <li>Tags:
+
+ <a href='/tags/HTML.html'>HTML</a>,
+
+ <a href='/tags/CSS.html'>CSS</a>
+
+ </ul>
+
+
<li><a href="/posts/2020-12-1-HTML-JS-RSS-Feed.html">RSS Feed written in HTML + JavaScript</a></li>
<ul>
<li>Short code-snippet for an RSS feed, written in HTML and JavaScript</li>