i use davidjbradshaw/iframe-resizer to resize an iframe, everything is ok with CORS but i face a problem, when i resize the window from fullscreen the iframe height gets a different content height which is ok, but when i return back to fullscreen "heightCalculationMethod: 'documentElementScroll'", document content scrollheight uses the height of previous window which the content has bigger height and creates a space, that space is part of the iframe, eg. the iframe height is 900px, but the iframe content height is 800px, which is repsonsive and what i want!
Thanks in advance!
$('iframe').iFrameResize({
autoResize: true,
checkOrigin: false,
heightCalculationMethod: 'documentElementScroll',
sizeHeight: true,
log: true
});
Changed iframe content's body height from 100% to auto and fixed it.
Related
I am trying to make THIS GRID responsive vertically.
Horizontally it is responsive, takes full width. But if the page is long, image grid doesn't take full height.
Any suggestions?
Please see attached the screen-shot of current result.Screenshot
You need to do it through JavaScript and resize the element to cover the window height, so use this function to retrieve the height and set that to your div height dynamically:
$(window).height(); // returns height of browser viewport
In case you need more information
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
this is basically for a header of a page, the client wants to fill the header so that it fills the viewport completely, but when you shrink the page down vertically, they want the padding above and below the content to remain the same and stop shrinking the header, basically a minimum height of the content + the padding.
I thought this will be simple but I'm stuck, I've tried everything I can think of:
Demo: https://jsfiddle.net/suunyz3e/858/
With my demo, if you resize the window, the content shouldn't exceed the 'red' background of it's parent.
I've tried flex-noshrink layout-fill min-height:100%.
I'm sure this is possible but I can't seem to figure it out
I want to show a top bar on my page with height 72 pixels height and then load an iframe beneath which fills the full page (minus height of the topbar).
Before I can even start to take my topbar into account...somehow my iframe ignores any height attribute I set to it:
width='100%' height='1200' style='overflow:hidden;height:100%;width:100%'
or
width='100%' height='100%' style='overflow:hidden;height:100%;width:100%'
I have been reading this post: Full-screen iframe with a height of 100%
But no luck. See it live here: http://www.trouwlocaties.com/extpage.aspx?id=315&t=1
Try the first removing height:100% from the style, now the iframe should be 1200px of height.
Live Site
I have a site using jmpress, and I'm having a hard time getting scrolling on my content. I'm able to scroll in Chrome by simply selecting text on the page and dragging down, but I'd like to achieve this in all browsers with native scroll, perhaps emulated by javascript. I've checked a number of plugins to do this like jScrollpane and tinyScrollbar, but none of them will work without a height set and overflow-y set to scroll. The second problem: even when I set the overflow-y to scroll, scrolling does not occur with the mousewheel.
Try this in the console: $(".step").jScrollPane();. Nothing happens. Set each step to have a height of 800px and overflow-y scroll, and scrolling works, but still this is only relative to the height of the window. I need some way of calculating the size of the surrounding elements (relatively positioned) so that the height can be calculated when the user resizes the screen.
So is it possible to achieve scrolling on an absolutely positioned element (slide) and keep the height as auto using jmpress?
You could use the window resize event of jquery to set your height dynamically after you set the height you could call the update method of tinyscrollbar to update the scrollbar.
When I set a width of a <div> that wraps all page by 100%, whenever I resize the window the <div> resizes as well.
What I want to achieve is, for whatever browser and screen you open the page, I want the div to have the widh of the 100% of the full window and stay it as it was set, so that when you resize the window, the div size will still be the same.
Is it possible?
You can do this using jQuery as:
winW = $(window).width();
$('#container').css('width', winW);
You should set the width to be 100% in your css, and then use a JavaScript onLoad function to override it to pixels. Your users should not notice it.
You can find many examples of the JavaScript code.
Use jQuery's onload to retrieve the calculated width after loading, then set it as the div's defined width:
$(function() {
var width = $("#mydiv").width();
$("#mydiv").width(width);
});