We have a site built with Angular/bootstrap.
This site should be configured inside of an Iframe of another domain.
my doubt is Should i write a resize script to properly scroll inside iFrame or since my app is designed using Bootstrap will it auomatically behave responsive according to parent domain iFrame size.
Bootstrap will take care of the responsiveness itself, but the only condition is, you follow the row and column structure properly.
It depends whether you want the iframe to be a fixed height and have a vertical scrollbar or if you want the iframe to have a height that changes dynamically with your embedded page.
If it's the former you don't need to do anything, Bootstrap has the widths covered.
If you want the iframe height to change depending on the height of your embedded page (which will change with the responsive design), you need JS to resize the iframe.
For example
var iframeResize = function() {
var iFrameID = document.getElementById('myIframe');
if(iFrameID) {
iFrameID.height = iFrameID.contentWindow.document.body.offsetHeight + "px";
}
}
$(function() {
$(window).resize(iframeResize);
});
Related
I'm using a simple JavaScript code to resize an iframe based on the content being loaded (it's all in domain). However i'm getting the situation where; when the iframe resizes for a page with a lot of content that requires scrolling on the source page but then when you go to a page with much less content, the source page remains at the same height so has a lot of horrible empty scrollable space below the content and i can't seem to stop this happening.
Is there additional code to make sure the source page resizes with the iframe?
JavaScript
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
obj.style.width = obj.contentWindow.document.body.scrollWidth + 'px';
}
You have a couple of options.
Use offsetHeight instead of scrollHeight.
Reduce the height down to 1px at the start of you resize function, so it can 'grow' to the new smaller size.
Both options have downsides. Option one won't include any margin on your body, so best to set it to 8px and then add 16px to the height. Option two creates a little flicker.
I have a page with an iframe that displays an image and comments. I don't want anyone to be required to click in the iframe and scroll to see all the content. I've set the height of the iframe to 2500px in hopes that I would only have to scroll the parent frame to view all the content. This isn't working though, it just cuts off at the bottom of the window, forcing me to click inside the iframe and scroll to view everything.
in short, I want to view all content within iframe, without having to click inside the iframe to scroll inside it. any way to do this with css or js?
Is the iframe on the same domain?
It is not a good idea to give a pixel size to a variable size iframe.
This is a solution for a dynamic size:
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
and on you iframe in the html:
<iframe onload="resizeIframe(this)" ...
I'm working on a rather full-on site using jQuery (if the solution is not using jQuery, that is also fine).
The website is built using sections that resize to the height of the window using:
$(window).resize(function() {
$("section").height($(window).height())
}).resize()
This part is working brilliantly. I have disabled scrolling by taking the overflow off the body and html elements and the user can travel through the site using relative links (with localScroll).
My issue is that once the user has travelled to a section and then resizes the window, the body is no longer in line with the top of the section.
Is there a way to make the window stick to the top of an element no matter what?
Take note of which section is current. When the window resizes, you can then set the window's scroll top to the top of that section. For example:
var currentSection = $('section:eq(0)');
var jqWindow = $(window).resize(function() {
$('section').height(jqWindow.height());
jqWindow.scrollTop(currentSection.offset().top);
});
Problem description: I got a page with a table containing text and thumbnails. Usually the table contains more entries than would fit on the screen leading to a scrollbar on the right side. No Problem so far. When loading the page or choosing the next page of the table (pagination) the table gets rendered - the scrollbar is at the bottom of the page where i would like it to be after complete load. Then the thumbnails are getting shown. Due to the fact that they are a bit bigger in size than the text in the table the table gets bigger in heigth leading to the scrollbar being set somewhere in the middle of the page.
Page and table after the images have been loaded, as you can see the scrollbar is somewhere in the middle (vertical) of the page:
I do not want to fiddle around with the thumbnail size. Customers are used to the actual design and image/icon sizes.
Usign the pagination function the table is the only element that gets replaced ont he page. "onload" on tables does not work unfortunatly.
What can i do to have the scrollbar appear after the images have been loaded (leading to the correct placement of the scrollbar)?
Is there a way to set the scrollbar to the bottom of the page after the table has been fully loaded?
There are jQuery plugins to wait for all images to be loaded, but I couldn't get them working on the quick, maybe you can: here and here.
However, you also could use the following hack: watch for the table height and if it changes, scroll to the bottom:
var lastHeight;
function watchTable(){
var currentHeight = $('#myTable').height();
if(currentHeight !== lastHeight){
lastHeight = currentHeight;
$('#myDiv').scrollTop(currentHeight);
}
}
setInterval(watchTable, 100);
see my demo fiddle for a working example.
The best practice is to set the widths of thumbnails in HTML or CSS, if all the thumbnails are of the same size, you can just add the style like
.thumbnail {
width: 150px;
height: 100px;
}
Or, if they size can vary, you must add width and height attributes to the ` tag.
Another solution is to:
Look at the document's scrolltop on DOMload, and look if it's at the bottom, then on onload event (which would be fired when all the images loaded) check again and if scroll to the desired position if needed.
But I recommend always set the dimensions for images, so the page wouldn't jump when they are loaded.
Edit: If you're loading images dynamically, you can do two things:
Preload images and then insert them with the right dimensions.
Use onload for images, however, you still would need to use the document.createElement('img'), so you could be sure that all the images are loaded.
Anyway, in these cases you should use something like that for each image:
var image = document.createElement('img');
image.onload = function () {
// Image is loaded
};
image.src = 'test.jpg';
Note, that you must set .src after attaching the event, or there could be some problems in Opera.
I have a page with a static header and footer which is displayed throughout the whole pages. I then have an iframe which is displayed between the header and footer. Currently, the iframe has a static height. I would like to adjust the height depending on the height of the inner page, since the iframe contains an application which must be displayed in an outer page.
Therefore, the outer page contains a header and a footer and between these the application (inside an iframe) is displayed. There are a lot of pages in this application and therefore I require to make the iframe to automatically adjust the height.
Apart from the iframe, I also need to adjust the height of the div where the iframe is being placed. Therefore, I have to adjust the height of the iframe itself and of the container div as well upon page change.
How can I achieve this?
Thanks in advance
function resizeContainer() {
var coordCont = getCoordinates($('#myContainer'));
var h = $(window).height() - coordCont.top - 18;
var minH = 800;
$('#myContainer').css({ height: h < minH ? minH : h, overflow: 'auto' });
};
get coordinates is a custom function of mine to get left/top/width/height/zIndex of an element. I also use minH as I don't want the content to be less then let's say 800. The same you can apply for the iFrame