roytang.net Posts Photos 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

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

2009 July

2009 June

2008 December

2008 July

2008 June

2006 April

2006 January

2005 June

2005 May