Develop Reference

How to remove Iframe scrollbar but full page should load?

After adding Iframe inside contentArea, I am getting two scroll bars. I wanted to hide iframe scrollbar without hiding any content of external website link. How can I do that?
I added the below snippet code and tried couple of things like scrollbar="no" but didn't work.
Help me on this and thank you in advance.
I need contentArea scrollbar. Just wanted to hide iframe scrollbar without hiding external website content.
body{margin:0;padding:0;}
.contentArea{height:100%; width:100%; position:absolute; top:0;left:0;overflow-y:scroll;}
iframe{height:100%; width:100%; position:absolute; top:0;left:0;border:0;}
<div class="contentArea">
<iframe src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
</div>

You need to make the size of the iframe match the size of the content in the iframe. Their is no native way of doing this in the browser, and if your doing this cross-domain then you will need JS code on both the parent and in the iframe.
Here is a much longer answer that I wrote a few years ago on how to do this.
iframe Auto Adjust Height as content changes
Alternatively their is this library that will make things a lot simpler for you.
https://github.com/davidjbradshaw/iframe-resizer

Try this, you will able to hide the scroll bar of iframe but you can still scroll your page
<div style='width: 500px; height: 120px; overflow: hidden;'>
<iframe style='width: 518px; height: 120px;' src=''></iframe>
</div>

You can use overflow:hidden
.contentArea {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: hidden; //This should hide the scrollbar for you
}

This is not entirely possible without controlling the domain where the iframe points. However this is about as close as you can get to what you're looking for and have it reliable.
body {
margin: 0;
padding: 0;
text-align: center;
}
.contentArea {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-basis: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-x: auto;
overflow-y: scroll;
}
.flex-box {
flex-grow: 1;
flex-basis: 0;
overflow: hidden;
/* Set height as percentage of viewport */
min-height: 100%;
}
iframe {
/*
DO not adjust height of iframe here.
set the height on .flex-box
*/
width: calc(100% + 16px);
height: 100%;
margin: 0;
padding: 0;
border: none;
}
.additional-content {
padding: 15px;
background-color: #CDDC39;
}
<div class="contentArea">
<div class="additional-content">Content Before. Remove and iframe will fill this space.
</div>
<div class="flex-box">
<iframe id="myIframe" src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
</div>
<div class="additional-content">
Some content after.<br> Remove and iframe will fill this space. Remove both top and bottom additonal content and the iframe will fill entire window.
</div>
</div>

I used this idea to 'seamlessly' embed a WordPress page into a Magento2 Page, using an iframe... since I really needed the WP template.. and it works.
Added this JS
// stackoverflow.com/questions/1145850/
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
const ifrm = document.getElementById(id);
const doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;
ifrm.style.height = getDocHeight( doc ) + 2 + "px";
}
With this iframe code
<iframe id='wp-twoblock-0'
src='https://www.example.com/wp/twoblock'
onload='setIframeHeight(this.id);'
style='border:0px;vertical-align:bottom;width:100%;overflow:hidden;'
target='_PARENT' marginwidth='0'
marginheight='0' frameborder='0' scrolling='no' ></iframe>
Principally, it works this way:
Loads the iframe content
Runs the setiframeHeight
which then adjusts the iframe height to the proper content height .. with the given CSS and voila!
No iframe content is hidden, no double scrollbars!
Hope it helps! Demo here: https://copy.pc.pl/test.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="">
<meta name="viewport" content="width=, initial-scale=">
<title></title>
<script>
function getDocHeight(doc) {
doc = doc || document;
var body = doc.body,
html = doc.documentElement;
var height = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
return height;
}
function setIframeHeight(id) {
const ifrm = document.getElementById(id);
const doc = ifrm.contentDocument ? ifrm.contentDocument : ifrm.contentWindow.document;
ifrm.style.height = getDocHeight(doc) + 2 + "px";
}
</script>
</head>
<body>
<h1>Parent</h1>
<iframe id='wp-twoblock-0' src='otherdocument.html' onload='setIframeHeight(this.id);' style='border:0px;vertical-align:bottom;width:100%;overflow:hidden;' target='_PARENT' marginwidth='0' marginheight='0' frameborder='0' scrolling='no'></iframe>
</body>
</html>

