Ipsum auto creation

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

A little project I've been dropping spare time into for awhile now.

Basicly, it replaces special comments (<!-- AutoIpsum paragraphs="5" -->) with random Ipsum VIA Javascript.

Being I've got it working well enough for my needs I figured I'd toss it out here for people looking for somthing to do to exparament with. :D

The HTML & CSS is from http://www.csszengarden.com/
The original Ipsum generation script came from http://www.tecknik.net/loremipsum/

Worked better than I hoped, tests in IE6, FF, & Opera created about 130 instances, one being a 200 paragraph, another being a 2,000 word, in about one second with a 1.3Ghz/256meg system.

Here's my expansion/integration broken into 3 files, have fun ! :D

Example.html
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    
    <title>AutoIpsum</title>

    <script type="text/javascript" src="AutoIpsum.js"></script>
    
    <style type="text/css" media="all">
        @import "Example.css";
    </style>
    
</head>
<body>
<div id="container">
    <div id="intro">
        <div id="pageHeader">
            <h1><span><!--AutoIpsum words="3"--></span></h1>
            <h2><span><!--AutoIpsum words="3"--><acronym title=""><!--AutoIpsum words="4"--></acronym><!--AutoIpsum words="1"--></span></h2>
        </div>

        <div id="quickSummary">
            <p class="p1"><span><!--AutoIpsum words="9"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum words="4"--><!--AutoIpsum sentences="1"--></span></p>
            <p class="p2"><span><!--AutoIpsum words="4"--><a href="#" title="Example"><!--AutoIpsum words="2"--></a><!--AutoIpsum words="1"--><a href="#" title="Example"><!--AutoIpsum words="2"--></a></span></p>
        </div>

        <div id="preamble">
            <h3><span><!--AutoIpsum sentences="1"--></span></h3>
            <p class="p1"><span><!--AutoIpsum sentences="1"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum words="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum words="1"--></span></p>
            <p class="p2"><span><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="1"--></span></p>
            <p class="p3"><span><!--AutoIpsum sentences="4"--></span></p>
        </div>
    </div>

    <div id="supportingText">
        <div id="explanation">
            <h3><span><!--AutoIpsum sentences="1"--></span></h3>
            <p class="p1"><span><!--AutoIpsum sentences="1"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum paragraphs="1"--></span></p>
            <p class="p2"><span><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum paragraphs="200"--></span></p>
        </div>

        <div id="participation">
            <h3><span><!--AutoIpsum words="1"--></span></h3>
            <p class="p1"><span><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="2"--><a href="#" title="Example"><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum words="2"--></a><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym>.</span></p>
            <p class="p2"><span><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="3"--></span></p>
            <p class="p3"><span><!--AutoIpsum words="3"--><a href="#" title="Example"><!--AutoIpsum words="2000"--></a><!--AutoIpsum words="1"--><a href="#" title="Example"><!--AutoIpsum words="2"--></a><!--AutoIpsum sentences="4"--><a href="#" title="Example"><!--AutoIpsum sentences="1"--></a><!--AutoIpsum sentences="2"--></span></p>
        </div>

        <div id="benefits">
            <h3><span><!--AutoIpsum words="1"--></span></h3>
            <p class="p1"><span><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="5"--></span></p>
        </div>

        <div id="requirements">
            <h3><span><!--AutoIpsum words="1"--></span></h3>
            <p class="p1"><span><!--AutoIpsum sentences="1"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum words="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum words="1"--></span></p>
            <p class="p2"><span><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="1"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="2"--><a href="#" title="Example"><!--AutoIpsum words="1"--></a><!--AutoIpsum paragraphs="1"--></span></p>
            <p class="p3"><span><!--AutoIpsum paragraphs="1"--></span></p>
            <p class="p4"><span><!--AutoIpsum sentences="1"--><a href="#"><!--AutoIpsum words="2"--></a><!--AutoIpsum sentences="1"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="1"--><a href="#" title="Example"><!--AutoIpsum words="4"--></a><!--AutoIpsum sentences="1"--></span></p>
            <p class="p5"><span><!--AutoIpsum sentences="1"--><a href="#"><!--AutoIpsum sentences="1"--></a></span></p>
        </div>

        <div id="footer">
            <a href="#" title="Example"><!--AutoIpsum words="1"--></a> &nbsp;
            <a href="#" title="Example"><!--AutoIpsum words="1"--></a> &nbsp;
            <a href="#" title="Example"><!--AutoIpsum letters="2"--></a> &nbsp;
            <a href="#" title="Example"><!--AutoIpsum letters="3"--></a> &nbsp;
            <a href="#" title="Example"><!--AutoIpsum letters="3"--></a>
        </div>

    </div>

    
    <div id="linkList">
        <!--extra div for flexibility - this list will probably be the trickiest spot you'll deal with -->
        <div id="linkList2">

        <!-- If you're wondering about the extra &nbsp; at the end of the link, it's a hack to meet WCAG 1 Accessibility. -->
        <!-- I don't like having to do it, but this is a visual exercise. It's a compromise. -->
            <div id="lselect">
                <h3 class="select"><span><!--AutoIpsum words="3"--></span></h3>
                <!-- list of links begins here. There will be no more than 8 links per page -->
                <ul>
                    <li><a href="#" title="Example" accesskey="a"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
                    <li><a href="#" title="Example" accesskey="b"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
                    <li><a href="#" title="Example" accesskey="c"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
                    <li><a href="#" title="Example" accesskey="d"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
                    <li><a href="#" title="Example" accesskey="e"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
                    <li><a href="#" title="Example" accesskey="f"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
                    <li><a href="#" title="Example" accesskey="g"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
                    <li><a href="#" title="Example" accesskey="h"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
                </ul>
            </div>

            <div id="larchives">
                <h3 class="archives"><span><!--AutoIpsum words="1"--></span></h3>
                <ul>
                    <li><a href="#" title="Example" accesskey="n"><span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="2"--> &raquo;</a>&nbsp;</li>
                    <li><a href="#" title="Example" accesskey="p">&laquo; <span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="2"--></a></li>
                    <li><a href="#" title="Example" accesskey="w"><!--AutoIpsum letters="3"--><span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="2"--></a></li>
                </ul>
            </div>
            
            <div id="lresources">
                <h3 class="resources"><span><!--AutoIpsum words="1"--></span></h3>
                <ul>
                    <li><a href="#" title="Example" accesskey="v"><span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="3"--><acronym title="Example"><!--AutoIpsum letters="3"--></acronym></a></li>
                    <li><a href="#" title="Example" accesskey="r"><acronym title="Example"><!--AutoIpsum letters="3"--></acronym><span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="1"--></a></li>
                    <li><a href="#" title="Example" accesskey="q"><acronym title="Example"><!--AutoIpsum letters="2"--><span class="accesskey"><!--AutoIpsum letters="1"--></span></acronym></a>&nbsp;</li>
                    <li><a href="#" title="Example" accesskey="s"><span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="3"--></a></li>
                    <li><a href="#" title="Example" accesskey="t"><span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="1"--></a></li>
                </ul>
            </div>
        </div>
    </div>


