roundElement2: roundelement2.html

File roundelement2.html, 2.4 kB (added by mae, 3 years ago)
Line 
1 <html>
2   <head>
3     <script type="text/javascript"
4       src="mochikit_trunk/MochiKit/MochiKit.js"></script>
5     <script type="text/javascript" src="roundelement2.js"></script>
6     <style type="text/css">
7       p {
8         color: #FFFFFF;
9         background: #528BBF;
10         width: 300px;
11         margin-top: 1em;
12         padding: 2em;
13       }
14     </style>
15   </head>
16   <body>
17     <h2>The Problem (roundElement):</h2>
18     <div>
19       The problem is that this function uses 1 element, and for the rounding "look" to work, you are not allowed to ever use any padding.
20       This adds complexity for the web designer who is designing his CSS Stylesheet; there is an arbitrary limit on how he can do his formatting.
21       For him to get any padding with the rounded corners feature, he must nest an element inside another element that has 'roundedCorners()' applied.
22       This defeats the whole purpose of abstracting layout from content, we have utterly annihilated the nice abstraction achieved with CSS.
23     </div>
24     <p id="test1">llkasjdflasdkj KJ  kj ;askj asdjSome text.lkasjdflasdkj KJ  kj ;askj asdjSome text.lkasjdflasdkj KJ  kj ;askj asdjSome text.lkasjdflasdkj KJ  kj ;askj asdjSome text.kasjdflasdkj KJ  kj ;askj asdjSome text.
25     </p>
26     <form><input type="button" value="show bug: roundElement()"
27       onClick="roundElement('test1');" /></form>
28     <h2>The Solution (roundElement2):</h2>
29     <div>
30       Here we do the nasty work for the developer. First, we move the html content from the original element to a new 'content' element.
31       Then we move 'padding' properties from the original element to the 'margin' properties of the content element. Finally we append the content element
32       as a child to the original element which is now a 'container'.  Voila, we now have beautiful content/layout abstraction and this is all done transparently
33       behind the scenes, and the web designer doesn't have to worry his/her pretty little head over nesting elements.
34     </div>
35     <p id="test2">Some more texlkasjdflasdkj KJ  kj ;askj asdjSome text.lkasjdflasdkj KJ  kj ;askj asdjSome text.lkasjdflasdkj KJ  kj ;askj asdjSome text.lkasjdflasdkj KJ  kj ;askj asdjSome text.lkasjdflasdkj KJ  kj ;askj asdjSome text.lkasjdflasdkj KJ  kj ;askj asdjSome text.lkasjdflasdkj KJ  kj ;askj asdjSome text.lkasjdflasdkj KJ  kj ;askj asdjSome text.t.
36     </p>
37     <form><input type="button" value="fix bug: roundElement2()"
38       onClick="roundElement2('test2');"/></form>
39   </body>
40 </html>