<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!
Related
I want to create a chart from google sheet. I export the chart from the spreadsheet, I take a URL. But I cannot make it responsive because of the cors problem. So, I thought the whole iframe responsive by transform: scale? But it couldn't be a good solution. Have you any idea to make this iframe responsive?
Below is my snippet:-
<div
class="responsive"
>
<iframe
width="698.1827830188679"
height="305.5"
seamless
frameborder="0"
scrolling="no"
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQuSWCpXJIwSPNJEE6iqzsJTxkPdSiL6uZaqph-CtMXh5QDw8Z9pESPB_0VenmhF4Dx6H5GLylHztAO/pubchart?oid=1827562470&format=interactive"
></iframe>
</div>
Also, you can check fiddle below,
https://jsfiddle.net/qtro2Lz5/
I am also facing this issue for this Google Spreadsheet published chart. Btw, your title is misleading, that's not Google Chart, which is another different product from Google to create truly proper web chart, which also can be responsive, and also using Spreadsheets data.
Back to the problem, the "Google Spreadsheet published chart" content itself is not responsive, it's not about how to make the iframe itself to be responsive.
Iframe can be responsive, but we cannot modify chart content from published Google Spreadsheet to be responsive, afaik.
I already trying some trick like these, which works great only for video and some responsive content website.
http://jsfiddle.net/marhensa/g9op54wx/
Also there's some other neat trick like this
https://codepen.io/alxfyv/pen/QEjEbp
but the problem is the iframe content must be also responsive.
If you simply want this to work and really simple, dont use iframe, use simple image responsive, simply change the end of your published Google Spreadsheet chart URL from format=interactive to format=image
The correct method to solve this problem is sadly only SCALING, like you said to transform/scale it in your question. If the content of wrapper is not responsive and you want dynamically resize it (text also will be smaller) like this
recorded example, then scaling it is. That example is a HTML text and some graphic page by the way, it behave like SVG / image file when it scaled.
Explained here: https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript
Also done in Angular here: https://stackblitz.com/edit/angular-vagpoq
EDIT: If you can live with scaling and smaller text / thin lines, the working solution is using this JS + JQuery Scaling method in HTML head section, this written by yazzz here, kudos to her/him in that link, not in here.
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
// this script is written by yazzz https://stackoverflow.com/a/35819751/9894532
$(function() {
$("#wrapper").each(function() {
var $wrap = $(this);
function iframeScaler(){
var wrapWidth = $wrap.width(); // width of the wrapper
var wrapHeight = $wrap.height();
var childWidth = $wrap.children("iframe").width(); // width of child iframe
var childHeight = $wrap.children("iframe").height(); // child height
var wScale = wrapWidth / childWidth;
var hScale = wrapHeight / childHeight;
var scale = Math.min(wScale,hScale); // get the lowest ratio
$wrap.children("iframe").css({"transform": "scale("+scale+")", "transform-origin": "left top" }); // set scale
};
$(window).on("resize", iframeScaler);
$(document).ready( iframeScaler);
});
});
</script>
</head>
<body>
<p>Responsive and Dynamic Iframe Scaling of Published Chart from Google Spreadsheet</p>
<p>Courtesy of yazzz from Javascript StackOverflow</p>
<div id="wrapper">
<iframe width="500" height="294" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRB4wPFarqsHWgk0ubQ6bH3YC5iwvDayAkrDg0iNPipAAszBA26QnFaPC1Xk5g8XF1ixP7jnsxiaMzL/pubchart?oid=1495533449&format=interactive"></iframe>
</div>
</body>
Also you can view his/her implementation of my sample here in JS Fiddle
https://jsfiddle.net/marhensa/10radjqo
I am using animate.css for my Web site and i used a bootstrap carousel slider it is searched on google and placed in my website. Its working fine But after that my animate.css is not working properly means all animated elements in the HTML page are animating when page loading.
ex: i am using fadeInRight animated class below the page but it is not working when i am going to page down and when i refresh the page at that particular element its working fine. please solve this
please check the site
If you want to Reveal Animations When You Scroll, this is what you're looking for:
http://mynameismatthieu.com/WOW/
CSS animations cannot be delayed based on the scroll position. So, first, you'll need to download and include the wow.min.js file to your page like this:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
And then add the animation to your html element by adding the class 'wow' followed by the animation name in animate.css:
<section class="wow slideInLeft">
</section>
For more advanced options related to timing the delay etc, refer: http://mynameismatthieu.com/WOW/docs.html
You can use wow.js for animating elements when it's on viewport area.
HTML:
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>
CSS:
<link rel="stylesheet" href="css/animate.css">
js:
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
check the jquery plugin wow.js
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
Hy, I have the following situation:
I am trying to change the design of my feedly-index page. (I can not change the HTML)
And I am facing a problem I coulnd't solve the past two hours.
In the HTML there are some div elements with random IDs and '_content' at the end.
Within these div's there is an img tag - what I want to do is to wrap this img-tag with an anchor-tag to make it clickable.
Situation:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
What I want as outcome:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<a href='LINK_TO_AN_IMAGE'>
<img src='LINK_TO_AN_IMAGE'>
</a>
</div>
Is this even possible with CSS?
I could make it work with JavaScript, but the div's are loaded dynamically via AJAX:/
So the JavaScript Script would just run for the current div's but not the one which are loaded dynamically.
It's not possible with just CSS because CSS is meant or styling the page and not or adding dynamic elements to the page.
But we can do it using JS.
As you are creating those elements using ajax call. On the success callback of the ajax call, you can wrap the image with a tags.
for example:
$.ajax({
url : "/make.php"
}).done(function() {
var images = $("div img");
$.each(images, function() {
$(this).replaceWith($("<a href=''>"+this.outerHTML+"</a>")); //construct url dynamically via some variable
});
});
DEMO
If you are not able to edit the html this could be tricky.
It can't be done with pure css... css can't create links.. I mean it could be possible with js i suppose, besides that if the ids are random it makes it even more difficult.
--edit additional--
If you could wrap the whole area that holds the divs inside a div then you might have a chance with jquery...
e.g:
<div id="holderdiv">
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
</div>
You can then use jquery to make all instances of #holderdiv > div > img a link to the image path?
How can I maximize the size of the div that plays the role of "content"?
I recognize that this may simply be a basic CSS question, but it feels like it is tied to CSS in jQueryMobile.
I'm placing a Google Map in the content div and I'd like the map to fill the available verticle space on the mobile browser. Instead, it's a fixed size of about 10px (give or take).
<div data-role="page">
<div data-role="header" class="ui-header ui-bar-a">Header</div>
<div data-role="content" class="ui-body ui-content">
<div id="divMap">google map via javascript</div>
</div>
<div data-role="footer">footer</div>
In this case, jQueryMobile always creates the minimal size for its contents, and I always want it to be 80% of the available page.
You could probably use jQuery (I haven't worked with jQuery mobile, though, so this might not work directly):
$(document).ready(
function(){
$('#content').height($(window).height()*0.8);
}
);
JS Fiddle demo