I have a website that has a title, navigation bar, and a paragraph of text, followed by an iframe. I want to set the height of the iframe to the remaining height of the screen and set the iframe width based on this height.
I have a JS function doing it when the website loads, but want to do this using CSS so it is more responsive. This tutorial shows how to do this based on width of the screen. It makes the height 56.25% of the screen width. I want to do something similar but scale the iframe so it is as large as possible without having users scroll down to see the whole iframe.
In my JS function, I have everything not including the iframe wrapped in <div class="header"> and get that height with $('.header').height(). Then I just subtract this from the window height to get the iframe height and calculate the width based on a ratio (i.e. 16/9 for a video). How can this be done in CSS?
I've tried setting the height to 100% and not specifying the width, which was suggested elsewhere. This didn't work. My iframe is essentially embedding another HTML document, not a video.
Related
I have a scrolling issue that might be common but I can't seem to find it. Essentially, I have a scrollable section of a webpage that goes from just below the header to the bottom of the screen. However, to make that section scrollable, I have to set a height which I set as 70vh, while the header is a static height. When the viewport changes height, to a larger screen for example, the 70vh isn't enough to reach the bottom of the screen because it now should proportionally take up more space.
My question is, how do I make it so that the section is always the correct height when the viewport changes size. An idea I had was to find the percentage of the viewport height that the header is taking up and then detract that from 100 variably, but I have no clue how to do that.
I can't add images in my post yet but this is a link to what the section looks like
You can use calc()
.scrollable {
height: calc(100vh - 80px /* Height of your header */);
}
However you will need to do this for each breakpoint on your website, that changes height of your header, and 100vh can sometimes be obstructed by a browser's "elements" like URL bar on mobile etc.
I can resize the iframe using a slider. When the slider is resized the content loaded within the iframe also shrinks or expands. I always want the complete content to be displayed and fit the content to the iframe's dimensions, without scrollbars. For instance in the GIF below, I don't want GitHub to resize but want the full webpage at all times, just scaling as a whole. Like an image
Maybe I need to adjust the transform-scale attribute of the content whenever the iframe's dimensions change, but how would the scale be determined at each width/height?
https://robert.ocallahan.org/2020/11/dom-recording-for-web-application-demos.html ... here you can see that it's possible. But can't seem to replicate
There are many articles out there discussing a clever way in CSS to make videos (such as youtube) delivered through an iframe responsive (such as described here https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/). Ultimately you wrap your iframe in a relative container with a top padding equal to the aspect ratio (height/width * 100)% of the video.
This works great when your aspect ratio of the iframe contents is static, but is there a clever way to achieve this purely through CSS if your iframe content is also responsive?
For example lets say your iframe contents contain a bootstrap grid of boxes (col-xs-12 col-md-3) and you assign 100% width to the iframe so it responds to vertical window resizing of the parent. As you decrease the size of the parent, at the point the col-xs-12 kicks in, the aspect ratio has changed and you are probably going to see a vertical scrollbar appear for the iframe due to the height change.
I think the only way to achieve responsiveness in this case is through javascript (postMessage calls).
Anyone have any thoughts?
I have a twitter bootstrap carousel in which I have images and iframes. Images work perfectly because they have img-responsive class and they resize. The iframes don't work like that. I have to give them a width and a height and change their width and height whenever the user resizes the browser.
The carousel can contains only images, only iframes, or images and iframes in the same time.
How can I make the iframes work like the images? Have the same dimensions, resizes in the same way?
My images are 750 x 427px. The thing that passes my mind is to give the iframes width 100% of the container because this work and after this I have to find the height considering that if the width is for example 300px the height should direct proportional with the image dimensions which are 750 x 427px.
We can simply use the rule of three ? Or there is somehthing more complex using image ratio?
Through .height() and .width methods.
You could use $("#imgID").height() to get its height and $("#imgID").width() to get its width. Of course the imgID is replaced with the actual ID of your image.
I am trying to create a sideways slideshow of images. The panel that will contain the slideshow is exactly 1200px wide. At page load, PHP loads images inside this panel. The number of images is not always the same, and I don't want the slideshow to start unless the collective width of the loaded images exceeds the width of the 1200px container.
The problem is, all the images are of various sizes, everything from 150x100 to 1980x1200. The images are fit into the bar by setting their height to 50 and letting their width rescale automatically.
Now, creating this slideshow panel in any other programming language would be easy. I'm suffering here in javascript though, because I simply can't find ANY WAY of getting the new width of the images. They all read width: 0px using jQuery outerWidth()
I have even tried putting a div wrapper inside the 1200px panel, outside the images, hoping that div would automatically scale around the width of the images and give me their collective width, but instead it reads 1200px (jQuery outerWidth())
Is there any way of measuring their width?
Is there an easier way of doing this?
Any help appreciated
I'm guessing you're trying to get the widths when the document is ready, instead of after the images have loaded.
Try placing the code that gets the outerWidth() in $(window).load().
$(window).load(function() {
//get the image widths
});