Creating interesting things
This page has a few tricks and bits that I've knocked up along the way. The JavaScript (JS) examples won't work, of course, without JS, however, the pages should still function, and be otherwise 100% usable (I take no responsibility for things not working in MSIE).Similarly with the CSS examples, there should be no information lose if CSS is not enabled.
With the exception of the fatlinks code, feel free to use any of the tricks on this page, or linked off this page (within the 'play' folder), as you like. Feel free to copy the CSS, JS and HTML, and use where you like, obligation free. That said, I would appreciate a link back to this page, and notification of where the tricks are being used. But by no means is that required. Who am I? I'm Michael, you can find out more using the links at the bottom of the page.
CSS
Border, with embedded heading
This is the text which will have the border around it. And then will have the heading embedded in the border.
Original method
Alternative
This second method doesn't look as nice, the border to the left of the header doesn't form a corner. There is a div, and then the header, and finally the paragraph. The div has a border around it, the header is forced to be inline, given a background and then using position:relative
and a negative top, it pushes it up.
Other, almost, but not quite, possibilities don't look at all nice. The following three do not have a div around the header.
Example
Because if you have a block element with a background, it covers the top border.
Example
Or, the text is over the border, if you don't have the background set. (Uses {margin-top: -.7em; padding-left: .3em;}
.)
Example
This is almost like the alternative method, but the header is not forced to be inline. (And the numbers are different.)
Various CSS Hover
Different ways of making changes when mousing over (no JavaScript required). (May not work on MSIE, but who cares?)
Anchor <a> hover.
Span 'id' hover.
Span "class" hover.
JavaScript
Spoilers done correctly
(Added 2019-03-29): The correct way is to use <detail> and <summary> tags. These have been around since at least HTML5.1, 2nd ed., 2017-10-03
TODO: aria-expanded (and presumably aria-not-expanded, whatever that is) and mark as accordian (or whatver they're called).
So like, I browse with NoScript, and JS turned off on the vast majority of websites. However, I constantly come across these "spoiler" buttons (particularly on forums). The way these generally work is that they use CSS to hide the text, and then when you hit the button, JavaScript to unhide it.
The correct way is to display the darn spoiler, and then if JS is turned on, hide it, until the button is clicked. As demonstrated in the example below (the next paragraph is a spoiler).
Without JS, this text is displayed. Because it is in a div with class spoiler, CSS is used to display it differently to the rest of the text. It appears in MSIE 6 that the JS doesn't work, and so the spoiler is displayed as is. Not tested in other versions of MSIE, so I've used conditional comments to hide the script from all versions of MSIE.
The JS inserts a header with the text spoiler, which is then formated using CSS from the border+header stuff above. It's also possible to use CSS to insert the text "spoiler" before the content, using generated content (comment out the three lines in the hidespoilers() funtion). However, it maybe more polite to users to not assume that the :before pseudo-element is avalible for their browser. (After all, it's a CSS2 feature, and that's only been around since 1998. Hardly enough time to support it at all!)
Snape kills Trinity with Rosebud! And then it turns out they're both Tyler Durden...
Fatlinks
Fat links are links that leads to multiple destinations. For more information, the Wikipedia article on the subject is suggested, and also Reviving Advanced Hypertext, an article from Jakob Nielsen written in 2005.
I have written a JavaScript script, and also played around with CSS, with the intention of adding fatlinks to HTML. It, also (of course) works without JS and CSS being enabled.