2022 March
2021 November
-
TIL that if you don't put
type='button'on yourbuttontag, it will automatically submit the form when clicked.
2020 April
-
Just last month, I wrote a method of implementing element toggles using a pure CSS approach. While that post was educational for me, it turns out there was an even simpler way of doing things. I found out about it when I read this post by Jamie Tanna. Apparently the details and summary tags already support HTML toggles, so we can do this with neither CSS or JS! I've updated the spoiler tags on this site to use this new method. I also used this method for the Table of Contents on certain posts (currently only the Covid19 diary). Sample
2012 July
-
Check the value of the control on document ready and adjust the div visibility accordingly.
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
-
It's been a while, but I think browser security settings normally will not allow you to set the contents of <input type="file" /> programmatically, resulting in some security exception when you submit.
-
position: fixed is not supported by IE before version 7. There are workarounds, easily googlable:
-
var w = window.open(""); w.document.writeln("
")
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 October
-
I have a CRUD maintenance screen with a custom rich text editor control (FCKEditor actually) and the program extracts the formatted text as HTML from the control for saving to the database. However, part of our standards is that leading and trailing whitespace needs to be stripped from the content before saving, so I have to remove extraneous and <br> and such from the beginning and end of the HTML string.
I can opt to either do it on the client side (using Javascript) or on the server side (using Java) Is there an easy way to do this, using regular expressions or something? I'm not sure how complex it needs to be, I need to be able to remove stuff like:
<p><br /> </p>yet retain it if there's any kind of meaningful text in between. (Above snippet is from actual HTML data saved by the tester)
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.