CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Ryan
Ryan

Reputation: 747

Dynamically Changing iFrame Height Based On Content Won't Work

Ok, I am quite aware of the fact that there are a few questions on here regarding changing an iFrames' height based on the content inside it, but nothing seems to work. I have tried just about everything, but nothing seems to work, and I need help quick. Thanks for any help in advance.

Sorry for code not being very neat

CODE HERE

body {
    width: 100vw;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    background-color: #E1E1E1;
}

@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

h1 {
    margin: 0px;
}

#hBody {
    width: 100vw;
    height: 100vh;
    //overflow: hidden;
}

#hubContain {
    width: 85%;
    margin: auto;
    min-height: 100%;
    position: relative;
    box-sizing: border-box;
}

#navBarDiv {
    width: 100%;
    height: 15%;
    min-width: 950px;
    left: 0;
    top: 0;
    float: left;
    position: relative;
    box-sizing: border-box;
    padding: 0px;
    display: block;
    margin: auto;
    z-index: 2;
    text-align: center;
}

#navHead {
    text-align: left;
    font-size: 50px;
    font-family: Abadi MT Condensed Extra Bold;
    font-weight: bold;
    padding: 2px 0px 2px 0px;
}

#mainC {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    /*height: -webkit-calc(100% - 15% - 32px);
    height: -moz-calc(100% - 15% - 32px);*/
    float: left;
    top: 0;
}

#mainC iframe {
    width: 100%;
    //height: 100%;
    border: none;
    padding: 0px;
}

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    //display: block;
    background-color: #EFEFEF;
    position: relative;
    border-radius: 3px;
    box-shadow: 8px 5px 10px #CCCCCC;
}

ul li {
    display: inline-block;
}

ul li a {
    padding: 16px;
    display: block;
    margin: 0px;
    font-size: 18px;
    font-family: pt sans;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 2px;
}

ul ul {
    display: none;
    top: 100%;
    padding: 0px;
    margin: 0px;
    z-index: 1000;
    position: absolute;
    background-color: #D5D5D5;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

ul ul li {
    display: block;
}

ul ul li:nth-last-child(1) {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

iframe {
    z-index: 1;
    padding: 0px;
    margin: 0px;
}

/*
* {
    outline: 2px solid blue;
    //animation: spin 2s infinite linear;
}
*/
<!DOCTYPE html>
<html>
    <head>
        <title>
            TBD
        </title>
        <link rel="stylesheet" type="text/css" href="style.css">
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript">
            function changeFrameSize() {
                var iframe = document.getElementById("mainFrame");
                var frameHeight = getComputedStyle(iframe.contentDocument.body);
                var heightChange = parseFloat(frameHeight.scrollHeight);
                iframe.style.height = heightChange;
                console.log(iframe.style.height);
            };

            function checkKey(e) {
                var key = e.keyCode;
                if(key === 85) {
                    changeFrameSize();
                };
            };

            window.addEventListener("keydown", checkKey);

            $(document).ready(function() {

                $("html, body").animate({scrollTop: '0px'}, 0);
            
                $("#dropdownLi").mouseenter(function() {
                    $("li ul").stop().slideDown();
                });
                
                $("#dropdownLi").mouseleave(function() {
                    $("li ul").stop().slideUp();
                });
                
                $("#firstUl > li").mouseenter(function() {
                    $(this).stop().animate({
                        backgroundColor: "#D4D1D1"
                    }, 250);
                });
                
                $("#firstUl > li").mouseleave(function() {
                    $(this).stop().animate({
                        backgroundColor: "#EFEFEF"
                    }, 250);
                });
                
                $("#dropdownLi ul li").mouseenter(function() {
                    $(this).stop().animate({
                        backgroundColor: "#A9A9A9"
                    }, 250);
                });
                
                $("#dropdownLi ul li").mouseleave(function() {
                    $(this).stop().animate({
                        backgroundColor: "#D5D5D5"
                    }, 250);
                });
            });
        </script>
    </head>
    <body id="hBody">
        <div id="hubContain">
            <div id="navBarDiv">
                <div id="navbar">
                    <h1 id="navHead">
                        TBD
                    </h1>
                    <ul id="firstUl">
                        <li>
                            <a href="index.html" target="mainFrame">Home</a>
                        </li>
                        <li>
                            <a href="bInfo.html" target="mainFrame">Background Information</a>
                        </li>
                        <li>
                            <a href="contact.html" target="mainFrame">Contact</a>
                        </li>
                        <li>
                            <a href="tprocess.html" target="mainFrame">Thought Process</a>
                        </li>
                        <li id="dropdownLi">
                            <a href="#">Layouts</a>
                            <ul>
                                <li>
                                    <a href="lpages.html" target="mainFrame">Landing Pages</a>
                                </li>
                                <li>
                                    <a href="mlayouts" target="mainFrame">Main Layouts</a>
                                </li>
                                <li>
                                    <a href="tTenLayouts.html" target="mainFrame">Top 10 Layouts</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="mainC">
                <iframe src="index.html" id="mainFrame" name="mainFrame"></iframe>
            </div>
            <div id="footerC">
            
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 486

Answers (1)

milton cedeno
milton cedeno

Reputation: 58

I used this code they in DynamicDrive.com provide, here's the link: http://dynamicdrive.com/dynamicindex17/iframessi2.htm I used it in my site for a long time and it worked just fine. It is very easy to set it up.

It does not use JQuery but just js, it doesn't work in Opera browser I understand and also it does not work if the content to load on the iframe is from other domain.

The js is not long rather short so you can study it if you want, although you don't need to understand it to use it or to set it up.

Upvotes: 1

Related Questions