I have the html like below:
<html>
<body>
<div>Welcome.</div>
<iframe src='otherpagecontent' width='594' height='334'>
#docuemnt
<html>
<body>
<div style='color:yellow'>
This should not show in fullscreen.
</div>
<div style='color:yellow'>
This should not show in fullscreen.
</div>
<div id='fullscreen' style='color:blue;'>
This should go fullscreen only.
</div>
<div style='color:red'>
This should not show in fullscreen.
</div>
<div style='color:red'>
This should not show in fullscreen.
</div>
</body>
</html>
</iframe>
<iframe src='diffirentpage'>
#docuemnt
<button onclick="launchFullscreen(document.getelementByID('fullscreen'));">Launch Fullscreen</button>
</iframe>
</body>
</html>
In JS:
this.launchFullscreen= function (element) {
var requestFullScreen = (element.requestFullScreen || element.mozRequestFullScreen || element.webkitRequestFullScreen || element.msRequestFullscreen);
requestFullScreen.apply(element);
}
Result in Request for fullscreen was denied because of FeaturePolicy directives.
How can I get this <div id='fullscreen'> to go fullscreen?
Should I change the CSS for this <div>, or bind the request from somewhere else?
PS: This work fine on Chrome, but issue occur on Firefox.
Yes, you should use CSS for this.
You can't force the user into full-screen by F11; however, you can make your div full screen by using the following CSS
div {width: 100%; height: 100%;}
This will of course assume your div is child of the tag. Otherwise, you'd need to add the following in addition to the above code.
div {position: absolute; top: 0; left: 0;}
from:How do I make a div full screen?
You might try this
<iframe src="myurl.in"
frameborder="0"
marginheight="0"
marginwidth="0"
width="100%"
height="100%"
scrolling="auto"></iframe >
from: https://www.geeksforgeeks.org/how-to-set-fullscreen-iframe/
Related
I am trying to pull data from eBay to an iframe. The problem is it does not adjust the height of its contents and leaves a large gap below. I tried taking the offsetHeight of iframe Body, but as it is CROSS-DOMAIN, I can not pull any properties out of it. Please let me know if there are any ways to achieve this by JS or even CSS.
I have already tried all I could find from StackOverflow, but it just doesn't seem to apply here.
<script>
function onLoad() {
console.log(
"height",
document.getElementById("target").contentWindow.document.body.offsetHeight
);
}
</script>
<div class="test">
<iframe
id="target"
sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-top-navigation"
onload="onLoad()"
class="iframe"
frameborder="0"
height="auto"
width="100%"
src="https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=383383822672&t=0&tid=310&category=171228&seller=walrus_0&excSoj=1&excTrk=1&lsite=3&ittenable=false&domain=ebay.co.uk&descgauge=1&cspheader=1&oneClk=2&secureDesc=1"
title="Sellers description of item"
></iframe>
</div>
Here is a pen to visualize
There is a way to achieve this, but you will need to use a proxy for cross-domain-request. You can do this with PHP. Create a php file - content.php with the following code :
<?php
$queryString = substr($_SERVER["QUERY_STRING"], 4);
$fileContents = file_get_contents($queryString);
echo $fileContents;
?>
The code above is a simple proxy server in PHP to remove the cors issue.
Your HTML will look something like this :
<div id="iframeHolder">
<iframe id="iframe"
onload='iframeResizer()'
scrolling="no"
sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"
src="content.php?url=https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=383383822672&t=0&tid=310&category=171228&seller=walrus_0&excSoj=1&excTrk=1&lsite=3&ittenable=false&domain=ebay.co.uk&descgauge=1&cspheader=1&oneClk=2&secureDesc=1" height="100%" width="100%" ></iframe>
</div>
<script type="text/javascript">
function iframeResizer(){
let iframeHolder = document.getElementById('iframeHolder')
let iframe = document.getElementById('iframe')
let iframeHeight
let iframeHolderHeight
iframeHeight = iframe.contentWindow.document.body.offsetHeight;
console.log(iframeHeight)
iframeHolderHeight = iframeHolder.style.height = iframeHeight + 'px'
}
</script>
And css will be something like :
#iframeHolder{
height: 100%;
position: relative;
}
iframe{
position: absolute;
height: 100%;
top: 0;
left: 0;
}
Here, you will pass the URL to content.php page, where it will parse the request, and return the response. Since content.php is in the same origin, it will resolve the cors issue.
P. S. :
$queryString = substr($_SERVER["QUERY_STRING"], 4);
This code in php is because $_SERVER["QUERY_STRING"] will be
url=https://vi.vipr.ebaydesc.com/ws/eBayISAPI.dll?ViewItemDescV4&item=383383822672&t=0&tid=310&category=171228&seller=walrus_0&excSoj=1&excTrk=1&lsite=3&ittenable=false&domain=ebay.co.uk&descgauge=1&cspheader=1&oneClk=2&secureDesc=1
This is an invalid URL because of 'url=' prefix. substr() function will remove it.
You can use this library: iframe-resizer
It allows you the to automatically resize of the height and width of cross domain iFrames to fit their contained content.
I am using fullpage.js for my website. About fullpage.js everything working fine. I want to open an div on click of pagniation. I am able to open div on click which contains YouTube video. But when div is visible browser scroll will be disabled I am not getting where I go wrong.
here is sample of my code:
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: false,
css3:false,
navigation: true,
normalScrollElements: '.text',
navigationTooltips: ['tooltip1', 'tooltip2', 'tooltip3'],
onLeave: function(index, nextIndex, direction){
var prevIndex = index - 1;
var currentIndex = nextIndex - 1;
$('#section'+currentIndex).css('transform', 'scale(1.2)');
$('#section'+currentIndex).css('transition', 'all 5s ease-in');
setTimeout(function(){
$('#section'+prevIndex).css('transform', 'scale(1)');
$('#section'+prevIndex).css('transition', 'all 0.2s ease-in');
},500);
},
});
});
in jquery.fullpage.js
var li = '<li><span>' + tooltip + '</span>';
function :
function displayDetails(id)
{
$('#text').show();
}
HTML code:
<style>
#text {
position: absolute;
display:none;
z-index:999;
top: 300px;
width:100%;
height: auto;
}
</style>
<div id="text">
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/6iNFimn4wFA" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/jsd-mNTIukM" frameborder="0" allowfullscreen></iframe><br>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/ylD-WFvRZkM" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/g2YzRTAstPo" frameborder="0" allowfullscreen></iframe><br>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/98NqtVG-hFU" frameborder="0" allowfullscreen></iframe>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/O4weBTRCFzU" frameborder="0" allowfullscreen></iframe><br>
<iframe width="480" height="270" class="video" src="https://www.youtube.com/embed/UVzEOsHT7XA" frameborder="0" allowfullscreen></iframe>
</div>
<div id="fullpage">
<div class="section" id="section0"></div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
This code opens div as expected but scrolling to see last contents is not working. Instead of video if I enter text scroll works perfectly. As soon as I add video in div scroll stops working. I haven't set overflow property for #text. Please help me out.
I found this worked
function testing(){
//forcing fullPage.js to recalculate dimensions.
setTimeout(function(){
fullpage_api.reBuild();
}, 500);
};
for me this didn't work
$.fn.fullpage.reBuild();
First of all, you should be using scrollOverflow:true rather than normalScrollElements.
scrollOverflow:
(default false) defines whether or not to create a scroll for the section in case its content is bigger than the height of it. When set to true, your content will be wrapped by the plugin. Consider using delegation or load your other scripts in the afterRender callback. In case of setting it to true, it requires the vendor plugin jquery.slimscroll.min and it should be loaded before the fullPage.js plugin. For example:
Then, fullPage.js is calculatingn the height of your sections on page load.
If the videos are not displayed on page load, fullPage.js won't know the content is changing until you tell it so.
Try this:
function displayDetails(id){
$('#text').show();
//forcing fullPage.js to recalculate dimensions.
$.fn.fullpage.reBuild();
}
More about the reBuild method in the docs:
reBuild()
Updates the DOM structure to fit the new window size or its contents.
Ideal to use in combination with AJAX calls or external changes in the
DOM structure of the site.
See this example I made for you
For react users, this is the solution I found, that works best.
You need to save the fullpageApi from the render method, in state.
And then, take advantage of the useEffect to call the rebuild method.
I was using it inside the render(), but then I was getting a lot of weird behaviours, because the rebuild() was being called in every other page state update.
const [fullPageApi, setFullPageApi] = useState<fullpageApi>();
useEffect(() => {
if (fullPageApi){
setTimeout(function () {
fullPageApi.reBuild();
}, 1000);
}
}, [fullPageApi]);
// (...)
// Component example
<ReactFullpage
scrollOverflow
navigation
render={({ fullpageApi }) => {
if (!fullPageApi) setFullPageApi(fullpageApi);
return (
<ReactFullpage.Wrapper>
<YourComponent />
</ReactFullpage.Wrapper>
);
}
}
/>
Right now i want to make a simple jQuery function so when this function is called the iframe height is changing.
Here is my code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function ChangeHeightF1()
{
$("#inneriframe").css({"height":"350px;"});
alert('The height was changed!');
}
</script>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
Here is the code of the button which is in the content of the iframe:
<button type="button" onclick="parent.ChangeHeightF1();">Click me to change Height!</button>
So my questions is how it's possible to change the iframe height on button click inside the content which is holding the iframe.
Also what CSS i have to place on "outerdiv" div element so when the iframe height is changing it will change the height of the div holding the iframe as well ?
Thanks in advance!
You can use window.parent.document as a context in jQuery selector, and then manipulate CSS values.
$(":button").click(function(){
$('#inneriframe, #outerdiv', window.parent.document).css({"height":"350px"});
})
This should work. If you want to re size back to previous height, let me know.
http://jsfiddle.net/ko3pyy8c
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#more').click(function(){
$('#inneriframe').animate({height:'500px'}, 500);
$('#more').text('Go Back');
});
});
</script>
<style type = "text/css"/>
#inneriframe {
height: 350px;
overflow: hidden;
}
</style>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
<br/>
Change Height
it can help you
<a href='#'>click me</a>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
by using jquery
$('a').click(function(){
$('iframe').css('height','600px');
});
I have an iframe, which comes up as a pop up . Just above it is a p tag consisting of close button.
Now, on clicking one of the links on the frame, i am closing it like this :
window.parent.document.getElementById('myIframeId').
parentNode.removeChild(window.parent.document.getElementById('myIframeId'));
However, the p tag still exists and does not close up . This is the code :
<p class="close"><img src="buttonClose.jpeg" alt="Close"/></p>
<iframe id="myIframeId" style="display:none;" height="430" width="675" src="myjsp.jsp" ></iframe>
When i see in firebug, i can see that the iframe tag is no more, but the p tag still exists and it does not close , if not closed manually by clicking on the close icon.
EDIT : After the suggestion by David, I have wrapped bot tags inside a div :
<div id = "closeModal">
<p class="close"><img src="buttonClose.jpeg" alt="Close"/></p>
<iframe id="myIframeId" style="display:none;" height="430" width="675" src="myjsp.jsp" ></iframe>
</div>
However, everytime now i close the iframe using david's suggestion, anither dynamic div gets added like this :
<div id="myContainerModal" class="" style="z-index: 9999; width: 675px; position: absolute; top: 75px; left: 290px; opacity: 0.999999;">
<div id = "closeModal">
<p class="close"><img src="buttonClose.jpeg" alt="Close"/></p>
<iframe id="myIframeId" style="display:none;" height="430" width="675" src="myjsp.jsp" ></iframe>
</div>
</div>
Now how can i get rid of the dynamic div : myContainerModal , it is not going out of the screen ?
How can i close this p tag after closing the iframe? Kindly help .
You could access #myIframeId's previousElementSibling, which would be the p.
var iframe = window.parent.document.getElementById('myIframeId');
iframe.parentNode.removeChild(iframe.previousElementSibling);
iframe.parentNode.removeChild(iframe);
But it would've been simlper, and arguably neater, to wrap the two elements in a div and remove that by ID, rather than the iframe.
HTML:
<div id="iframe-container">
<p class="close">...</p>
<iframe>...</iframe>
</div>
JS:
var iframe = window.parent.document.getElementById('iframe-container');
iframe.parentNode.removeChild(iframe);
You can use this:
var p = document.getElementsByClassName("close")[0]
p.parentNode.removeChild(p);
It would be better to add a id="someName" to the p, though, like this:
<p class="close" id="close"><img src="buttonClose.jpeg" alt="Close"/></p>
<iframe id="myIframeId" style="display:none;" height="430" width="675" src="myjsp.jsp" ></iframe>
Then you can delete it as follows:
var p = document.getElementById("close")
p.parentNode.removeChild(p);
This will prevent you from having to hardcode the index ([0]) into your js.
You can find the P tag by class-name and then you can try to remove that as well.
I have two large image files in a div on a page that take several seconds to load. How can I hide the loading content while a "loading gif" appears and then have the content appear once it has fully loaded?
I don't really know anything about javascript but I tried using this code. It did half of what I wanted it to do. The "loading gif" worked but the problem was that the content was visible as it was loading.
http://aaron-graham.com/test2.html
<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;">
<img src="img/parallax/ajax-loader.gif" border=0>
</div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
Any help would be greatly appreciated!
Use jquery, with code like:
$(document).ready(function(){
$('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png');
});
With the html like:
<img id="pic1" />
It works by running when document's ready function is called (which is called after the DOM and other resources have been constructed), then it will assign the img's src attribute with the image's url you want.
Change the nyquil.org url to the image you want, and add as many as needed (just don't go overboard ;). Tested Firefox 3/chrome 10.
Here is the demo: http://jsfiddle.net/mazzzzz/Rs8Y9/1/
Working off your HTML structure I added a notifyLoaded class for the two images so you can watch for when both have loaded via an onload event. Since css background images don't get that event I've created a hidden img using the background's path so we can test when that image is loaded
HTML:
<div id="loading">
<img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" />
</div>
<div id="vertical">
<div>
<div class="panel">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" />
</div>
</div>
</div>
<div id="imgLoader">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" />
</div>
You have reference to jQuery in your page already so I've replaced your script to the following.
jQuery:
$(document).ready(function() {
var $vertical = $('#vertical');
var $imgs = $('.notifyLoaded');
var imgCount = $imgs.length;
var imgLoadedCount = 0;
$vertical.backgroundparallax(); // Activate BG Parallax plugin
$imgs.load(function() {
console.log(this);
imgLoadedCount++;
if (imgCount == imgLoadedCount) {
// images are loaded and ready to display
$vertical.show();
// hide loading animation
$('#loading').hide();
}
});
});
I've also set #Vertical to a default display:none; which gets changed when images have loaded
CSS:
body {background-color:black;}
#loading {position:absolute;width:95%;text-align:center;top:300px;}
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;}
#vertical > div {margin: 0;color: White;}
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;}
#imgLoader {display:none;}