How to scroll iframe and parent page same time? - javascript

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 common 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 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:
You need to know the content height of the page that was loaded into the iframe and adjust the iframe correspondently.
Fill up the iframe inside the content div.
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 completed 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.com/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.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iframe-Auto-Height.html

Related

iframe height not increasing automatically when clicking on show hide button in iframe content page

i frame height is not automatically increase or decrease when clicking show hide button in i frame content page. how can i solve this issue?
<iframe class="" id="ds" seamless="" src="demo.aspx" style="width:100%; border:none; height:100%;"></iframe>
$("#ds").load(function () {
$(this).height($(this).contents().find("html").height());
});
This is a very common issue:
You need to have control of both the servers i.e. the server from which iframe is loaded and the one in which iframe is present.
You cannot set iframe height as it is a cross domain issur=e and so it does not allow change in its height (see your console whiile loadind page it will show the error)
You need to work around using post messeage: refer https://css-tricks.com/cross-domain-iframe-resizing/
play around with post message and you will be able to set height of the iframe then
Thanks

Vertically Scrolling in Window 8 store app

I am developing a windows 8 store app using HTML5 and Javascript. And I want to scroll some div content vertically. I am using following inline css to do so
<div style="height:100%;overflow-y:scroll;">
//Content
</div>
But Its only showing scrolling bar and i am not able to scroll the content.
This is how i am getting my scrolling bar, as you can see last input box is showing half and i cant scroll it.
I think i found a quick solution for this problem. Instead of giving height as 100%. Just give height in pixels that will cover your current window till bottom.
For example:
If your screen height is 780px, and you have 80px height covered by header. So if you want to use scrolling in remaining 700px. Use following code :-
<div style="height:700px;overflow-y:scroll;">
//Content
</div>
Hope it ll work for you as well. But Stil looking for alternate solution , if there is any.
In general, this is not a Windows Universal App problem, but simply an HTML/javascript one. By default, browsers scroll the body content that exceeds the browser window, but in the UWP JS app, no scrolling is provided by default. So, to make the content scrollable, you do need to provide a height, but the height may be dynamic. Using javascript, you can set the height more appropriately based on the user's screen size.
Basically, in the main javascript file, you can set the height of the scrollable region.
body {
overflow-y: scroll;
}
function setElementToRemainingWindowHeight(selector, usedHeight) {
$(selector).height($(window).innerHeight() - usedHeight);
}
function calculateUsedHeight() {
return $('.header').innerHeight() + $('footer').innerHeight();
}
$(function(){
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
window.resize(function() {
setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
});
});
You can move the code to respond to whatever event in your app that would cause the scrollable area to change (maybe things are entering and exiting the surrounding layout, or whatever).
Depending on when the items in the list are added, and how that adding occurs, your requirements may change. See this post (which I wrote) about how to do this more dynamically...

Need to get height attribute value from an ifram and set parent element to contain it

I'm going to be receiving some dynamically generated iframe content at a later date and trying to create a template that will comfortably fit the iframe no matter what height. So I want to write a jquery script that reads the value of the height attribute in the iframe so I can set the parent element to a corresponding size.
What I'm not sure how to do is access the height attribute in the iframe ... I'm assuming the easiest thing to do is run the script from the parent element to get the iframe height and then set it's own height . I also expect the iframes to be same domain so that won't be a problem.
<div class="parent_element" style="">
<!-- .parent_element {height: } should be set to 400px -->
<iframe src="" height="400"></iframe>
</div
Can anyone point me in the right direction? Thanks.
$("#parent_element").height($("iframe").height());
or:
$("#parent_element").height($("iframe").attr("height"));
When the iframe src loads, resize the iframe height to match document (plus a little for scroll bars).
$(document).ready( function () {
$('iframe').load( function() {
//console.log($(this).contents().height() + ' is the height');
$(this).height($(this).contents().height() + 25); // add some to the height to allow for horizontal scroll bars
});
});

load external site into div

How can I load an external site onto another site? (load the entire page without scroll, borders)
I tried this but it does not load the entire page, and there are scroll/borders?)
<!DOCTYPE HTML>
<html>
<body>
<iframe src="http://www.externaldomain.com" name="iframeName" ></iframe>
</body>
</html>
EDIT: seamless, what does this do? http://www.w3schools.com/html5/tag_iframe.asp
You have to remove the borders using CSS and then expanding the iFrame to encompass your entire client site using JavaScript. In this way, no one will notice a thing.
But sometimes the host site is clever enough to avoid that by checking the window.top against window.self element.
Like #Milad said, you can set the IFRAME dimensions to fill the browser window.
<iframe id="my-iframe" src="mypage.php" border="0" frameborder="0" scrolling></iframe>
An example using jQuery:
$('#my-iframe').css('height', $(window).height());
Don't forget to reset the page's margins and paddings with CSS to avoid unwanted spaces:
* { margin: 0; padding: 0; }
Becareful if you have more elements on the same page, like a heading bar. If so, subtract the window height by the others elements heights.

JavaScript - Is it possible to get height from div in separate page?

I'm wondering, is it possible to collect the height of a specific div container from a separate page with JavaScript? I'm using jQuery btw and I'm in need of comparing heights of div containers.
Edit: To clarify a bit more, I load content from a specific div in a separate page using jQuery. This content is faded into a different container with dynamic height. But in the small fraction of time before the content arrives, it shrinks down to it's min-height.
What I've done so far is collecting the height of the container before and after the load. But it only works after I've loaded content once. Because I don't have the height before it's been loaded the first time.
If the relationship between the pages is opener and [popup|child] window, then yes.
If not, you are going to run into a security wall. (unrelated pages should not have access to each other)
So, if the "other" page is a popup window that your page launched, or a child iframe that your page "launched", then yes.
I would use the jQuery .height() method to obtain the height, but how you get the object is up to you (depends on what attribute info you have etc.)
//get from popup
var otherDiv = popupWinRef.document.getElementbyId('id');
//get from iframe
var otherDiv = window.frames[frameIdOrIndex].document.getElementById('id');
alert($(otherDiv).height());
Well, you can't get it until AFTER it's loaded via jQuery. Then you need to make sure you're not having a conflict between two divs with the same ID.
From your comments it sounds like you are using ajax to load content from another page, you'll likely have the load div hidden... So I would position the loading div absolutely out of the viewport but not hidden. then get the height of your desired div but make sure you access it using the loading div and your desired div... something like this:
#divToLoadContent { position: absolute; left: -99999em; top: 0; } /* don't hide this div */
Script
var height = $('#divToLoadContent #myDesiredDiv').height();

Categories