</div>

<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
<!-- Add a background image to each and use width and height to control sizing, place with absolute positioning -->
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>

</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.     
  7.     <title>AutoIpsum</title>
  8.     <script type="text/javascript" src="AutoIpsum.js"></script>
  9.     
  10.     <style type="text/css" media="all">
  11.         @import "Example.css";
  12.     </style>
  13.     
  14. </head>
  15. <body>
  16. <div id="container">
  17.     <div id="intro">
  18.         <div id="pageHeader">
  19.             <h1><span><!--AutoIpsum words="3"--></span></h1>
  20.             <h2><span><!--AutoIpsum words="3"--><acronym title=""><!--AutoIpsum words="4"--></acronym><!--AutoIpsum words="1"--></span></h2>
  21.         </div>
  22.         <div id="quickSummary">
  23.             <p class="p1"><span><!--AutoIpsum words="9"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum words="4"--><!--AutoIpsum sentences="1"--></span></p>
  24.             <p class="p2"><span><!--AutoIpsum words="4"--><a href="#" title="Example"><!--AutoIpsum words="2"--></a><!--AutoIpsum words="1"--><a href="#" title="Example"><!--AutoIpsum words="2"--></a></span></p>
  25.         </div>
  26.         <div id="preamble">
  27.             <h3><span><!--AutoIpsum sentences="1"--></span></h3>
  28.             <p class="p1"><span><!--AutoIpsum sentences="1"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum words="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum words="1"--></span></p>
  29.             <p class="p2"><span><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="1"--></span></p>
  30.             <p class="p3"><span><!--AutoIpsum sentences="4"--></span></p>
  31.         </div>
  32.     </div>
  33.     <div id="supportingText">
  34.         <div id="explanation">
  35.             <h3><span><!--AutoIpsum sentences="1"--></span></h3>
  36.             <p class="p1"><span><!--AutoIpsum sentences="1"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum paragraphs="1"--></span></p>
  37.             <p class="p2"><span><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum paragraphs="200"--></span></p>
  38.         </div>
  39.         <div id="participation">
  40.             <h3><span><!--AutoIpsum words="1"--></span></h3>
  41.             <p class="p1"><span><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="2"--><a href="#" title="Example"><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum words="2"--></a><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym>.</span></p>
  42.             <p class="p2"><span><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="3"--></span></p>
  43.             <p class="p3"><span><!--AutoIpsum words="3"--><a href="#" title="Example"><!--AutoIpsum words="2000"--></a><!--AutoIpsum words="1"--><a href="#" title="Example"><!--AutoIpsum words="2"--></a><!--AutoIpsum sentences="4"--><a href="#" title="Example"><!--AutoIpsum sentences="1"--></a><!--AutoIpsum sentences="2"--></span></p>
  44.         </div>
  45.         <div id="benefits">
  46.             <h3><span><!--AutoIpsum words="1"--></span></h3>
  47.             <p class="p1"><span><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="5"--></span></p>
  48.         </div>
  49.         <div id="requirements">
  50.             <h3><span><!--AutoIpsum words="1"--></span></h3>
  51.             <p class="p1"><span><!--AutoIpsum sentences="1"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum words="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum words="1"--></span></p>
  52.             <p class="p2"><span><!--AutoIpsum sentences="2"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="1"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="2"--><a href="#" title="Example"><!--AutoIpsum words="1"--></a><!--AutoIpsum paragraphs="1"--></span></p>
  53.             <p class="p3"><span><!--AutoIpsum paragraphs="1"--></span></p>
  54.             <p class="p4"><span><!--AutoIpsum sentences="1"--><a href="#"><!--AutoIpsum words="2"--></a><!--AutoIpsum sentences="1"--><acronym title="Example"><!--AutoIpsum words="1"--></acronym><!--AutoIpsum sentences="1"--><a href="#" title="Example"><!--AutoIpsum words="4"--></a><!--AutoIpsum sentences="1"--></span></p>
  55.             <p class="p5"><span><!--AutoIpsum sentences="1"--><a href="#"><!--AutoIpsum sentences="1"--></a></span></p>
  56.         </div>
  57.         <div id="footer">
  58.             <a href="#" title="Example"><!--AutoIpsum words="1"--></a> &nbsp;
  59.             <a href="#" title="Example"><!--AutoIpsum words="1"--></a> &nbsp;
  60.             <a href="#" title="Example"><!--AutoIpsum letters="2"--></a> &nbsp;
  61.             <a href="#" title="Example"><!--AutoIpsum letters="3"--></a> &nbsp;
  62.             <a href="#" title="Example"><!--AutoIpsum letters="3"--></a>
  63.         </div>
  64.     </div>
  65.     
  66.     <div id="linkList">
  67.         <!--extra div for flexibility - this list will probably be the trickiest spot you'll deal with -->
  68.         <div id="linkList2">
  69.         <!-- If you're wondering about the extra &nbsp; at the end of the link, it's a hack to meet WCAG 1 Accessibility. -->
  70.         <!-- I don't like having to do it, but this is a visual exercise. It's a compromise. -->
  71.             <div id="lselect">
  72.                 <h3 class="select"><span><!--AutoIpsum words="3"--></span></h3>
  73.                 <!-- list of links begins here. There will be no more than 8 links per page -->
  74.                 <ul>
  75.                     <li><a href="#" title="Example" accesskey="a"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
  76.                     <li><a href="#" title="Example" accesskey="b"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
  77.                     <li><a href="#" title="Example" accesskey="c"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
  78.                     <li><a href="#" title="Example" accesskey="d"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
  79.                     <li><a href="#" title="Example" accesskey="e"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
  80.                     <li><a href="#" title="Example" accesskey="f"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
  81.                     <li><a href="#" title="Example" accesskey="g"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
  82.                     <li><a href="#" title="Example" accesskey="h"><!--AutoIpsum words="3"--></a><!--AutoIpsum words="1"--><a href="#" class="c"><!--AutoIpsum words="2"--></a>&nbsp;</li>
  83.                 </ul>
  84.             </div>
  85.             <div id="larchives">
  86.                 <h3 class="archives"><span><!--AutoIpsum words="1"--></span></h3>
  87.                 <ul>
  88.                     <li><a href="#" title="Example" accesskey="n"><span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="2"--> &raquo;</a>&nbsp;</li>
  89.                     <li><a href="#" title="Example" accesskey="p">&laquo; <span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="2"--></a></li>
  90.                     <li><a href="#" title="Example" accesskey="w"><!--AutoIpsum letters="3"--><span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="2"--></a></li>
  91.                 </ul>
  92.             </div>
  93.             
  94.             <div id="lresources">
  95.                 <h3 class="resources"><span><!--AutoIpsum words="1"--></span></h3>
  96.                 <ul>
  97.                     <li><a href="#" title="Example" accesskey="v"><span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="3"--><acronym title="Example"><!--AutoIpsum letters="3"--></acronym></a></li>
  98.                     <li><a href="#" title="Example" accesskey="r"><acronym title="Example"><!--AutoIpsum letters="3"--></acronym><span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="1"--></a></li>
  99.                     <li><a href="#" title="Example" accesskey="q"><acronym title="Example"><!--AutoIpsum letters="2"--><span class="accesskey"><!--AutoIpsum letters="1"--></span></acronym></a>&nbsp;</li>
  100.                     <li><a href="#" title="Example" accesskey="s"><span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="3"--></a></li>
  101.                     <li><a href="#" title="Example" accesskey="t"><span class="accesskey"><!--AutoIpsum letters="1"--></span><!--AutoIpsum words="1"--></a></li>
  102.                 </ul>
  103.             </div>
  104.         </div>
  105.     </div>
  106. </div>
  107. <!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
  108. <!-- Add a background image to each and use width and height to control sizing, place with absolute positioning -->
  109. <div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
  110. <div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>
  111. </body>
  112. </html>


