html — Attach to Process

Hide HTML Element Without Taking Up Space

Tue, 19 Jan 2021 02:00:00 +0000

Most of the time, using display: none; is all you need to hide an HTML element. But every once in awhile, doing so will hide the element, but would not reclaim the space the element would have been occupying.

To hide an HTML element and not have it take up space, you can do something like this:

#post-signature-hidden {
    max-height: 0;
    margin-top: -3em;
    visibility: hidden;
}

In case you're wondering, that's the CSS I use to stop my Post Signatures from showing up on the pinned pages on my journal.

Tags: #HTML #CSS

Discuss... or leave a comment below.

Domain Redirect via HTML and JavaScript

Tue, 15 Dec 2020 02:00:00 +0000

I purchased a new domain, nowlisteningto.com for my Now Listening to... music blog. Prior to buying the new domain name, I didn't realize how big of a pain it was going to be to set up redirection. Turns out, you can't setup a 301 redirect using just DNS records. It has to be done on a web server level, or via your domain registrar. My issue is that I can't use my domain registrar for redirects, because I use Netlify to manage the DNS records for my domains. And from what I can see, Netlify doesn't have a menu option for redirecting from one domain to another.

So, I ended up doing a redirect via HTML and JavaScript, by hosting a static site on Netlify. This static site's purpose is to simply redirect from nowlisteningto.dinobansigan.com to nowlisteningto.com. It is not ideal, but this will do for now until I figure out a better solution. Thanks to this answer on StackOverflow for the idea.

Tags: #CustomDomain #DomainRedirect #HTML #JavaScript

Discuss... or leave a comment below.

How to Embed Responsive YouTube Videos on Write.as

Sun, 19 Apr 2020 18:07:39 +0000

Updated: 4/26/2021

Coney complained to me this morning that the YouTube videos on my latest music log entry were getting cut off when viewed from her phone. I've known about this issue for awhile, but didn't really try to find a solution for it. Well, today I did and it turns out to be really easy.

The issue stems from the fact that I have to use iframes to embed videos on write.as sites. To make the YouTube videos I embed on write.as sites responsive, I simply followed the instructions from this Responsive Youtube Embed post. Specifically, these are the changes I added to my journal.

Custom CSS

I added the following Custom CSS:

/* Responsive Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML Changes

And on my posts where I embedded YouTube videos, I simply wrapped the iframe element with a div element that had a class attribute value of “video-container”, like this:

With those changes in place, I have found that the YouTube videos I embedded on my posts will shrink down to match the size of the screen on a mobile phone, or will expand to match the width of the text on a post when viewed on a desktop browser. Pretty cool.

Tags: #HowTo #HTML #CSS #WriteAs

Discuss... or leave a comment below.