I have a page in which navbar(header) is constant while the scroll bar moves and the background moves along with the scroll bar. At the same time text inside body is hidden below the navbar. Background is mon for both navbar and text. What i want to do is, i want to shift the text inside "static-container" to an iframe. Is it possible to work with the scroll bar of iframe and main page simultaneously? In the fiddle i posted there is vertical scrollbar only for text applied. Can i get it for whole page(single scroll bar)?

JSFIDDLE

//code $(document).ready(function() {
    $(".content").scroll(function() {
       $("body").css("background-position", "0 -" + $(this).scrollTop() + "px");
    }); });

I have a page in which navbar(header) is constant while the scroll bar moves and the background moves along with the scroll bar. At the same time text inside body is hidden below the navbar. Background is mon for both navbar and text. What i want to do is, i want to shift the text inside "static-container" to an iframe. Is it possible to work with the scroll bar of iframe and main page simultaneously? In the fiddle i posted there is vertical scrollbar only for text applied. Can i get it for whole page(single scroll bar)?

JSFIDDLE

//code $(document).ready(function() {
    $(".content").scroll(function() {
       $("body").css("background-position", "0 -" + $(this).scrollTop() + "px");
    }); });

• javascript
• jquery
• css
• html

2 Answers 2

I do not know exactly what you need, but I have a clue. If I'm correct you want to change the div static-container into an iframe. Some much for the simple part. If I'm still correct, If the content of the iframe scrolls, it should actually scroll the main page?

There a one or two ways to do this:

1. You need to know the content height of the page that was loaded into the iframe and adjust the iframe correspondently.
2. Fill up the iframe inside the content div.
3. Hide the scroll bar in the iframe, but detect scroll somehow. However this will be a daunting task and the road to this will be full of potholes.

I'm going to provide a solution for option 1 and 2.

first restyle your div to iframe.

//HTML
    <iframe onload="detectIframeCompletion()" src="/" id="static_container" class="static-container" frameborder=0 seamless="true" sandbox="allow-same-origin" style="width:100%;height:auto">

seamless allows the iFrame to have a transparent background, flows with the document. sandbox so you can use pages from the same trusted source. Remember you can't do cross-domain calls. It will result in an access denied.

FOR OPTION 1

Second you need coding to detect when the page has pleted loading.

function detectIframeCompletion()
{
    var elementIframe = document.getElementById("static_container");
    //Now access the iframe document via: contentDocument > documentElement (HTML-tag) > scrollHeight
    document.getElementById("static_container").style.height = elementIframe.contentDocument.documentElement.scrollHeight + "px";

}

Furthermore I really need to stress out that this solution only works with static content. When the content of the iframe's page is changed, the height of the iframe needs to be adjusted equally.

FOR OPTION 2

Please ignore all JavaScript from option 1. Just add this CSS to your CSS.

.content {
    top:65px;
    overflow: hidden;
    bottom: 0px;
    width: 100%;
    position: fixed;
}

.content > iframe {
    height: 100%;
    width : 100%;
}    

This will add only a scroll bar to the iframe, when the content of the iframe overflows.

Conclusion

Use option 1 when you need to add content below the iframe and you want just one scrollbar. Use option 2 when all the content is loaded into the iframe.

Most important lessons from this answer:

• Seamless (or legacy allowtransparency) to make the iframe flow with the document
• Use sandbox to enable content (from same source) to be accessed.
• When defining CSS variables in HTML5 (CSS or via JavaScript) always add the unit. I.e. px.

SIDE NOTE: only HTML5 enabled browsers will be able to do this correctly. For the majors: IE9+, Firefox and Chrome.

You just need to make your iFrame Auto Resizing . for that you can use this JQuery plugin to get dynamically resize iframes based on content height.

1. download it from here

2. Include jQuery library and jQuery iframe Auto Height on the web page

<script src="http://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.iframe-auto-height.plugin.js"></script>

3. Create a iFrame, and make scrolling=no

<iframe src="photo.html" class="photo" scrolling="no" frameborder="0"></iframe>

4. Call the plugin and then done

<script>
  $('iframe.photo').iframeAutoHeight({
  minHeight: 240, // Sets the iframe height to this value if the calculated value is less
  heightOffset: 50 // Optionally add some buffer to the bottom
  });
</script>

As found on https://www.jqueryscript/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iframe-Auto-Height.html