Example.css
Code: [ Select ]
/* css Zen Garden default style v1.01 */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */


/* This file based on 'Tranquille' by Dave Shea */
/* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
/* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */

/* Images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */


/* basic elements */
body {
    font: 8pt/16pt georgia;
    color: #555753;
    background: #fff url(blossoms.jpg) no-repeat bottom right;
    margin: 0px;
    }
p {
    font: 8pt/16pt georgia;
    margin-top: 0px;
    text-align: justify;
    }
h3 {
    font: italic normal 12pt georgia;
    letter-spacing: 1px;
    margin-bottom: 0px;
    color: #7D775C;
    }
a:link {
    font-weight: bold;
    text-decoration: none;
    color: #B7A5DF;
    }
a:visited {
    font-weight: bold;
    text-decoration: none;
    color: #D4CDDC;
    }
a:hover, a:active {
    text-decoration: underline;
    color: #9685BA;
    }


/* specific divs */
#container {
    background: url(zen-bg.jpg) no-repeat top left;
    padding: 0px 175px 0px 110px; 
    margin: 0px;
    }

#intro {
    min-width: 470px;
    }
#pageHeader {
    margin-bottom: 20px;
    }

/* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
#pageHeader h1 {
    background: transparent url(h1.gif) no-repeat top left;
    margin-top: 10px;
    width: 219px;
    height: 87px;
    float: left;
    }
#pageHeader h1 span {
    display:none
    }
#pageHeader h2 {
    background: transparent url(h2.gif) no-repeat top left;
    margin-top: 58px;
    margin-bottom: 40px;
    width: 200px;
    height: 18px;
    float: right;
    }
#pageHeader h2 span {
    display:none;
    }

#quickSummary {
    clear:both;
    margin: 20px 20px 20px 10px;
    width: 160px;
    float: left;
    }
#quickSummary p {
    font: italic 10pt/22pt georgia;
    text-align:center;
    }

#preamble {
    clear: right;
    padding: 0px 10px 0px 10px;
    }
#supportingText {
    padding-left: 10px;
    margin-bottom: 40px;
    }

#footer {
    text-align: center;
    }
#footer a:link, #footer a:visited {
    margin-right: 20px;
    }

#linkList {
    margin-left: 600px;
    position: absolute;
    top: 0px;
    right: 0px;
    }
#linkList2 {
    font: 10px verdana, sans-serif;
    background: transparent url(paper-bg.jpg) top left repeat-y;
    padding: 10px;
    margin-top: 150px;
    width: 130px;
    }
#linkList h3.select {
    background: transparent url(h3.gif) no-repeat top left;
    margin: 10px 0px 5px 0px;
    width: 97px;
    height: 16px;
    }
#linkList h3.select span {
    display:none
    }
#linkList h3.favorites {
    background: transparent url(h4.gif) no-repeat top left;
    margin: 25px 0px 5px 0px;
    width: 60px;
    height: 18px;
    }
#linkList h3.favorites span {
    display:none
    }
#linkList h3.archives {
    background: transparent url(h5.gif) no-repeat top left;
    margin: 25px 0px 5px 0px;
    width:57px;
    height: 14px;
    }
#linkList h3.archives span {
    display:none
    }
#linkList h3.resources {
    background: transparent url(h6.gif) no-repeat top left;
    margin: 25px 0px 5px 0px;
    width:63px;
    height: 10px;
    }
#linkList h3.resources span {
    display:none
    }


#linkList ul {
    margin: 0px;
    padding: 0px;
    }
#linkList li {
    line-height: 2.5ex;
    list-style-type: none;
    background: transparent url(cr1.gif) no-repeat top center;
    display: block;
    padding-top: 5px;
    margin-bottom: 5px;
    }
#linkList li a:link {
    color: #988F5E;
    }
#linkList li a:visited {
    color: #B3AE94;
    }
    


#extraDiv1 {
    background: transparent url(cr2.gif) top left no-repeat;
    position: absolute;
    top: 40px;
    right: 0px;
    width: 148px;
    height: 110px;
    }
  1. /* css Zen Garden default style v1.01 */
  2. /* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */
  3. /* This file based on 'Tranquille' by Dave Shea */
  4. /* You may use this file as a foundation for any new work, but you may find it easier to start from scratch. */
  5. /* Not all elements are defined in this file, so you'll most likely want to refer to the xhtml as well. */
  6. /* Images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */
  7. /* basic elements */
  8. body {
  9.     font: 8pt/16pt georgia;
  10.     color: #555753;
  11.     background: #fff url(blossoms.jpg) no-repeat bottom right;
  12.     margin: 0px;
  13.     }
  14. p {
  15.     font: 8pt/16pt georgia;
  16.     margin-top: 0px;
  17.     text-align: justify;
  18.     }
  19. h3 {
  20.     font: italic normal 12pt georgia;
  21.     letter-spacing: 1px;
  22.     margin-bottom: 0px;
  23.     color: #7D775C;
  24.     }
  25. a:link {
  26.     font-weight: bold;
  27.     text-decoration: none;
  28.     color: #B7A5DF;
  29.     }
  30. a:visited {
  31.     font-weight: bold;
  32.     text-decoration: none;
  33.     color: #D4CDDC;
  34.     }
  35. a:hover, a:active {
  36.     text-decoration: underline;
  37.     color: #9685BA;
  38.     }
  39. /* specific divs */
  40. #container {
  41.     background: url(zen-bg.jpg) no-repeat top left;
  42.     padding: 0px 175px 0px 110px; 
  43.     margin: 0px;
  44.     }
  45. #intro {
  46.     min-width: 470px;
  47.     }
  48. #pageHeader {
  49.     margin-bottom: 20px;
  50.     }
  51. /* using an image to replace text in an h1. This trick courtesy Douglas Bowman, http://www.stopdesign.com/articles/css/replace-text/ */
  52. #pageHeader h1 {
  53.     background: transparent url(h1.gif) no-repeat top left;
  54.     margin-top: 10px;
  55.     width: 219px;
  56.     height: 87px;
  57.     float: left;
  58.     }
  59. #pageHeader h1 span {
  60.     display:none
  61.     }
  62. #pageHeader h2 {
  63.     background: transparent url(h2.gif) no-repeat top left;
  64.     margin-top: 58px;
  65.     margin-bottom: 40px;
  66.     width: 200px;
  67.     height: 18px;
  68.     float: right;
  69.     }
  70. #pageHeader h2 span {
  71.     display:none;
  72.     }
  73. #quickSummary {
  74.     clear:both;
  75.     margin: 20px 20px 20px 10px;
  76.     width: 160px;
  77.     float: left;
  78.     }
  79. #quickSummary p {
  80.     font: italic 10pt/22pt georgia;
  81.     text-align:center;
  82.     }
  83. #preamble {
  84.     clear: right;
  85.     padding: 0px 10px 0px 10px;
  86.     }
  87. #supportingText {
  88.     padding-left: 10px;
  89.     margin-bottom: 40px;
  90.     }
  91. #footer {
  92.     text-align: center;
  93.     }
  94. #footer a:link, #footer a:visited {
  95.     margin-right: 20px;
  96.     }
  97. #linkList {
  98.     margin-left: 600px;
  99.     position: absolute;
  100.     top: 0px;
  101.     right: 0px;
  102.     }
  103. #linkList2 {
  104.     font: 10px verdana, sans-serif;
  105.     background: transparent url(paper-bg.jpg) top left repeat-y;
  106.     padding: 10px;
  107.     margin-top: 150px;
  108.     width: 130px;
  109.     }
  110. #linkList h3.select {
  111.     background: transparent url(h3.gif) no-repeat top left;
  112.     margin: 10px 0px 5px 0px;
  113.     width: 97px;
  114.     height: 16px;
  115.     }
  116. #linkList h3.select span {
  117.     display:none
  118.     }
  119. #linkList h3.favorites {
  120.     background: transparent url(h4.gif) no-repeat top left;
  121.     margin: 25px 0px 5px 0px;
  122.     width: 60px;
  123.     height: 18px;
  124.     }
  125. #linkList h3.favorites span {
  126.     display:none
  127.     }
  128. #linkList h3.archives {
  129.     background: transparent url(h5.gif) no-repeat top left;
  130.     margin: 25px 0px 5px 0px;
  131.     width:57px;
  132.     height: 14px;
  133.     }
  134. #linkList h3.archives span {
  135.     display:none
  136.     }
  137. #linkList h3.resources {
  138.     background: transparent url(h6.gif) no-repeat top left;
  139.     margin: 25px 0px 5px 0px;
  140.     width:63px;
  141.     height: 10px;
  142.     }
  143. #linkList h3.resources span {
  144.     display:none
  145.     }
  146. #linkList ul {
  147.     margin: 0px;
  148.     padding: 0px;
  149.     }
  150. #linkList li {
  151.     line-height: 2.5ex;
  152.     list-style-type: none;
  153.     background: transparent url(cr1.gif) no-repeat top center;
  154.     display: block;
  155.     padding-top: 5px;
  156.     margin-bottom: 5px;
  157.     }
  158. #linkList li a:link {
  159.     color: #988F5E;
  160.     }
  161. #linkList li a:visited {
  162.     color: #B3AE94;
  163.     }
  164.     
  165. #extraDiv1 {
  166.     background: transparent url(cr2.gif) top left no-repeat;
  167.     position: absolute;
  168.     top: 40px;
  169.     right: 0px;
  170.     width: 148px;
  171.     height: 110px;
  172.     }


