just cant figure out how to get the below code to auto adjust the hight, dependant on the path in "src". As i dont want hard code the height as the src path may change. I have tried various js methods, but none seem to work.
<iframe src="C:\" height="200" width="100%"></iframe>
I have done the styles inline, but will be managing all styles in a css file.
Help.
You need to use JavaScript to adjust an iFrame to match the size of the content. Check out this library that will watch to content in the iFrame and keep the size upto date.
https://github.com/davidjbradshaw/iframe-resizer
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Related
I am using Map embed iframe with this code in my Website
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4911422.152107185!2d-6.743420312530421!3d53.05351610420746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487a5d16d99dac79%3A0xbd0539007f0aea54!2s27+Eddisbury+Dr%2C+Newcastle%2C+Staffordshire+ST5+7SL%2C+UK!5e0!3m2!1sen!2sin!4v1465471022612" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
it looks
It works good, But i want to set zoom level in this iframe, is it possible?
Guide me how do i set this. Thanks!!
when i am adding this
<iframe style="height:100%; width:100%;" src="https://www.google.com/maps/embed/v1/place?q=27+Eddisbury+Dr,+Newcastle,+Staffordshire+ST5+7SL,+UK&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU&zoom=15"></iframe></div>
then I am getting this
i mean it works , but disturb all page contents and div too.. And when i tried to set its height and width it remains same, means no change.
Back to my question i just want to set zoom level, no need to change height and width or map style.
I resolved my problem , here i am adding some screen-shots,
I opened the page ,and
then it opened like this
Now go to address bar i.e
and find out lat long and Z associated with lat long
you may change this Z as you want and refresh the page
or
After this go to cog button on top left side i.e
after this it will open a side bar like this
then look for share or embed map and click on that it will open
then
now copy iframe code from here and use.
Thats it. It will work for every one.
<html>
<head>
<title>Google map</title>
</head>
<body>
<iframe style="height:100%; width:100%;" src="https://www.google.com/maps/embed/v1/place?q=27+Eddisbury+Dr,+Newcastle,+Staffordshire+ST5+7SL,+UK&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU&zoom=15"></iframe></div>
</body>
</html>
you can use zoom variable for zoom level like bellow.
<iframe style="height:100%; width:100%;" src="https://www.google.com/maps/embed/v1/place?q=27+Eddisbury+Dr,+Newcastle,+Staffordshire+ST5+7SL,+UK&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU&zoom=15"></iframe></div>
You can try with the &z=nn Some value parameter. It works fine for me. Here is a reference code for you.
<iframe width="640" height="480" src="https://www.google.com/maps/d/embed?mid=1I8s3COxd2tY0wGKPiBxra1gkE6wpAEx1&z=19"></iframe>
I did it just by changing "pointer-events: all"
and then you have the same functions as in google map, zoom in-out, make a route and etc.
.map iframe {
pointer-events: all;
height: 100%;
width: 100%;
border: 0;
}
I'm new here and a bit of a noob. I know HTML and CSS basics, but trying to do something I suspect needs javascript...
I'm trying to create an iframe whose src defaults to the latest entry of an RSS Feed, with the feed itself below. Take a look at my code below and the link here http://visitrek.net/rssfeed/rssfeed.html
<script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.dotnews.co.za%2FCode%2FRSS%2F515&chan=title&au=y&targ=newsiframe&utf=y" charset="UTF-8" type="text/javascript"></script>
<noscript>
View RSS feed
</noscript>
<div style="width:713px; overflow: hidden;"><iframe width="850px" height="2000px" frameborder="0" name="newsiframe" src="" scrolling="auto" style="-webkit-transform: scale(0.85); -webkit-transform-origin: 0 0;"</iframe></div>
Anyone have any bright ideas?
Thanks!
You will have to write a javascript function which targets your desired child Node in this case li:nth-child(20), then get the src of the InnerHtml and update the iframe src.
Check out Child elements in this link. I think that will point you in the write direction
<iframe height=468 width=1584 src="//docs.google.com/spreadsheets/d/1hUgiZqpgjqqtpnYY6Q1IeoUYlpXlCRUeARpN3cWX87g/gviz/chartiframe?oid=2131305794" seamless frameborder=0 scrolling=no></iframe>
Even after changing width to 100%, it doesn't make it responsive. I am embedding this graph on WordPress website.
Put div around that iframe (as parent element), and set CSS "transform: scale(0.5)" to that div.
<div style="transform: scale(0.5, 0.5);">
<iframe ...>
</div>
It will resize whole frame, including its content.
I have done a bit of looking around on the web for you and have several solutions. One of the most popular seems to be to use JQuery in order to resize the iFrame correctly.
A link to the script is found here: jQuery Responsive iFrame's
<!-- Activate responsiveness in the "child" page -->
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
var ri = responsiveIframe();
ri.allowResponsiveEmbedding();
</script>
<!-- Corresponding code in the "parent" page -->
<script src="/js/jquery.js"></script>
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
;(function($){
$(function(){
$('#myIframeID').responsiveIframe({ xdomain: '*'});
});
})(jQuery);
</script>
From there just make the iFrame have an ID of myIframeID or simply change the text in the script above to accommodate this.
Should this not work for you I would suggest using my Google Search string to finding other possible solutions: responsive iframe width
Good Luck!
I want a link to open in an Iframe which already has its source tag linked to another page. The link and iframe are on same page. Here is the code:
<div>
<iframe src="itihaas1.php" id="wrapper" height="1000" width="800" frameborder="0" scrolling="no"><p>Your browser does not support iframes.</p></iframe>
</div>
<div>Page 1</div>
If it's not possible then how can it be done? Any soln would do.
thanks.
if you use jQuery you can do something like this:
<script>
$(function() {
$('#myLink').click(function() {
var iframe = $('#myIframe');
iframe.attr("src", "newpage.html");
});
});
</script>
if you are use plain javascript you should find your answer here:
change iframe source in ie using javascript
I need to load a page with an iframe in a way that its header is hidden. I tried the following but for some reason it isn't working:
<div style="width:945px; height:600px; overflow:hidden;">
<iframe src="innerpage.html"
frameborder="0"
height="700"
scrolling="no"
width="945"
style="top:-100px" />
</div>
What meder said is true, but it could also be that your style wouldn't do anything. You'll need to set position: absolute or position: static in order for top to have any impact.
This will just move the whole iframe up though, not the content within the iframe.
It isn't working because you can't style the inside of an iframe from the parent, without accessing the document inside whether from the parent's javascript, or a stylesheet inside the iframe assuming said iframe is on the same domain as yours.