0byt3m1n1

Path: /data/applications/aps/typo3/4.5.5-0/standard/htdocs/typo3/ [ Home ]
File: border.html
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Border between Navigation and List frame in TYPO3</title>

		<style type="text/css">
			/*<![CDATA[*/

			body {
				background-color: #dadada;
			}

			#toggle-tree {
				height: 500px;
				cursor: pointer;
				border-right: 1px solid #c2c2c2;
			}

			.collapsed {
				background-image: url("gfx/border_expand.gif");
				background-repeat: no-repeat;
				background-position: 1px 250px;
			}

			.expanded {
				background-image: url("gfx/border_collapse.gif");
				background-repeat: no-repeat;
				background-position: 0px 250px;
				border-left: 1px solid #c2c2c2;
			}

			/*]]>*/
		</style>

		<script type="text/javascript" src="contrib/prototype/prototype.js"></script>
		<script type="text/javascript">
			/*<![CDATA[*/

				var origColumns = 0;
				var frameSet = null;
				var collapseState = 'expanded';

				Event.observe(document, 'dom:loaded', function() {
					$('toggle-tree').observe('click', toggleTree);

					frameSet = parent.document.body;
					origColumns = Element.readAttribute(frameSet, 'cols');
				});

				Event.observe(window, 'load', resizeBorder);
				Event.observe(window, 'resize', resizeBorder);

				function toggleTree() {
					var columns = origColumns.split(',');

					if(collapseState == 'expanded') {
						columns[0] = '0';
						Element.writeAttribute(frameSet, 'cols', columns.join(','));

						$('toggle-tree').removeClassName('expanded');
						$('toggle-tree').addClassName('collapsed');
						collapseState = 'collapsed';
					} else {
						Element.writeAttribute(frameSet, 'cols', origColumns);

						$('toggle-tree').removeClassName('collapsed');
						$('toggle-tree').addClassName('expanded');
						collapseState = 'expanded';
					}
				}

				function resizeBorder() {
					var documentHeight = document.viewport.getHeight();

					$('toggle-tree').setStyle({
						height: documentHeight + 'px'
					});
				}

			/*]]>*/
		</script>
	</head>
	<body>
		<div id="toggle-tree" class="expanded">&nbsp;</div>
	</body>
</html>