Web-centric Computing

Some Example Code

Dual Presentation Redux

This example relies on Javascript and CSS to dynamically alter the presentation of the text. But it also works if only one, or neither, of those technologies is available.

Your browser is not using CSS.

After the code snippets below is a long explanation.

Javascript

There are two scripts in this example:

  1. In the head 
    <script type="text/javascript" src="shrink.js"></script>
    1. dynamically alters the right margin to make room for the box
    2. uses the DOM
    3. uses a convention to convert from margin-right (in CSS terms) to marginRight (in DOM terms)
    4. refers to the non-intuitive CSS box-width computation
  2. near the end of the body 
    <script type="text/javascript" src="goback.js"></script>
    1. dynamically inserts the markup code for the boxed link
    2. includes JS link type
    3. uses both the onclick and onkeypress events
    4. includes specific ids for the CSS rules to apply to

Cascading Style Sheet

The most significant part of the CSS rules is 

div#DivBack {position:fixed; top:25%; right:1ex; width:12ex}

(which does not work properly in old versions of some browsers).

Explanation

This example uses

JavaScript to
insert a return to previous link, and
alters the right margin of the webpage.
CSS to
format the return to previous link, and
put the text of that link in a fixed position.

Without JavaScript there is no return to previous link, but there is no distractingly large empty right margin either. With JavaScript but without CSS, the return to previous link appears as ordinary text at the bottom of the webpage. Of course we could use XHTML (e.g. <em>) to make it more prominent (and turn off the XHTML effects with CSS too) but this is just an example, not a complete, production quality webpage.

Without either JavaScript or CSS there is neither a return to previous link nor a weird margin — the webpage is completely normal and accessible. Since the use of JavaScript, CSS, or both in this combination, enhances the webpage, and the webpage is completely usable and accessible without either of those technologies, this technique is an example of what Eric Meyer calls progressive enhancement.

Note however that this specific coding method can only work with standards-compliant browsers. Browsers that improperly implement JavaScript or CSS will not display this webpage properly. Also note how the CSS has been included (using @import with media types) to stop some old browsers from trying to use the stylesheet.

See Also

Credits

The example is based on a technique used in part of an article by David Kolb. The greeked text is courtesy of the perbang.dk website.

Extra Text To Make Webpage Long

Lorem ipsum dolor sit amet, posuere elit elit, duis ut sit nec, in nunc semper tincidunt neque. Arcu gravida quis libero diam, mauris nunc a cum condimentum, ut voluptatem penatibus eros tellus est enim. Vehicula sed. Quam posuere ipsum eleifend eleifend amet, dis at scelerisque condimentum, perferendis varius consequat ornare fermentum fusce, sagittis lectus metus, montes ipsum. Posuere mi non aliquam ut pellentesque. Orci enim velit consectetuer laoreet elit ante, pretium est rhoncus purus. Molestie nonummy, facilisis in quam odio, nonummy enim sed nulla amet molestie augue, morbi elit sagittis magna ridiculus mauris. Porttitor eget, faucibus rem mollis, a faucibus, elit sed fringilla a maecenas nonummy. Id duis urna, nulla mauris urna urna, aenean pede pellentesque sed et magna amet.

Et volutpat morbi nunc accumsan nec, nec tincidunt delectus vestibulum nunc in, suspendisse est ultricies mattis quis vitae ligula, morbi lectus feugiat in tellus elit, malesuada mi nec urna gravida ut. Sagittis fermentum mauris iaculis hendrerit eget tincidunt, wisi in vitae non id mauris ipsum, pretium eros aliquam pede aenean lectus, facilisis nec dictum eget eu est eros. Aliquam suspendisse sed amet nulla suspendisse, in sit pharetra massa fringilla nulla, eros fames cursus sit semper dui imperdiet, ac consectetuer non magna viverra sed maecenas. Ante posuere turpis eget facilisis quis, in accumsan nullam libero nisi pellentesque, sed vel mauris elit consectetuer sollicitudin, nec lobortis pellentesque dolor lacus iaculis.

Aenean sociis dolor rutrum. Purus sed penatibus a sodales facilisi, lorem aliquet, eu arcu lorem commodo, velit diam amet urna. Neque sit orci purus ut, nascetur convallis eleifend rhoncus lacus cras, in massa tincidunt. Integer etiam suspendisse facilisi porttitor non, suspendisse diam nullam ac. Eu eget vestibulum. Duis dui commodo purus, soluta in dolor quis dui et, est ut vestibulum phasellus mauris, pellentesque maecenas dolor justo mauris felis. Non pellentesque, a sem in sed.

Tellus rhoncus leo wisi risus vitae dignissim, arcu rhoncus et parturient vel velit, eget amet in turpis, tincidunt enim integer hac feugiat. Ipsum ad risus ut wisi proin. A tellus, mollis urna in eros ut ante, volutpat enim fugiat erat hac, urna ut auctor natoque. Donec et eget gravida, risus pretium nunc sollicitudin quis, mattis ipsum pede ut nibh mauris morbi. Molestie montes etiam, donec mattis ut diam lobortis. Magnis lacus ullamcorper mus diam viverra, purus culpa aliquam mauris tincidunt, ac penatibus, malesuada est interdum erat sed feugiat est. Consectetuer ultricies et consequat nunc sapien tellus, ac quia ac et donec, enim sit lobortis.

Tincidunt cras ultricies pulvinar. In justo lacus orci cursus et sapien, elit et, vulputate in, vulputate lectus dapibus. Tincidunt ullamcorper aenean ut, sapien justo tortor sed integer neque consequat, aliquam eget integer rhoncus cum, sed augue libero semper. Ac convallis quis quis vel quis. In dignissim erat ut proin vestibulum. Orci eros interdum amet lacinia, lorem urna dolor. Dolor libero ut at mauris. Non mattis ultrices et vitae scelerisque et, etiam vestibulum vel erat. Odio vel taciti suscipit habitasse faucibus consequat, ac wisi nec viverra at et rhoncus, duis risus dictumst, mauris lobortis quis sit massa, magna lorem integer mi quisque integer sodales.

Credits are above