Geek asks and answers

Menu does not display correctly as soon as called from iframe

I am having trouble displaying an iframe on the page.

I have a top frame that displays the logo on top (which is good) I have a menu on the left side of the page. (with which I have a problem) I have a frame to the right of the menu in which my page will be displayed.

My index.htm page loads all 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 */ }

It seems that the page is displayed correctly, except that a checkmark is displayed in the menu on the left where it should not and should be unchecked with + or - characters.

If I open my menu.htm myself, it will display correctly

enter image description here

, index.htm( iframe), , :

enter image description here

, , :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

, win_resize.

, .

, .

- , , , , iframe, ?

, CSS, ?

+5
4

, :) , , , , , . /cough/why no jQuery ?//

iFrame: , -, .

<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>

onload onresize , ...

<body onload="win_resize()" onresize="win_resize()">

-, - ie8 , , , , checkbox, ..

, script ...

<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>

.checked css .

li input:checked + ol, li input.checked + ol

-, , , , css .

li input {
cursor:pointer;
...
opacity: 0;
filter:alpha(opacity=0);
}

- ,

, . , , , , html JS-, jQuery, . iFrames!

- , .

, , - "onclick", , , Compatibilty - "onchange", , onblur , ( onchange checkbox test page)

, , .

+4

, , :

li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }

( )

Try changing the values ​​of the input fields and see if it gives the desired results. I assume the iframe pushes the input value too far to the left when it is added.

0
source

Try to make all your identifiers unique, checkbox 2 change two of them, and you can be fine, because it is very temperamental. The tag for tags is also HTML5, which you should be aware of, unfortunately, not the case.

0
source

More articles:


All Articles