Develop Reference

Responsive iframe containing responsive content

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?

Reserve vertical space for slider image on page load

I'm using Flexslider which calculates the image size based on the parent element width, which makes it responsive because it resizes when you change the browser size.
The problem I'm having is that when I load the page, you see a colapsed slider until the images are loaded which makes it look bad. However, if you go to flexslider site at http://www.woothemes.com/flexslider/ you'll see that it has a loader.
Is there an option in flexslider for automatically behaving this? I couldn't find one.

Try giving
min-height
min-width
using CSS to the div block in which you are having the images so that it might atleast not collapse

In flexslider stylesheet they have give .flexslider a min-height of 280px and used a gif loading image as its background. You should use that. Your problem will be solved.

How do I to get a full screen background video hero?

So I have a site I am working on and I want it to load to a full background video with the title over it. However, I also want to the user to beable to scroll to other full screen sections of a page. How do I get this to work.
Here is a Codepen link
http://codepen.io/anon/pen/rskjF
The about div is the next section I want to make. It is supposed to be(well every section is) 100% height and width. It seems from the look of some sites, you can achieve this with clever positioning.

I've used Syd Lawrence's jquery.videoBG with good success. Just use this example to make your hero div have a video background. Then write the rest of your page below that div.
(Bonus tip: If you don't already know about using 'vh' and 'vw' as CSS units you may want to look into them. Example:.row{height: 100vh;})

iframe with fixed width and DYNAMIC height

Is it possible to use an iframe with a fixed width (.ex. 75%) and a dynamic height? Want I want to achieve is that when the page that is loaded into the iframe, it will not be wider than I have specified, but the lenght needs to be according to the page its content. Is it a page with 5 lines text, the frame will be just big enough to display these 5 lines. Are we loading a large document with 1000 lines, the Iframe height will be automatically adjusted.
Prerequisites:
The url in the frame is on a different domain from the parent.
The code should work on mobile phone browsers too.
Let's try to avoid jQuery if possible. (to make the above faster)

I know you'd like to avoid it, but it really shouldn't slow you down so much that it'd be a burden on your site. I've done far crazier things with jquery and it's handled it like a champ. When talking "dynamic" it's usually a safe bet that you will need to touch some javascript at some point :P
$(selector)[0].scrollHeight
As for making it dynamic? You could setup an interval to adjust the height.
Something like this:
function setHeight(selector){
var contentHeight = $(selector)[0].scrollHeight;
$('#iframe-id').attr('height', contentHeight);
}
Then you either load it on page load or you wrap it in a setInterval.
If it's just the jquery thing and you don't mind javascript, then this site could help you
http://www.mattcutts.com/blog/iframe-height-scrollbar-example/

IFrame height can be manipulated using the page rendering code, or JavaScript...but there is no way for the iframe to dynamically resize based on content.
The link in mplungjan's comment takes you to a really good post about this subject.

Why can't I figure out the width of elements with automatic widths?

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
});