css on Roy Tang

Image Lightboxes using HTML/CSS

hello@roytang.net (Roy Tang) — Wed, 01 Jul 2020 00:00:00 +0000

In several places on this site (like if you click Photos in the menu up top), I have a grid-like view of a list of photos/images:

(Click to view full-size)

I used to just have each thumbnail open the post permalink on click, with the anchor set to the image itself. The image would be shown in full size inline of the post. This was a bit clunky and not so modern, so I decided to implement it so that the image lists instead will show a Lightbox-style overlay with the full image and some details and an option to click through to the post. That looks a little something like this:

(Click to view full-size)

Now, in the olden days doing this sort of thing required JavaScript (as described in the wikipedia link above to Lightbox). But for the modern web, this can be achieved using HTML and CSS only. The method is described in this blog post by jlelse, specifically for use in Hugo themes. The CSS technique is relatively straightforward: you generate two images, a thumbnail, and a hidden full-size one in an overlay. The thumbnail is wrapped in an anchor pointing to the id of the hidden overlay, and the overlay gets displayed via the :target CSS pseudo-selector.

Here’s how that looks in this site’s current Hugo templates:

( .context is the original image resource, and $thumb is the generated thumbnail)

<a href="#{{ .context.RelPermalink | md5 }}-lightbox">
    <figure>
      <img src="{{ $thumb.RelPermalink }}" alt="{{ $figcaption }}" 
        title="{{ $figcaption }}" class="tn" />
    </figure>
</a>
<div  class="lightbox" id="{{ .context.RelPermalink | md5 }}-lightbox">
  <a href="#_">
    <img src="{{ .context.RelPermalink | safeURL }}" />
  </a>
  <div class="lightbox_overlay">
    <p>{{ $figcaption }}</p>
    <time class="dt-published" datetime="{{ .postDate }}">{{ .postDate }}</time>
    <a href="{{ .mainPermalink }}">View post</a>
    <a href="#_">Close</a>
  </div>
</div>

And the relevant CSS (I don’t use SASS):

.lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	width: 100vw;
	height: 100vh;
    background: rgba(0,0,0,0.8);
}
.lightbox_overlay {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.6);
    padding-bottom: 1rem;
}
.lightbox_overlay * {
    padding: 1rem;
}
.lightbox img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
.lightbox:target {
    outline: none;
    display: block;
}

My only changes on top of the jlelse’s blog post linked above was to add a second overlay for a caption and date to be shown, and a link to the original post, and a close button. Clicking the post itself also dismisses the overlay (by replacing the URL fragment), but I thought it was more usable to also add an obvious Close button. I also initially wanted to put “Previous” and “Next” buttons so that you can easily cycle through the images in a post, but this was a bit more effort. I didn’t have a way to “look ahead” in the loop to get the “next” image, if any, so I think I would have needed to loop through the images twice? And since I use this image list in a number of places on the site, that was a bit troublesome, so maybe it’s something I’ll attempt later on?

In any case, I think the new lightboxes are neat!

Pure CSS Spoilers

hello@roytang.net (Roy Tang) — Thu, 05 Mar 2020 00:00:00 +0000

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 trying to minimize our Javascript on the non-app public web as much as possible, so I decided to change it to a Pure CSS solution. Here’s a quick demo:

(Spoilers)

This is hidden text!

The Pure CSS solution uses the following HTML (including Hugo shortcode macros, should be easy to understand; .Inner is the actual spoiler content.):

<div class="spoiler_container">
    <a class="spoiler_link" href="#spoiler-{{ $id }}">(Spoilers)</a> 
    <a class="spoiler_target" id="spoiler-{{ $id }}"></a>
    <div class="spoiler">{{ .Inner }} <a href="#" class="hide_spoiler">Hide Spoilers</a></div>    
</div>
<p />

The CSS for this toggle is:

.spoiler {
    display: none;
}
.spoiler_target:target {
    position: fixed;
}
.spoiler_target:target + .spoiler {
    display: inline;
}

