html on Roy Tang

Pure HTML Toggles

hello@roytang.net (Roy Tang) — Fri, 17 Apr 2020 00:00:00 +0000

Just last month, I wrote a method of implementing element toggles using a pure CSS approach. While that post was educational for me, it turns out there was an even simpler way of doing things. I found out about it when I read this post by Jamie Tanna. Apparently the details and summary tags already support HTML toggles, so we can do this with neither CSS or JS!

I’ve updated the spoiler tags on this site to use this new method. I also used this method for the Table of Contents on certain posts (currently only the Covid19 diary). Sample here:

(Spoilers)

This is some text!

The post I linked above covers most of the technical details. My only issue with this is that’s a relatively new feature. Even though browser support is near universal (minus the much-maligned and quite ancient Internet Explorer), I’m not sure if there will be issues or how it renders when viewed in an older browsers or in other contexts such as in a feed reader or a screen reader. I don’t want to accidentally show spoilers! I suppose that’s a minor concern at this point, and maybe I should just be confident that people who make those tools have taken the visibility toggle into account.

(I’ve also edited the CSS post to point to this one so anyone who sees it has better information!)

Reply to 'How to add dynamic data in source of html using Javascript' on stackoverflow at https://stackoverflow.com/questions/11465306/how-to-add-dynamic-data-in-source-of-html-using-javascript:

hello@roytang.net (Roy Tang) — Fri, 13 Jul 2012 06:36:23 +0000

Reply to 'How to add dynamic data in source of html using Javascript' on stackoverflow at https://stackoverflow.com/questions/11465306/how-to-add-dynamic-data-in-source-of-html-using-javascript:

Check the value of the control on document ready and adjust the div visibility accordingly.

New note

hello@roytang.net (Roy Tang) — Thu, 22 Jul 2010 12:06:37 +0000

Say I have the following HTML:

<head>
    <style>
        #container {
            border: 1px red solid;
        }
        .floaty {
            width: 200px;
            float: left;
            border: 1px green solid;
        }
    </style>
</head>
<body>
<div id='container'>
    Text inside the container
    <div class='floaty'>
    Floaty block 1<br/>
    Floaty block 1<br/>
    Floaty block 1<br/>
    </div>
    <div class='floaty'>
    Floaty block 2<br/>
    Floaty block 2<br/>
    Floaty block 2<br/>
    </div>
    <div class='floaty'>
    Floaty block 3<br/>
    Floaty block 3<br/>
    Floaty block 3<br/>
    </div>
</div>
</body>

This renders as:

What’s the proper CSS way to have the container (red-bordered box) completely surround the floaty green-bordered boxes?

Reply to 'submitting dynamically created form with javascript' on stackoverflow at https://stackoverflow.com/questions/2053970/submitting-dynamically-created-form-with-javascript:

hello@roytang.net (Roy Tang) — Wed, 13 Jan 2010 02:30:39 +0000

Reply to 'submitting dynamically created form with javascript' on stackoverflow at https://stackoverflow.com/questions/2053970/submitting-dynamically-created-form-with-javascript:

It’s been a while, but I think browser security settings normally will not allow you to set the contents of <input type="file” /> programmatically, resulting in some security exception when you submit.

Reply to 'position:fixed in IE' on stackoverflow at https://stackoverflow.com/questions/2013072/positionfixed-in-ie:

hello@roytang.net (Roy Tang) — Wed, 06 Jan 2010 13:17:25 +0000

Reply to 'position:fixed in IE' on stackoverflow at https://stackoverflow.com/questions/2013072/positionfixed-in-ie:

position: fixed is not supported by IE before version 7. There are workarounds, easily googlable:

Reply to 'How can I make JavaScript make (produce) new page?' on stackoverflow at https://stackoverflow.com/questions/2004555/how-can-i-make-javascript-make-produce-new-page:

hello@roytang.net (Roy Tang) — Tue, 05 Jan 2010 06:39:39 +0000

Reply to 'How can I make JavaScript make (produce) new page?' on stackoverflow at https://stackoverflow.com/questions/2004555/how-can-i-make-javascript-make-produce-new-page:

var w = window.open("");
w.document.writeln("<the html you wanted to write>")

New note

hello@roytang.net (Roy Tang) — Wed, 02 Dec 2009 05:52:26 +0000

Let’s say I have a series of

elements designed to render via float:left inside a fixed-width container as follows:

Item 1 | Item 2 | Item 3 | Item 4
| Item 5 | Item 6

This is fine, Item 5 and Item 6 are pushed to the second row because the container has a fixed width.

Now, is it possible to have something similar to above, except that majority of the items will render in the second row? Something like:

Item 1 | Item 2 
| Item 3 | Item 4| Item 5 | Item 6

Basically, I want to render a list of items horizontally, wrapping to the second row as needed, but with majority of the items on the second row if it exists. The number of items to be generated may vary, but will not exceed 2 rows’ worth of items.

New note

hello@roytang.net (Roy Tang) — Sun, 11 Oct 2009 11:58:13 +0000

I have a CRUD maintenance screen with a custom rich text editor control (FCKEditor actually) and the program extracts the formatted text as HTML from the control for saving to the database. However, part of our standards is that leading and trailing whitespace needs to be stripped from the content before saving, so I have to remove extraneous   and <br> and such from the beginning and end of the HTML string.

I can opt to either do it on the client side (using Javascript) or on the server side (using Java) Is there an easy way to do this, using regular expressions or something? I’m not sure how complex it needs to be, I need to be able to remove stuff like:

<p><br /> &nbsp;</p>

yet retain it if there’s any kind of meaningful text in between. (Above snippet is from actual HTML data saved by the tester)

New note

hello@roytang.net (Roy Tang) — Tue, 29 Sep 2009 09:43:10 +0000

HTML/Javascript - I want to load images dynamically, and the images I’m going to load can be of varying aspect ratios.

I want the images to fit into a specific area of the containing div - an area 40% of the containing div’s width and 80% of its height. Since they have varying aspect ratios, of course they will not always use up this entire area, but I want to resize them such that they don’t exceed the bounds. But I don’t know ahead of time whether I should specify the width or the height (and the partner attribute to auto) since I don’t know what the aspect ratio of the images will be ahead of time.

Is there a CSS way to do this? Or I need to compute the required widths using javascript?

PS I only need to do this in Firefox 3.5!

New note

hello@roytang.net (Roy Tang) — Tue, 14 Jul 2009 04:23:32 +0000

Say I had the following:

<select disabled="disabled" style="border: 1px red solid; color: black;">
<option>ABC</option>
</select>

Firefox renders the above with a red border and black text as I expect; but IE does not, it seems to be using native colors for the border and the disabled text. Is there any way for me to be able to style it?

For edit boxes my workaround was to use readOnly instead of disabled so that I can style it, but it seems for combo boxes the readOnly attribute has no effect.

Note: I only need this to work in IE (it’s for an intranet webapp where users must use IE), so IE-specific solutions are fine.