Hide scroll bar
Unfortunately, you can't select items from an Iframe that is from a different origin unless you can specify that it is allowed in the header. There a way better answer on how to set up cross-origin header -
Edit cross-domain Iframe content Locally Only
You should not hide the Iframe's scroll bar, because that is the one that the user will want to use to scroll. Hide the content scroll bar like this.
body {
margin: 0;
padding: 0;
}
.contentArea {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow-y: scroll;
}
iframe {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border: 0;
}
.contentArea::-webkit-scrollbar {
display: none;
}
.contentArea {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
<body>
<div class="contentArea">
<iframe src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
</div>
</body>
for comparability with other browsers read this. https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

You can hide the scroll bar with CSS
.contentArea iframe::-webkit-scrollbar {
width: 0px;
}
This should do what you need.

Resizing images with object-fit:contain in flexbox only works in Firefox

I'm trying to build a photo mosaic using flexbox and object-fit: contain by changing the line height (and thus adjusting width keeping the aspect ratio).
This works well in Firefox, however not in Chrome, iExplorer, Edge, where the images shrink in place. While the images are adjusted in size, the spacing is increased.
I made an example in JSFiddle with the following Code where
container is a line of images
image1/2 are the images in a container
img contains the actual picture
HTML
<div id=container class=lContainer>
<div id=image1 class=imageThumb>
<img src="http://lorempixel.com/300/200">
</div>
<div id=image1 class=imageThumb>
<img src="http://lorempixel.com/300/200">
</div>
</div>
CSS
.lContainer {
display: flex;
justify-content: center;
width: auto;
}
.imageThumb {
height: 100%;
padding: 2px;
}
img {
object-fit: contain;
height: 100%;
width: auto;
min-width: auto;
}
JS (resizing the pictures to show the effect)
$(document).ready(function() {
var divID = document.getElementById('\container')
var el = $(divID);
curHeight = 200
goalHeight = 150;
el.height(curHeight).animate({
height: goalHeight
}, 600, function() {
el.css('height', goalHeight);
$(el).css("opacity", 0.99);
console.log("done")
});
});
I noticed that toggling padding on the image in Chrome yields the intended result (e.g. the page is not loaded correctly, if I toggle padding off / on in the inspector, the result changes to the intended one).
Using an online autoprefixer to account for the other browsers does not change a thing.
What am I missing? Thanks for your help!

Images not resizing correctly in chrome full screen

this is my first post so excuse my lack of information and flow of things.
The images on this site that im working on are not resizing correctly in chrome; max window size. i see that the images dont want to stretch but they are far too big. I built the site in dreamweaver so it shows everything working fine on its end but in chrome its not correct.
html img 1
<section class="intro">
<img src="hglogo.jpg">
</section>
css img 1
.intro img {
width: 100%;
max-height: 100%;
}
html img 2
<section id="bio">
<ul class="img-list">
<li>
<img src="img/bg4.jpg"/>
<span class="text-content"><span><h2>Who Is Henry?</h2>
...
css img 2
#bio img {
width: 100%;
max-height: 100%;
}
I would appreciate any help thanks

instead of this:
#bio img {
width: 100%;
max-height: 100%;
}
change to this:
#bio img {
max-width: 100%;
height:auto;
}

That's because of the max-heigth: 100%. Putting this will make your image stop scaling when it's at 100% of his height-size. Replace it by height: auto or simply remove it in order to make it work.

bigvideo.js - stack DIVs over and under bigvideo container

So I've started playing around with bigvideo.js (which is built on top of video.js) and it works fine for the basic usage of having a fixed background video over the whole screen. I have also managed to show it inside of a div.
My problem though, is that I can't seem to stack other DIVs with other content over or under the bigvideo.js container div, and I can't seem to figure out how to solve this.
My HTML:
<div style="float: left; width: 100%; height: 300px;">
<h1>hi there</h1>
</div>
<div style="float: left; width: 100%; height: 500px;" id="intro-video-container">
</div>
JS firing up bigvideo:
$(function() {
var BV = new $.BigVideo({container: $('#intro-video-container'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
So the video container div ALWAYS gets stuck up to the left top of the body, no matter if I try to force it down with margin-top, or place divs before it, etc.
Any ideas?

Update, here is an illustration of what I kind of what to achieve:

Try to use container div (so called wrapping) in your page where you will place the desired content (as on the plugin's example page):
CSS
.box {
background:#444; background:rgba(0,0,0,.6);
padding:20px;
border-radius:5px;
margin-bottom:20px;
}
.main {
position:relative;
margin:50px 50px 440px 220px;
min-width:300px;
-webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}
.dimmed {
color: #ccc;
}
#big-video-wrap {
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}
HTML
<div id="big-video-wrap"></div>
<div class="main">
<div id="overview" class="box">
<h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>
<h2>Simple Ambient Video Example</h2>
</div>
</div>
JavaScript
$(function() {
var BV = new $.BigVideo({container: $('#big-video-wrap'),useFlashForFirefox:false});
BV.init();
BV.show('intro.mp4',{ambient:true});
});
EDIT:
Now, it is more clear what you are trying to achieve, the simplest solution is to include an iframe on place of the div, which points to your full-screen video page.
I.e. create page video.html with all initializations and plug-in includes, then use it as source of your iframe on main page. Your iframe can be styled to match the desired dimensions (for example 100% width and 300px height).

Resizing Images As Window is Resized?

Currently I have four images side by side. When the window is resized or viewed on a smaller device it does a line jump (three images and the fourth one beneath it). However what I want is for all four images to just shrink relative to the window size. To make it clear, I've included some images and my code. Here's the jsfiddle as well: http://jsfiddle.net/hxeJb/
^ That is what I currently have.
^ That is what I want to achieve.
HTML:
<div id="headerline">
<img src="http://s21.postimg.org/l6t6akypj/line.jpg"/>
</div>
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>
CSS:
#headerline {
width: 100%;
overflow: hidden;
margin: -10px auto 20px auto;
}
#menu {
max-width: 700px;
text-align: center;
margin: auto;
}
#menu img {
width: 150px;
}

http://jsfiddle.net/hxeJb/2/
#menu img {
width: 20%;
}
See if this help you, just don't provide a fixed width, let image width relative to its parent width

Observing your CSS part in jsFiddle, I think assigning width in percentage rather than fixed pixels will resolve your problem.
You can try this instead of current CSS.
#menu img {
width: 31.33%;
}
Hope this might help you.

The other answers are probably all correct but you may want to add a max-width: 150px; so that hte image does not expand too big and lose quality.
#menu img {
width: 30%;
max-width: 150px;
}
Fiddle: http://jsfiddle.net/hxeJb/4/

Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
#menu img {
width: 25%; //give the width as per the requirement
}
Hope this will solve your problem :)