Forum Moderators: not2easy
1.) I can't seem to get the sidebar to display at the top of the page. It must be included in the XHTML after the content.
2.) I am trying to get the content to fill in the missing area of the sidebar when the sidebar is toggled off.
I only care about getting this to work in Firefox at the moment. I've developed a browser patching system for browsers that this and other aspects of my coding aren't adhered to.
I use ".prompt" to turn off elements via their ID. I have considered that I may need to create an additional toggle for the content but I'm not sure at the moment. Here is my current test case...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script type="text/javascript">
//<![CDATA[
function toggle(id, classOne, classTwo)
{
identity=document.getElementById(id);
class_name = identity.className;
if (class_name == classOne) {
identity.className = classTwo;
} else {
identity.className = classOne;
}
}
//]]>
</script>
<style type="text/css">
#body {
background: #456;
}
#content {
background: #abc;
float: left;
margin: 0px 200px 0px 0px;
}
#side {
background: #789;
float: right;
width: 200px;
}
.prompt {
display: none;
}
br.clear {
clear: both;
}
</style>
</head><body>
<div id="body">
<div id="content">
<a href="#" onclick="toggle('side', 'prompt','side');" tabindex="66" title="Secret Hint">Toggle Sidebar</a>
<p>
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
</p>
</div><div id="side">
<p>SIDE stuff goes here</p>
</div><br class="clear" />
</div></body>
</html>
- John
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script type="text/javascript">
//<![CDATA[
function toggle(id, classOne, classTwo)
{
identity=document.getElementById(id);
class_name = identity.className;
if (class_name == classOne) {
identity.className = classTwo;
} else {
identity.className = classOne;
}
}
//]]>
</script>
<style type="text/css">
#body {
background: #456;
}
#content {
background: #abc;
float: left;
margin-right: -200px;
width: 100%;
}
#side {
background: #789;
float: left;
width: 200px;
}
.prompt {
display: none;
}
br.clear {
clear: both;
}
div.liquid {
margin-right: 200px;
}
div.liquidcooled {
margin: 0px;
}</style>
</head><body>
<div id="body">
<div id="content">
<div class="liquid" id="liquid">
<a href="#" onclick="toggle('side', 'prompt','side'); toggle('liquid', 'liquid','liquidcooled'); " tabindex="66" title="Secret Hint">Toggle Sidebar</a>
<p>
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
CONTENT stuff goes here CONTENT stuff goes here
</p>
</div>
</div><div id="side">
<p>
SIDE stuff goes here
SIDE stuff goes here
SIDE stuff goes here
SIDE stuff goes here
SIDE stuff goes here
</p>
</div><br class="clear" />
</div></body>
</html>
