[API][!!!] Fix API compatibility break in tslib_pibase
[Packages/TYPO3.CMS.git] / typo3 / border.html
1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7 <title>Border between Navigation and List frame in TYPO3</title>
8
9 <style type="text/css">
10 /*<![CDATA[*/
11
12 body {
13 background-color: #dadada;
14 }
15
16 #toggle-tree {
17 height: 500px;
18 cursor: pointer;
19 border-right: 1px solid #c2c2c2;
20 }
21
22 .collapsed {
23 background-image: url("gfx/border_expand.gif");
24 background-repeat: no-repeat;
25 background-position: 1px 250px;
26 }
27
28 .expanded {
29 background-image: url("gfx/border_collapse.gif");
30 background-repeat: no-repeat;
31 background-position: 0px 250px;
32 border-left: 1px solid #c2c2c2;
33 }
34
35 /*]]>*/
36 </style>
37
38 <script type="text/javascript" src="contrib/prototype/prototype.js"></script>
39 <script type="text/javascript">
40 /*<![CDATA[*/
41
42 var origColumns = 0;
43 var frameSet = null;
44 var collapseState = 'expanded';
45
46 Event.observe(document, 'dom:loaded', function() {
47 $('toggle-tree').observe('click', toggleTree);
48
49 frameSet = parent.document.body;
50 origColumns = Element.readAttribute(frameSet, 'cols');
51 });
52
53 Event.observe(window, 'load', resizeBorder);
54 Event.observe(window, 'resize', resizeBorder);
55
56 function toggleTree() {
57 var columns = origColumns.split(',');
58
59 if(collapseState == 'expanded') {
60 columns[0] = '0';
61 Element.writeAttribute(frameSet, 'cols', columns.join(','));
62
63 $('toggle-tree').removeClassName('expanded');
64 $('toggle-tree').addClassName('collapsed');
65 collapseState = 'collapsed';
66 } else {
67 Element.writeAttribute(frameSet, 'cols', origColumns);
68
69 $('toggle-tree').removeClassName('collapsed');
70 $('toggle-tree').addClassName('expanded');
71 collapseState = 'expanded';
72 }
73 }
74
75 function resizeBorder() {
76 var documentHeight = document.viewport.getHeight();
77
78 $('toggle-tree').setStyle({
79 height: documentHeight + 'px'
80 });
81 }
82
83 /*]]>*/
84 </script>
85 </head>
86 <body>
87 <div id="toggle-tree" class="expanded">&nbsp;</div>
88 </body>
89 </html>