Basically, this takes advantage of the :target CSS pseudo-selector. The “(Spoiler)” anchor changes the URL hash to point to the id of the spoiler_target element, and we use the CSS + operator to display the actual spoiler content when the :target pseudo-selector is activated. I originally tried it with the id being assigned directly to the spoiler content, but this had the problem of “jumping around”, i.e. clicking the “(Spoiler)” link would scroll the page to the anchor location. The workaround for this was separating the target anchor from the spoiler content, making the anchor hidden (no text) and adding position:fixed (to prevent the scrolling). The “Hide” link simply sets the URL hash location back to “#”.

New note

hello@roytang.net (Roy Tang) — Sat, 15 Jul 2017 02:04:29 +0000

I’m trying out jsplumb. I have a copy of this demo: https://jsplumbtoolkit.com/community/demo/statemachine/index.html

In this demo, when I drag one of the nodes outside of the canvas boundary, a scrollbar appears to indicate the canvas area has expanded. However, I still have to manually scroll the view to see the dragged node.

I would like the view to automatically scroll when I drag a node beyond the edge. Same thing when dragging a new connector, I would like to automatically scroll the view - so I can choose to connect to a node currently outside the visible area. Any advice on how to do this?

Secondary question: In the demo above the scrollbars appear as expected when I drag elements off the right or bottom of the canvas, but not when I drag them off the left edge or off the top edge. That is, if I drag a node upward off the canvas and drop it there, I no longer have any way of viewing that node or dragging it back down. Is there a way around this?

New note

hello@roytang.net (Roy Tang) — Mon, 24 Oct 2011 04:17:49 +0000

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

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)

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!

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

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) — 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.

New note

hello@roytang.net (Roy Tang) — Fri, 26 Jun 2009 03:07:21 +0000

Specifically, say I have a string like ABC-123-NNN. I would like the paragraph to have line breaks, but not to break at the dashes.

i.e. if my text is “The serial number ABC-123-NNN is not valid”, I would like to keep together the entire serial number if it exceeds the container width.

So the following is ok:

  The serial number 
  ABC-123-NNN is not 
  valid

But the following (which is the behavior of IE6) is not:

  The serial number ABC-
  123-NNN is not valid

Currently IE seems to break at dashes. Is there any applicable CSS or whatever I can apply to avoid it?

New note

hello@roytang.net (Roy Tang) — Thu, 18 Dec 2008 02:28:56 +0000

I’m not sure if this a settings problem or an HTML problem, but on a page layout I’m working on, Firefox does not render the stylesheet immediately. Meaning for maybe half a second I can see the unstyled page, then the stylesheet kicks in and it renders as I expect.

All my stylesheets are in external css files loaded in the head tag. I’m not encountering this on Flock (which is a Firefox variant) nor on Google Chrome/IE.

Any idea how to avoid it?

Exceptional Performance - Yahoo Web Performance Team

hello@roytang.net (Roy Tang) — Sun, 20 Jul 2008 12:53:43 +0000

Shared via delicious: Exceptional Performance - Yahoo Web Performance Team

blueprintcss - Google Code

hello@roytang.net (Roy Tang) — Sun, 01 Jun 2008 15:08:47 +0000

Shared via delicious: blueprintcss - Google Code

Floatutorial: Step by step CSS float tutorial

hello@roytang.net (Roy Tang) — Wed, 19 Apr 2006 14:52:44 +0000

Shared via delicious: Floatutorial: Step by step CSS float tutorial

intensivstation :: CSS Templates :: Templates

hello@roytang.net (Roy Tang) — Tue, 10 Jan 2006 12:42:06 +0000

Shared via delicious: intensivstation :: CSS Templates :: Templates

CSS tips and tricks

hello@roytang.net (Roy Tang) — Fri, 10 Jun 2005 16:05:07 +0000

Shared via delicious: CSS tips and tricks

Test stuff

hello@roytang.net (Roy Tang) — Wed, 11 May 2005 15:58:42 +0000

Shared via delicious: Test stuff

HTML, CSS, Javascript, etc. tricks