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.
Related
I am using an iframe tag to play a 9:16 aspect ratio video from my google drive. The iframe is wrapped around a div and the div is styled so that there are no black bars. The video is maintaining its aspect ratio but the thumbnail is not. The thumbnail covers all the wrapper's height but not the width. I want the thumbnail to also maintain the aspect ratio of 9:16.
Also, I did not add a custom thumbnail.
.potrait_9by16
{
position: relative;
overflow: hidden;
width: 100%;
padding-bottom: 177.777%; /* 9:16 Aspect Ratio*/
}
.potrait_9by16 iframe
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
<div className="potrait_9by16">
<iframe
width="100%"
height="100%"
frameborder="0"
src={videoObject.src}
allow="fullscreen"
></iframe>
</div>
Here is an image of the wrapper
Try below at https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video:
<!DOCTYPE html>
<html>
<body>
<style>
div.outer { overflow: hidden }
div.outer > div.inner { position: relative; margin: 0 -109.7283%; padding: 88.8888888% 0; overflow: hidden }
div.outer > div.inner > iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
</style>
<div class="outer">
<div class="inner">
<iframe width="100%" height="100%" src="https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview">
</iframe>
</div>
</div>
</body>
</html>
It may mess up the video playback, though. The video controls (progress-bar etc.) get cropped when playback starts.
Replace the code there with the one I have provided.
I just checked your code, and looks like what you need is:
.x { overflow: hidden }
.neg { position: relative; margin: 0 -109.7283; padding: 88.8888888% 0 }
.neg > iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
and use only x class for outer div, only neg class for inner div. That should probably do it.
I thought about removing the negative margin on playback, and was experimenting with something along those lines, but didn't get around to completing it. It should work to some extent, but what I found was that the black bordered thumbnail may be displayed for a short time before the playback starts (at least the way I tried it). If that's Ok, you could try that method. What I thought of was to display an invisible div (transparent overlay) covering the iframe that can capture a click and switch the iframe src to autoplay=1 URL. See if you can get that to work. If I have some time, I may look further into that.
I was adding a div using JavaScript with the same style as the iframe, just after the iframe:
.overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
If this div is added last, it will already be topmost. Otherwise, use z-index.
Then handle the 'click' event on the div.
The above div overlay technique has it's limitations. The below technique may be better:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Player</title>
<div id="player"></div>
body { background: #efe; padding: 2em; color: #575 }
h1:first-child { margin-top: 0 }
.player, #player { overflow: hidden }
.player > div, #player > div { position: relative; padding: 88.88888% 0; overflow: hidden }
.player video, .player iframe,
#player video, #player iframe
{ position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
.player:not(.playing) > div, #player:not(.playing) > div
{ margin: 0 -109.7283% }
((W, D) => {
let $ = a => document.getElementById(a)
class Player {}
Player.play = (id, url) => {
let p = $(id)
, f = D.createElement('iframe')
, d = D.createElement('div')
f.src = url
f.setAttribute('frameborder', 0)
f.height =
f.width = '100%'
f.addEventListener( 'mouseover', e => f.dataset.overMe = 1 )
f.addEventListener( 'mouseout', e => delete f.dataset.overMe )
W.addEventListener( 'blur', e => {
if (f.dataset.overMe === '1')
setTimeout(a => p.classList.add('playing'), 1000)
} )
p.innerHTML = ''
d.appendChild(f)
p.appendChild(d)
}
W.Player = Player
})(window, document);
Player.play('player', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')
See if you can use this latest update with multiple iframes...
Your issue could be because you may be using an id (maybe the same id) with all player divs. When using multiple player divs, you need to use unique ids and use class="player" for the divs instead of id="player":
<div id="player-1" class="player"></div>
<div id="player-2" class="player"></div>
<div id="player-3" class="player"></div>
If it still doesn't work, show me a demo (on your site, maybe), and I'll take a look. Call the play method with the id like
Player.play('player-1', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')
Player.play('player-2', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')
I need to know what element sits at the very bottom of the page (usually a <footer> but it can be something else). So I know I can use document.elementFromPoint() but only if the user has scrolled to the bottom because that function uses client coordinates not page coordinates. See my example below, both elements should have green text but only one does.
Is there a way to find an element at a given page coordinate?
$(document).ready(function() {
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
// Find "Top element"
$(document.elementFromPoint(10, 30)).css('color', 'green');
// Find "Bottom element"
$(document.elementFromPoint(10, height-10)).css('color', 'green');
});
html, body {
margin: 0;
padding: 0;
}
body {
height: 2000px;
position: relative;
}
h1 {
background-color: blue;
display: block;
width: 100%;
}
.footer-ele {
position: absolute;
bottom: 0;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Top element</h1>
<h1 class="footer-ele">Bottom element</h1>
I'm trying to display content on one page there are two parts of it so first content will display in full page while the other one is hidden the first content will time out after like 2 minutes and after 2 minutes the other part of the content will display below are sample of my code any help will be appreciated.
<div id="top">
*video will play in full screen on full page using javascript it will time out after 2 mininutes and it will hide the video and just show the the "Bottom" text *
<iframe width="100%" height="100%" src="//www.youtube.com/embed/Lam6hufUt5k?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="bottom">*after 2 mins the text content will display on full page </div>
css
body {
width: 100% ;
height: 100% ;
margin: 0px ;}
Solution 100% working without jquery : ( you can see it working here : http://jsfiddle.net/akmozo/ws24yd9j/ )
Of course, you should keep in mind that hidding the iframe does not stop playing the video if it's playing. This is only an easy response for what you looking to do, It's working but you should ameliorate It to do things better.
HTML code:
<html><head>
<style>
body{
width: 100%;
height: 100%;
margin: 0px;
}
#top {
position:absolute;
display: block;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10;
}
#bottom {
position:absolute;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 9;
}
</style>
<script>
function load_timeout(){
var timeout = setTimeout(function(){
document.getElementById('top').style.display = 'none';
document.getElementById('bottom').style.display = 'block';
}, 2000*60);
}
</script>
</head>
<body onload='load_timeout()'>
<div id='top'>
<iframe width='100%' height='100%' src='http://www.youtube.com/embed/Lam6hufUt5k' frameborder='0' allowfullscreen></iframe>
</div>
<div id='bottom'>*after 2 mins the text content will display on full page </div>
</body>
</html>
Use javascript to hide the first and show the second after 2 minutes (120 seconds)
<script>
setTimeout(function() {
document.getElementById("top").style.visibility = "hidden";
document.getElementById("bottom").style.visibility = "initial";
}, 1000*120);
</script>
Portrait img contained within a div does not get it's height set correctly... in FF(27.0.1) only. Works with Chrome, and IE8.
I have the following:
html, body {
margin: 0;
border: 0;
padding:0;
width: 100%;
height: 100%;
overflow:hidden;
}
.photo-container {
position: absolute;
right: 0;
top: 0;
width: 79%;
height: 100%;
overflow-y: auto;
}
img#photo {
margin-top: 0.5%;
max-width: 100%;
max-height: 95%;
}
In the html...
<div class="photo-container">
<div id="pic"></div>
</div>
<script type="text/javascript">
function f_pop(theImg) {
document.getElementById('pic').innerHTML = "<img id='photo' src='" + theImg + "' alt='photo'>";
}
http://jsfiddle.net/isherwood/sFZgn
Notes:
The photograph is portrait orientation.
This works with Chrome and IE8, but not in FF 27.0.1
In the img#photo, I changed the height to 50%. Chrome and IE8
sized the photo down. In FF it was truncated (and required the div's scroll bar to move down).
I initially had this (without the photo-container) as a page in a frameset, that is the hierarchy was body, div id=pic. It worked in that design with FF.
I converted the frameset to a single page with two column (divs), the right side being the photo-container, and now it does not work in FF.
Your help is greatly appreciated.
Thanks.
You need to set a height on #pic:
#pic {
height: 100%;
}
http://jsfiddle.net/isherwood/sFZgn/2/
I solved this by removing the div around the img. (This is what I had in my frameset version, and I'm not sure why I added it to this 2 column div version).
Also changed the photo-container from a class to a id.
So the only change in the CSS is .photo-container becomes #photo-container.
The html
<div id="photo-container">
<img id="photo" src="default.gif" alt="photo">
<div id="blurb"></div>
<div id="contributor"></div>
</div>
The js
document.getElementById('photo').src = pic;
document.getElementById('blurb').innerHTML = blurb;
document.getElementById('contributor').innerHTML = contributor;
How do I get the footer to take up the remainder of the page's vertical space without actually knowing how tall the content is? I can't figure out how to use javascript/css to accomplish this...
Just to be clear...
Scenario 1: The content ends halfway through the page, the footer would take up the remaining half. No scrollbars necessary.
Scenario 2: The content takes up 1 1/2 pages, the footer would take up only what it needs (~200px). Scrollbars necessary.
<body>
<div id="content">
<div id="footer">
</body>
Oh, and I'm open to a jQuery way of doing this.
You can always try using jQuery to detect the height of the browser window, then deduct the content height from it to assign a height in pixels to the footer.
Though it would be different on different sized monitors.
To get the browser height, and store it as a variable you can use:
var browserHeight = $(window).height();
Content height can be stored using:
var contentHeight = $("#content").height();
Footer height can then be worked out like so:
var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
So altogether, you'd have:
<script type="text/javascript">
$(document).ready(function(){
//Get Browser and Content Heights
var browserHeight = $(window).height();
var contentHeight = $("#content").height();
//Set footer height
var footerHeight = browserHeight - contentHeight;
$("#footer").height(footerHeight);
});
</script>
Or something like that :)
Anthony
I would do something like this:
$(function() {
var windowHeight = $(window).height();
if ($('body').height() < windowHeight) {
$('#footer').height(windowHeight - $('#content').height());
}
});
You probably need to adjust this according to paddings/margins, but this is how it should work, basically.
You can 'fake' it with just CSS. Example:
<div id="footer-background"></div>
<div id="content"></div>
<div id="footer"></div>
CSS:
#footer-background {
position:absolute;
width: 100%; // or the width of your content depending on if its fixed width, etc
height: 100%;
z-index: -1;
margin: 0 auto; // if you use a fixed width this will center it
top: 0;
background: #000;
}
#content, #footer {
position: relative;
width: 100%; // or fixed width
margin: 0 auto; //if you use a fixed width this will center it
background: #fff;
clear: both;
}
#footer {
background: #000;
}
What this does is set an empty div that contains the same background css as the footer but it actually fills the whole page. (height and width). The content has a white background so it will overlap the footer-background as far as the content height. Then your footer will scale according to your footer content but from a visual perspective the footer will appear to take up the rest of the page if it doesn't scroll.
Why use JavaScript when this can be done with CSS?
Firstly set the margin to 0
*{margin: 0;}
Make sure the page fills the browser in height wise
html,body{height: 100%;}
Create the content to fill 100% just remove the height of the footer
#content{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -200px;
}
then set the height of the footer, make sure its the same as the margin in #content
#footer{height: 142px;}
Jobs a good one :)
No need to use javascript! You can use only css for this:
#footer {
position:absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index:-100;
/* height: 100%; you don't need this, but you can put it to be sure */
}
What it does is position this layer on the whole screen (relative to the screen- not page, so it will have the same position after you scroll also) and put it far behind the other layer (z-index: -100)
Simple solution:
body {
min-height: 100%;
position: relative;
}
#footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Adding these properties / rules to your css should do what you're looking for. Let me know if it works.
If you do use a script to size the footer, be sure to call the same function on resize events.
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>untitled</title>
<style>
#footer{border:blue solid thick; position:relative}
</style>
<script>
window.onload= window.onresize=function(){
var b=document.documentElement.clientHeight,
f=document.getElementById('footer'),h=f.offsetTop,
hx= Math.floor(.96*(b-h));
f.style.height= hx+'px';
}
</script>
</head>
<body>
<h1>h1</h1>
<div>content</div>
<div id="footer">footer</div>
</body>
</html>