Menu
I am having a problem in displaying a iframe on a page.
I have a top frame that displays a logo along the top (which is fine) I have a menu down the left side of the page. (which I am having a problem with) I have a frame to the right of the menu that will display my page.
My index.htm page is loading all the frames and looks like this:
<script language="javascript">
function win_resize()
{
var _docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight;
document.getElementById('leftMenu').height = _docHeight - 90;
}
</script>
<body onresize="win_resize()">
<!-- Header -->
<div id="header">
<div>
<img src="logo.png">
</div>
</div>
<!-- Left Menu -->
<div id="left-sidebar" >
<iframe id="leftMenu" src="menu.htm" STYLE="top:72px; left:0px; position:absolute;" NAME="menu" width="270px" frameborder="0"></iframe>
</div>
<!-- Main Page -->
<div id="content">
<iframe src="users1.htm" STYLE="top:72px" NAME="AccessPage" width="100%" height="100%" frameborder="0"></iframe>
</div>
</body>
My menu.htm page has the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<link rel="stylesheet" type="text/css" href="_styles.css" media="screen">
</head>
<body>
<ol class="tree">
<li>
<li class="file"><a href="file1.htm">File 1</a></li>
<li class="file"><a href="file2.htm">File 2</a></li>
<li class="file"><a href="file3.htm">File 3</a></li>
<li class="file"><a href="file4.htm">File 4</a></li>
<li class="file"><a href="file5.htm">File 5</a></li>
</li>
<li>
<label for="folder2">My Test 1</label> <input type="checkbox" id="folder2" />
<ol>
<li class="file"><a href="status.htm">Settings</a></li>
<li>
<label for="subfolder2">test1</label> <input type="checkbox" id="subfolder2" />
<ol>
<li class="file"><a href="">file1</a></li>
<li class="file"><a href="">file2</a></li>
<li class="file"><a href="">file3</a></li>
<li class="file"><a href="">file4</a></li>
<li class="file"><a href="">file5</a></li>
<li class="file"><a href="">file6</a></li>
</ol>
</li>
<li>
<label for="subfolder2">test2</label> <input type="checkbox" id="subfolder2" />
<ol>
<li class="file"><a href="">file1</a></li>
<li class="file"><a href="">file2</a></li>
<li class="file"><a href="">file3</a></li>
<li class="file"><a href="">file4</a></li>
<li class="file"><a href="">file5</a></li>
<li class="file"><a href="">file6</a></li>
</ol>
</li>
<li>
<label for="subfolder2">test3</label> <input type="checkbox" id="subfolder2" />
<ol>
<li class="file"><a href="">file1</a></li>
<li class="file"><a href="">file2</a></li>
<li class="file"><a href="">file3</a></li>
<li class="file"><a href="">file4</a></li>
<li class="file"><a href="">file5</a></li>
<li class="file"><a href="">file6</a></li>
</ol>
</li>
</li>
<li>
<label for="folder2">My Test 2</label> <input type="checkbox" id="folder2" />
<ol>
<li class="file"><a href="status.htm">Settings</a></li>
<li>
<label for="subfolder2">test1</label> <input type="checkbox" id="subfolder2" />
<ol>
<li class="file"><a href="">file1</a></li>
<li class="file"><a href="">file2</a></li>
<li class="file"><a href="">file3</a></li>
<li class="file"><a href="">file4</a></li>
<li class="file"><a href="">file5</a></li>
<li class="file"><a href="">file6</a></li>
</ol>
</li>
<li>
<label for="subfolder2">test2</label> <input type="checkbox" id="subfolder2" />
<ol>
<li class="file"><a href="">file1</a></li>
<li class="file"><a href="">file2</a></li>
<li class="file"><a href="">file3</a></li>
<li class="file"><a href="">file4</a></li>
<li class="file"><a href="">file5</a></li>
<li class="file"><a href="">file6</a></li>
</ol>
</li>
<li>
<label for="subfolder2">test3</label> <input type="checkbox" id="subfolder2" />
<ol>
<li class="file"><a href="">file1</a></li>
<li class="file"><a href="">file2</a></li>
<li class="file"><a href="">file3</a></li>
<li class="file"><a href="">file4</a></li>
<li class="file"><a href="">file5</a></li>
<li class="file"><a href="">file6</a></li>
</ol>
</li>
</li>
</body>
</html>
My _styles.css file has the following:
/* Just some base styles not needed for example to function */
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
body, form, ul, li, p, h1, h2, h3, h4, h5
{
margin: 0;
padding: 0;
}
body { background-color: #606061; color: #ffffff; margin: 0; }
img { border: none; }
p
{
font-size: 1em;
margin: 0 0 1em 0;
}
html { font-size: 100%; /* IE hack */ }
body { font-size: 1em; /* Sets base font size to 16px */ }
table { font-size: 100%; /* IE hack */ }
input, select, textarea, th, td { font-size: 1em; }
/* CSS Tree menu styles */
ol.tree
{
padding: 0 0 0 30px;
width: 300px;
}
li
{
position: relative;
margin-left: -15px;
list-style: none;
}
li.file
{
margin-left: -1px !important;
}
li.file a
{
background: url(document.png) 0 0 no-repeat;
color: #fff;
padding-left: 21px;
text-decoration: none;
display: block;
}
li.file a[href *= '.pdf'] { background: url(document.png) 0 0 no-repeat; }
li.file a[href *= '.html'] { background: url(document.png) 0 0 no-repeat; }
li.file a[href $= '.css'] { background: url(document.png) 0 0 no-repeat; }
li.file a[href $= '.js'] { background: url(document.png) 0 0 no-repeat; }
li input
{
position: absolute;
left: 0;
margin-left: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
height: 1em;
width: 1em;
top: 0;
}
li input + ol
{
background: url(toggle-small-expand.png) 40px 0 no-repeat;
margin: -0.938em 0 0 -44px; /* 15px */
height: 1em;
}
li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
li label
{
background: url(folder-horizontal.png) 15px 1px no-repeat;
cursor: pointer;
display: block;
padding-left: 37px;
}
li input:checked + ol
{
background: url(toggle-small.png) 40px 5px no-repeat;
margin: -1.25em 0 0 -44px; /* 20px */
padding: 1.563em 0 0 80px;
height: auto;
}
li input:checked + ol > li { display: block; margin: 0 0 0.125em; /* 2px */}
li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }
The page seems to show correctly except that the menu on the left shows a checkbox where it shouldn't and shold be releaced with the + or - icons.
If I open my menu.htm by it's self it shows correctly
however when I view my index.htm page (which loads the menu in the iframe) it doesn't show the menu correctly as shown below:
however, as soon as I add the following code it shows the menu correctly:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
however, it doesn't show my document height correctly using my win_resize function.
I am guessing that the last bit of code is stopping my document height code from displaying the correct height.
I need that function so it can display my menu frame correctly on the page.
Does anyone know where I have gone wrong, as it works fine by it's self but soon as I call it from a iframe it doesn't display correctly?
An I using the correct code in my function to get the documents height in full or is there a CSS I can use to get the documents height?
947
Hope you are ready for a long answer :) There are a bunch of question I have as to why you would approach things the way you are but will take this as constraints for the project you are working on. /cough/ why no jQuery or similar? /cough/
First your iFrame height issue: I simply changed your code to incorporate a tested cross browser height detection function as follows
<script language="javascript">
function win_resize()
{
var _docHeight = getDocHeight();
document.getElementById('leftMenu').height = _docHeight - 90;
}
//This fixes your calculation of height issue
//Cross browser doc height calculator **Credit to http://james.padolsey.com**
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
</script>
I also added a onload and onresize call to this function so you get initialised at the correct height and also re-sized to the correct height...
<body onload="win_resize()" onresize="win_resize()">
Secondly your pseudo "checked" class will not work in ie8 or below - which I assume you are trying to support as I only got your visible checkbox error in ie.
To remedy this issue I added some basic script to toggle a class name onto the selected input...
<script type="text/javascript">
function getCheckedState(e){
var inputId = e.id;
var getCheckedState = document.getElementById(inputId).checked;
if (getCheckedState == true) {
/*if checked add class*/
e.className += " " + 'checked';
} else {
/*if not checked set class to empty string*/
e.className = "";
}
}
</script>
You will also need to add the .checked class to the relevant styles in your css e.g.
li input:checked + ol, li input.checked + ol
Thirdly, those pesky visible checkboxes This was the easy bit, just add opacity and ie opacity filter to your css on the inputs.
li input {
cursor:pointer;
...
opacity: 0;
filter:alpha(opacity=0);
}
Finally - perhaps most importantly
I would seriously question lots about this build and how this nav works. There are surely alternative methods you could use that use native html elements and cross browser tested JS libraries like jQuery to get better compatibility. Not to mention better construction methods over iFrames!
Again that said - I am assuming you are simply constrained here.
One other thing I feel I should point out - is the "onclick" function I use to trigger the change in input state is a deliberate choice again for ie Compatibilty - the "onchange" functionality is supported but doesn't update until loss of onblur of that input leaving it out of sync (for more info onchange checkbox test page)
I hope this answer helps you out even if just one portion of it gets you in the right direction.
167
Use a reset css file. http://meyerweb.com/eric/tools/css/reset/
Guess it will help you.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
