From 2ede57d571e382f5aae167bd2a059a12fa1108ea Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Mon, 26 Feb 2024 12:09:08 -0700 Subject: add new post --- ...rol-element-under-another-element-html-css.html | 88 ++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 docs/posts/2024-02-26-control-element-under-another-element-html-css.html (limited to 'docs/posts/2024-02-26-control-element-under-another-element-html-css.html') 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 @@ + + + + + + + + + Interacting with underlying element in HTML + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +

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.

+ +
+
<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

+ +

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:

+ +
+
.className {
+    pointer-events: none
+}
+
+
+ +
If you have scrolled this far, consider subscribing to my mailing list here. You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.
+ +
+ +
+
+ + + + + \ No newline at end of file -- cgit v1.2.3 From 507d51b356de707b5b8d3e1832fbf3684415f07c Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Wed, 28 Feb 2024 11:51:41 -0700 Subject: add example to post --- ...rol-element-under-another-element-html-css.html | 43 ++++++++++++++++++++++ 1 file changed, 43 insertions(+) (limited to 'docs/posts/2024-02-26-control-element-under-another-element-html-css.html') 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 index 8b72ac5..b9c9ebc 100644 --- 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 @@ -74,6 +74,49 @@ +

Let us try this in a simple example.

+ +

Example

+ +

Here, we create a button and overlay a transparent box

+ +
+
<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 200px width
+</div>
+<button style="z-index: 1; margin-top: 20px; margin-bottom: 200px;" onclick="alert('You were able to click this button')">Try clicking me</button>
+
+
+ +
+ +
+A box with 200px height and 300px width +
+ +

+

+ +

As you can see, you cannot click the button because the red box comes in the way. We can fix this by adding pointer-events: none to the box.

+ +
+
<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>
+<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>
+
+
+ +
+ +
+A box with 200px height and 300px width +
+ +

+

+
If you have scrolled this far, consider subscribing to my mailing list here. You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.
-- cgit v1.2.3 From f6d2141a480dd6b5b8ee0e48d43bb64773232791 Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Tue, 26 Mar 2024 23:38:14 -0600 Subject: add header ids --- ...4-02-26-control-element-under-another-element-html-css.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/posts/2024-02-26-control-element-under-another-element-html-css.html') 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 index b9c9ebc..3085822 100644 --- 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 @@ -6,13 +6,13 @@ - Interacting with underlying element in HTML + id="interacting-with-underlying-element-in-html">Interacting with underlying element in HTML - - + Interacting with underlying element in HTML" /> + Interacting with underlying element in HTML" /> @@ -44,7 +44,7 @@
-

Interacting with underlying element in HTML

+

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.

@@ -76,7 +76,7 @@

Let us try this in a simple example.

-

Example

+

Example

Here, we create a button and overlay a transparent box

-- cgit v1.2.3 From 9e620084e57378952c1a7f8e0a772ebebd18932b Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Wed, 27 Mar 2024 20:35:09 -0600 Subject: quick fix --- .../2024-02-26-control-element-under-another-element-html-css.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/posts/2024-02-26-control-element-under-another-element-html-css.html') 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 index 3085822..6c44808 100644 --- 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 @@ -6,13 +6,13 @@ - id="interacting-with-underlying-element-in-html">Interacting with underlying element in HTML + Interacting with underlying element in HTML - Interacting with underlying element in HTML" /> - Interacting with underlying element in HTML" /> + + -- cgit v1.2.3 From 01ff93c9c16867216f2d249664803860e1d6d5eb Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Wed, 27 Mar 2024 22:49:40 -0600 Subject: generate new theme --- ...rol-element-under-another-element-html-css.html | 55 +++++++++++++++------- 1 file changed, 37 insertions(+), 18 deletions(-) (limited to 'docs/posts/2024-02-26-control-element-under-another-element-html-css.html') 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 index 6c44808..3509983 100644 --- 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 @@ -2,14 +2,26 @@ - + + + + + Interacting with underlying element in HTML + + + + + + + - Interacting with underlying element in HTML - @@ -29,21 +41,27 @@ - -
-
+ +
+
+
+

Navan

+

Something Funny

+
+ + +

© 2024. All rights reserved. +

+
+
-
- +

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.

@@ -117,14 +135,15 @@ A box with 200px height and 300px width

+
If you have scrolled this far, consider subscribing to my mailing list here. You can subscribe to either a specific type of post you are interested in, or subscribe to everything with the "Everything" list.
-
+ -- cgit v1.2.3 From de19543d7fb44d343b052dc9b34ede78620c4a46 Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Wed, 27 Mar 2024 23:36:55 -0600 Subject: Generate --- ...6-control-element-under-another-element-html-css.html | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) (limited to 'docs/posts/2024-02-26-control-element-under-another-element-html-css.html') 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 index 3509983..c088f19 100644 --- 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 @@ -46,7 +46,7 @@

Navan

-

Something Funny

+

Alea iacta est.

-

© 2024. All rights reserved. +

© 2019-2024. Navan Chauhan
RSS

+ +
-- cgit v1.2.3 From a982ceab0b45609991179b3020a00260eed6f798 Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Wed, 27 Mar 2024 23:45:59 -0600 Subject: css --- .../posts/2024-02-26-control-element-under-another-element-html-css.html | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/posts/2024-02-26-control-element-under-another-element-html-css.html') 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 index c088f19..6595331 100644 --- 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 @@ -5,6 +5,7 @@ + Interacting with underlying element in HTML -- cgit v1.2.3