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.
All entries tagged html.
You can subscribe to an RSS feed of this list.
Apr 2020
Jul 2012
-
Check the value of the control on document ready and adjust the div visibility accordingly.
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
-
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.
-
Reply to 'position:fixed in IE' on stackoverflow:
position: fixed is not supported by IE before version 7. There are workarounds, easily googlable:
-
var w = window.open(""); w.document.writeln("<the html you wanted to write>")
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:
Oct 2009
-
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)
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.