Roy Tang

roytang.net

Programmer, engineer, scientist, critic, gamer, dreamer, and kid-at-heart.

Blog Notes Photos Links Archives About

Subscribe: RSS JSON

2020 April

  • Pure HTML Toggles

    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

    read more (230 words)

2012 July

2010 July

  • 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: floaty divs

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

2010 January

2009 December

  • CSS Rendering List Items in 2 rows

    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.

2009 October

  • Trimming whitespace from HTML content?

    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 &nbsp; 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)

2009 September

  • Loading and resizing images dynamically

    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!

2009 July