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
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;
}
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);' />
<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 am using a slider js named as easySlider1.js for worspress. its working fine but till the time whole page is not fully loaded it show all the images of slider for a moment till the page is not loaded. as soon as page is fully loaded then it working fine.but it seems odd that it show all the images while page is in loading process. so please tell me how can i solve the problem. i want that all the images of slider should not show while page load. i try for it but cannot get the solution.so please tell me how can i solve the problem.
Thanks.
I don't know how the page looks like, but with the information you gave I came up with the following:
If the images are surrounded with a html-tag like div or p, then you can add css to hide the images while loading and show the images when the page is fully loaded.
If you have this:
<html>
<body>
<div id="image_gallery">
<img src="..." />
</div>
...
</body>
Then change it to this:
<html>
<body>
<div id="image_gallery" style="display:none;">
<img src="..." />
</div>
...
<!-- insert script just above the body endtag -->
<script type='text/javascript'>
jQuery('div#image_gallery').show();
</script>
</body>
jQuery must be loaded for this to work.