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)
1 Jul 2020 12:00amClose 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.
All entries tagged css.
You can subscribe to an RSS feed of this list.
Jul 2020
Mar 2020
-
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.
Jul 2017
-
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?
Oct 2011
-
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!
Jul 2010
-
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?
Jan 2010
-
Reply to 'position:fixed in IE' on stackoverflow:
position: fixed is not supported by IE before version 7. There are workarounds, easily googlable:
Dec 2009
-
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 6This 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 6Basically, 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.
- elements designed to render via float:left inside a fixed-width container as follows:
Sep 2009
-
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!
Jul 2009
-
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.
Jun 2009
-
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?
Dec 2008
-
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?
Jul 2008
Jun 2008
Apr 2006
Jan 2006
Jun 2005
May 2005
-
Test stuff via delicious
HTML, CSS, Javascript, etc. tricks