Roy Tang

roytang.net

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

Blog Notes Photos Links Archives About

Subscribe: RSS JSON

2020 July

2020 March

  • Pure CSS Spoilers

    Edit 2020/04/17: A month and a half later, I found a better way to do this! I previously had some post that had some content hidden via spoiler tags, using a custom Hugo shortcode. Since I'm an old-school developer I was previously doing this using some Javascript run on load: let elements = document.querySelectorAll(".spoiler_header"); Array.prototype.forEach.call(elements, function(el, i) { el.addEventListener( 'click', function( event ) { let nextEl = el.nextElementSibling; let display = getComputedStyle(nextEl)['display']; if (display == 'none') { nextEl.style.display = 'block'; } else { nextEl.style.display = 'none'; } }, false); }); This is the modern age however. We should really be

    read more (320 words)

2017 July

2011 October

  • CSS Menu wrapping

    I'm trying to build a CSS-based menu. I want it to be able to adjust when the browser resizes so I'm using floats to wrap the menu items to the next line as needed. However, I want to have an extra buffer cell at the end to round out the menu appearance, see the sample image below (this an image the designer made from photoshop).

    Example here

    I can set the background image of the containing div to fake it (using the clearing floats trick I found at http://quirksmode.org/css/clearing.html), but then I have the additional problem of having extra space on the right side because I the cited trick says I should set the width to 100% on the container. (see image below)

    enter image description here

    I also don't have any borders on that extra area after the last item. So, what's the proper way to go about this? Can anyone suggest any good online implementations I can check?

    Thanks!

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

2009 June

2008 December

2008 July

2008 June

2006 April

2006 January

2005 June

2005 May