HTML, CSS and JS play

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

This was the original method I discovered. If you examine the source code for this section, you'll see the heading is comprised of two parts. A div, surrounding another element (in this case a h4). This second element should be an inline element, or as in this case, forced to be inline by CSS. The first div, with class bphheader1, shifts the header up (with a negative "margin-top" in the CSS). The second element has a white background, which covers the border. Without the two elements like this, it doesn't look nearly as good. If you put a background on the first element (or if you only have one element with a background), it covers the border for the entire screen (being a block element). And if you don't have the background at all, well, see below.

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.
Lac Léman 'moving pictures' 'moving pictures'

JavaScript

Spoilers done correctly

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...

Hover only navigation

Hover only navigation is navigating links without clicking, instead, merely hovering the cursor over the link will activate it. The example script is a good example of "progressive enhancement". That is, it works perfectly fine without JavaScript. Well, except in MSIE 6 (possibly other versions of MSIE), where the links don't work at all.

Site & page info (footer)

Mostly handcrafted by Michael, this website was designed to standards, with the highest quality in mind, and in result. The code and content is freely available.

This page is located at http://next-nexus.info/webdev/play/ and was last modified on 2011-04-25.