AutoIpsum.js
Code: [ Select ]
AutoIpsum = {
    staticMode: false,
    sourceArray: ['Curabitur ultricies risus vitae eros.','Donec molestie malesuada quam.','Donec urna enim, pharetra et, sagittis vitae, tempus, mauris.','Duis sed sem.','Fusce sodales odio non ipsum.','Integer nec leo eget sapien porta commodo.','Maecenas ut lorem.','Morbi cursus vulputate magna.','Morbi non metus.','Nam in nibh.','Nam sed nulla.','Nulla eu orci nec ligula pellentesque vulputate.','Nulla sed risus sit amet massa rutrum auctor.','Pellentesque eget arcu at ipsum elementum bibendum.','Proin porttitor gravida justo.','Quisque mattis gravida diam.','Sed ornare eros vitae tellus.','Sed ut lectus.','Ut tempus congue urna.','Vivamus eu nibh a diam tempus adipiscing.'],
    currentIpsum: '',
    ips: [],
    wordBank: [],
    ipsNodes: [],
    nodeCount: 0,
    getIpsumComments: function(elm) {
     elm = elm || document.documentElement;
  var IpsumComments = [];
     for(var c = 0; c < elm.childNodes.length; c++) {
      if (elm.childNodes[c].nodeType == 8 && (/^\s{0,4}AutoIpsum/i.test(elm.childNodes[c].data))) {
       IpsumComments[IpsumComments.length] = elm.childNodes[c];
      }else if (elm.childNodes[c].nodeType == 1) {
       IpsumComments = IpsumComments.concat(AutoIpsum.getIpsumComments(elm.childNodes[c]));
   }
        }
     return IpsumComments;
    },
    randomizeSource: function(){
        while(AutoIpsum.sourceArray.length > 0){
            Math.round(Math.random()) > 0 ? AutoIpsum.ips.push(AutoIpsum.sourceArray.shift()) : AutoIpsum.ips.push(AutoIpsum.sourceArray.pop());
        }
        while(AutoIpsum.ips.length > 0){
            Math.round(Math.random()) > 0 ? AutoIpsum.sourceArray.push(AutoIpsum.ips.shift()) : AutoIpsum.sourceArray.push(AutoIpsum.ips.pop());
        }
 },
 randomizeWordBank: function(){
     if(!AutoIpsum.staticMode){
        AutoIpsum.randomizeSource();
    }
  AutoIpsum.wordBank = AutoIpsum.sourceArray.join(' ').replace(/[^ a-z]/gi, '').toLowerCase().split(' ');
 },
 getParagraph: function(){
     if(!AutoIpsum.staticMode){
        AutoIpsum.randomizeSource();
    }
    return AutoIpsum.sourceArray.join(' ') + ' ';
 },
 getSentence: function(){
     if(!AutoIpsum.staticMode){
        AutoIpsum.randomizeSource();
    }
  return AutoIpsum.sourceArray[0] + ' ';
 },
 getWords: function(words){
     words = words || 1;
    AutoIpsum.randomizeWordBank();
    if(words < AutoIpsum.wordBank.length){
      return (AutoIpsum.wordBank.slice(0, words).join(' '));
  }else if(words > AutoIpsum.wordBank.length){
      while(words > AutoIpsum.wordBank.length){
      var wbCopy = AutoIpsum.wordBank;
      AutoIpsum.randomizeWordBank();
       AutoIpsum.wordBank = AutoIpsum.wordBank.concat(wbCopy);
   }
   return AutoIpsum.wordBank.slice(0, words).join(' ');
  }
  return AutoIpsum.wordBank.join(' ');
 },
 getletters: function(letters){
     letters = letters || 1;
     if(!AutoIpsum.staticMode){
        AutoIpsum.randomizeSource();
    }
  var byteBank = AutoIpsum.sourceArray.join(' ');
  if(letters < byteBank.length){
      return byteBank.slice(0, letters);
  }else if(letters > byteBank.length){
      while(letters > byteBank.length){
       byteBank = byteBank + ' ' + byteBank;
   }
   return byteBank.slice(0, letters);
  }
  return byteBank;
 },
 processIpsumComments: function(){
     AutoIpsum.ipsNodes = AutoIpsum.getIpsumComments();
    for(; AutoIpsum.nodeCount < AutoIpsum.ipsNodes.length; AutoIpsum.nodeCount++){
        AutoIpsum.currentIpsum = '';
        if(/paragraphs/i.test(AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data)){
            var i = AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data.match(/(?:paragraphs\s{0,4}={1}\s{0,4}['"]?(\d+)['"]?)/i)[1];
            for(var j=0; j<i; j++){
                AutoIpsum.currentIpsum += AutoIpsum.getParagraph();
            }
        }
        if(/sentences/i.test(AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data)){
            var i = AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data.match(/(?:sentences\s{0,4}={1}\s{0,4}['"]?(\d+)['"]?)/i)[1];
            for(var j=0; j<i; j++){
                AutoIpsum.currentIpsum += AutoIpsum.getSentence();
            }
        }
        if(/words/i.test(AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data)){
            AutoIpsum.currentIpsum += AutoIpsum.getWords(AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data.match(/(?:words\s{0,4}={1}\s{0,4}['"]?(\d+)['"]?)/i)[1]);
        }
        if(/letters/i.test(AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data)){
            AutoIpsum.currentIpsum += AutoIpsum.getletters(AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data.match(/(?:letters\s{0,4}={1}\s{0,4}['"]?(\d+)['"]?)/i)[1]);
        }
        AutoIpsum.ipsNodes[AutoIpsum.nodeCount].parentNode.replaceChild(document.createTextNode(AutoIpsum.currentIpsum), AutoIpsum.ipsNodes[AutoIpsum.nodeCount]);
  }
 }
}
window.onload = function(){
    AutoIpsum.processIpsumComments();
}
  1. AutoIpsum = {
  2.     staticMode: false,
  3.     sourceArray: ['Curabitur ultricies risus vitae eros.','Donec molestie malesuada quam.','Donec urna enim, pharetra et, sagittis vitae, tempus, mauris.','Duis sed sem.','Fusce sodales odio non ipsum.','Integer nec leo eget sapien porta commodo.','Maecenas ut lorem.','Morbi cursus vulputate magna.','Morbi non metus.','Nam in nibh.','Nam sed nulla.','Nulla eu orci nec ligula pellentesque vulputate.','Nulla sed risus sit amet massa rutrum auctor.','Pellentesque eget arcu at ipsum elementum bibendum.','Proin porttitor gravida justo.','Quisque mattis gravida diam.','Sed ornare eros vitae tellus.','Sed ut lectus.','Ut tempus congue urna.','Vivamus eu nibh a diam tempus adipiscing.'],
  4.     currentIpsum: '',
  5.     ips: [],
  6.     wordBank: [],
  7.     ipsNodes: [],
  8.     nodeCount: 0,
  9.     getIpsumComments: function(elm) {
  10.      elm = elm || document.documentElement;
  11.   var IpsumComments = [];
  12.      for(var c = 0; c < elm.childNodes.length; c++) {
  13.       if (elm.childNodes[c].nodeType == 8 && (/^\s{0,4}AutoIpsum/i.test(elm.childNodes[c].data))) {
  14.        IpsumComments[IpsumComments.length] = elm.childNodes[c];
  15.       }else if (elm.childNodes[c].nodeType == 1) {
  16.        IpsumComments = IpsumComments.concat(AutoIpsum.getIpsumComments(elm.childNodes[c]));
  17.    }
  18.         }
  19.      return IpsumComments;
  20.     },
  21.     randomizeSource: function(){
  22.         while(AutoIpsum.sourceArray.length > 0){
  23.             Math.round(Math.random()) > 0 ? AutoIpsum.ips.push(AutoIpsum.sourceArray.shift()) : AutoIpsum.ips.push(AutoIpsum.sourceArray.pop());
  24.         }
  25.         while(AutoIpsum.ips.length > 0){
  26.             Math.round(Math.random()) > 0 ? AutoIpsum.sourceArray.push(AutoIpsum.ips.shift()) : AutoIpsum.sourceArray.push(AutoIpsum.ips.pop());
  27.         }
  28.  },
  29.  randomizeWordBank: function(){
  30.      if(!AutoIpsum.staticMode){
  31.         AutoIpsum.randomizeSource();
  32.     }
  33.   AutoIpsum.wordBank = AutoIpsum.sourceArray.join(' ').replace(/[^ a-z]/gi, '').toLowerCase().split(' ');
  34.  },
  35.  getParagraph: function(){
  36.      if(!AutoIpsum.staticMode){
  37.         AutoIpsum.randomizeSource();
  38.     }
  39.     return AutoIpsum.sourceArray.join(' ') + ' ';
  40.  },
  41.  getSentence: function(){
  42.      if(!AutoIpsum.staticMode){
  43.         AutoIpsum.randomizeSource();
  44.     }
  45.   return AutoIpsum.sourceArray[0] + ' ';
  46.  },
  47.  getWords: function(words){
  48.      words = words || 1;
  49.     AutoIpsum.randomizeWordBank();
  50.     if(words < AutoIpsum.wordBank.length){
  51.       return (AutoIpsum.wordBank.slice(0, words).join(' '));
  52.   }else if(words > AutoIpsum.wordBank.length){
  53.       while(words > AutoIpsum.wordBank.length){
  54.       var wbCopy = AutoIpsum.wordBank;
  55.       AutoIpsum.randomizeWordBank();
  56.        AutoIpsum.wordBank = AutoIpsum.wordBank.concat(wbCopy);
  57.    }
  58.    return AutoIpsum.wordBank.slice(0, words).join(' ');
  59.   }
  60.   return AutoIpsum.wordBank.join(' ');
  61.  },
  62.  getletters: function(letters){
  63.      letters = letters || 1;
  64.      if(!AutoIpsum.staticMode){
  65.         AutoIpsum.randomizeSource();
  66.     }
  67.   var byteBank = AutoIpsum.sourceArray.join(' ');
  68.   if(letters < byteBank.length){
  69.       return byteBank.slice(0, letters);
  70.   }else if(letters > byteBank.length){
  71.       while(letters > byteBank.length){
  72.        byteBank = byteBank + ' ' + byteBank;
  73.    }
  74.    return byteBank.slice(0, letters);
  75.   }
  76.   return byteBank;
  77.  },
  78.  processIpsumComments: function(){
  79.      AutoIpsum.ipsNodes = AutoIpsum.getIpsumComments();
  80.     for(; AutoIpsum.nodeCount < AutoIpsum.ipsNodes.length; AutoIpsum.nodeCount++){
  81.         AutoIpsum.currentIpsum = '';
  82.         if(/paragraphs/i.test(AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data)){
  83.             var i = AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data.match(/(?:paragraphs\s{0,4}={1}\s{0,4}['"]?(\d+)['"]?)/i)[1];
  84.             for(var j=0; j<i; j++){
  85.                 AutoIpsum.currentIpsum += AutoIpsum.getParagraph();
  86.             }
  87.         }
  88.         if(/sentences/i.test(AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data)){
  89.             var i = AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data.match(/(?:sentences\s{0,4}={1}\s{0,4}['"]?(\d+)['"]?)/i)[1];
  90.             for(var j=0; j<i; j++){
  91.                 AutoIpsum.currentIpsum += AutoIpsum.getSentence();
  92.             }
  93.         }
  94.         if(/words/i.test(AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data)){
  95.             AutoIpsum.currentIpsum += AutoIpsum.getWords(AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data.match(/(?:words\s{0,4}={1}\s{0,4}['"]?(\d+)['"]?)/i)[1]);
  96.         }
  97.         if(/letters/i.test(AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data)){
  98.             AutoIpsum.currentIpsum += AutoIpsum.getletters(AutoIpsum.ipsNodes[AutoIpsum.nodeCount].data.match(/(?:letters\s{0,4}={1}\s{0,4}['"]?(\d+)['"]?)/i)[1]);
  99.         }
  100.         AutoIpsum.ipsNodes[AutoIpsum.nodeCount].parentNode.replaceChild(document.createTextNode(AutoIpsum.currentIpsum), AutoIpsum.ipsNodes[AutoIpsum.nodeCount]);
  101.   }
  102.  }
  103. }
  104. window.onload = function(){
  105.     AutoIpsum.processIpsumComments();
  106. }
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • suzie
  • Guru
  • Guru
  • User avatar
  • Posts: 1134
  • Loc: England

Post 3+ Months Ago

Hya Joebert,

I liked the zen garden I have seen it before but forgot about it.

Thank you.

:D :D
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I updated this today. :D
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

It's now an extension for Opera. (Opera 11+)
https://addons.labs.opera.com/addons/ex ... uto-ipsum/

// Edit -- Wow that's spooky. I actually wrote the extension yesterday, exactly 3 years to the day after the previous update. :shock:
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

Thats actually really neat.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Hopefully Opera will work out the whole "doesn't work if there's not a <script> element in the webpage's source code" bug in extensions soon.

It would also be nice if I could log into the account I submitted that extension under. When I use the "lost password" thing it takes me to a 404 page and trying to login through the community areas takes me to an entirely different account. I don't know what it is with companies and making it possible to have multiple accounts using the same email address and different passwords, I had a similar problem with Amazon that took YEARS to get fixed.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 71 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.