2022 October
-
I'll probably find this useful later
2022 March
-
(Warning: Medium) I found this interesting only because when I started out in web dev, our company's standard test plan required that we autofocus the first editable control on page load
2022 January
-
I've solved all #CSS puzzles on CSS Speedrun™ within 06:03:8 and all I got was this stupid tweet.
2021 December
-
More CSS Flexbox/Grid tips
2020 July
-
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: 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
2020 March
-
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
2017 July
-
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?
2011 October
-
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!
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:
What's the proper CSS way to have the container (red-bordered box) completely surround the floaty green-bordered boxes?
2010 January
-
position: fixed is not supported by IE before version 7. There are workarounds, easily googlable:
2009 December
-
Let's say I have a series of
<li>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.
2009 September
-
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
-
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.
2009 June
-
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?
2008 December
-
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?