:target for non-CSS3 browsers

While reading wg::target and conditional text display I thought to myself: Cool, indeed, but why limit it to the most recent browsers when we can use some simple Javascript for browsers that do not support CSS3?

This work is licensed under a Creative Commons License.

CSS Prerequisite

The fallback class must meet the following restrictions:

• the class name must be .hash-target
• the class must be a separate rule, e.g. p[id^=paragraph]:target strong { display: inline; } p.hash-target strong { display: inline; }

How to use TargetFix()

TargetFix() requires the inclusion of targetfix.js, e.g.

<script type="text/javascript"
    src="targetfix.js"></script>

and this simple line at the end of the document:

<script type="text/javascript">TargetFix();</script>

Known limitations

• Navigation via the Back/Forward buttons is not caught by the script

Sample

• go to paragraph 2
• go to paragraph 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse pharetra leo vitae augue. Nunc interdum placerat dolor. Mauris sollicitudin ligula vitae quam. Sed lorem nibh, euismod non, pharetra quis, egestas ac, nibh. Donec blandit, velit at tincidunt euismod, nibh augue vestibulum urna, ac pellentesque ipsum wisi ac lectus. Donec ac pede. Phasellus diam nunc, consectetuer ac, pellentesque vel, sagittis eget, turpis. Morbi rutrum mattis lorem. Phasellus elementum wisi id urna. In hac habitasse platea dictumst. Curabitur ipsum. Phasellus placerat, mauris faucibus porta fermentum, enim odio imperdiet leo, in rhoncus metus quam a eros. Integer pulvinar arcu eu arcu. Nullam in tellus. Ut placerat, sapien sed accumsan pretium, orci nibh dictum lectus, a suscipit orci wisi a nisl. Nullam justo erat, posuere nec, molestie id, consectetuer a, libero. Donec venenatis. Aliquam blandit.

This is paragraph 2 Nulla ut neque a nulla rhoncus commodo. Donec aliquam erat. Nulla porta elit in libero. Quisque fringilla, leo sed aliquet bibendum, leo sem commodo ligula, quis lobortis sem sem eget sem. Fusce orci magna, semper nec, scelerisque ut, fringilla eu, quam. Etiam porta sapien. Sed urna velit, mattis eget, vehicula vel, pellentesque at, velit. Nunc in lorem. Cras sit amet nulla mollis sapien porta tristique. Phasellus sagittis vehicula quam. Fusce iaculis condimentum diam. Ut vel sapien sit amet ligula blandit sodales. Aenean bibendum ante in tortor. Nunc sed quam. Fusce lacinia. Maecenas euismod turpis sed dolor. Donec varius dictum wisi. Phasellus ut magna eu nibh luctus scelerisque.

This is paragraph 3 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis dignissim enim ac lacus. Quisque lobortis dapibus eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque molestie, nisl a luctus commodo, diam purus facilisis metus, nec faucibus tortor ante ac ante. Curabitur sodales. Etiam interdum pretium mauris. Phasellus feugiat. Duis purus odio, nonummy sit amet, euismod et, porttitor et, justo. Aliquam nisl est, pulvinar et, tristique ac, placerat in, diam. Nullam vel libero vitae justo interdum hendrerit. Suspendisse potenti. Morbi facilisis, tellus ac euismod fermentum, dolor mi auctor wisi, sit amet accumsan dolor mauris eu wisi. Nunc vitae risus. Proin nec ligula. Nunc feugiat euismod mauris. In adipiscing mollis neque.