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
is there a way with javascript/jquery to prevent images from loading? I am building a slideshow from a html list with images. So I would like to collect all the src data and then prevent the images from loading. So later when the user really needs the image I would load it then.
I found some lazy loading script on google but couldn't find the way they prevent images from loading.
Thanks in advance.
Edit1:
It seems from the answers that it's not possible to use javascript to prevent images from loading.
Here is a script that does lazy loading. Could anybody explain how it works? It seems when javascript is off it just loads the images normaly and when it's on it will load them when you scroll to their location.
You can wrap the image in a noscript tag:
<noscript>
<img src="foo.jpg"/>
</noscript>
All browsers that has JavaScript enabled will ignore the image tag so the image won't load.
If you render the HTML on the page, even if it's hidden, it's going to load. If you want images to load only when they're needed, you're going to have to dynamically set the source (src) on the image tag in javascript.
Edit 1: The script you referenced merely checks to see how far you've scrolled the page down and then determines which images are visible (or almost visible) by checking their top -- see the $.belowthefold and $.rightoffold extensions.
The example works great when the images are all the same size because their containers can also be the same size and you won't get any odd page resizing behavior when you lazy load them. If your images' heights and widths vary, you may get some odd results.
Edit 2:
<script type="text/javascript" charset="utf-8">
$(document).ready( function() { $("img").removeAttr("src"); } );
</script>
<img src="Chrysanthemum.jpg" />
<img src="Desert.jpg" />
<img src="Hydrangeas.jpg" />
<img src="Jellyfish.jpg" />
<img src="Koala.jpg" />
<img src="Lighthouse.jpg" />
<img src="Penguins.jpg" />
<img src="Tulips.jpg" />
Store the URLs somewhere else, then set all image URLs to some dummy image (empty, transparent, "loading data...", whatever). When an image should be displayed, use JS to set the src attribute and the browser will fetch it.
Well with Prototype you can do something like this I guess:
var unloaded = [];
$$('img.noload').each(function (image) {
unloaded.push(image);
image._src = image.src;
image.src = '';
});
To load all of them:
unloaded.each(function (image) {
image.src = image._src;
});
To load the first one:
function loadImage (image) {
image.src = image._src;
}
loadImage(unloaded.shift());
Well I hope you got the idea.
Just do not include the img tag in your original HTML, generate it on the fly using DHTML as you need it. You can also put a fake url to image in the img tag and replace it with the real one dynamically.
On the side note - what's the point. All you are trying to do here is to build another caching mechanism over the existing one. Leave caching to browsers, they are pretty good at this
You can use the portion below to replace all image tags with a dummy file (for example, an 1x1 transparent gif). The url's are stored in a array for later reference.
$(document).ready(function(){
var images = new Array();
$("img").each(function(i){
images[i] = this.src;
this.src='blank.gif';
});
});
I don't recommend this solution, for many reasons (like it ruins your page if you don't have Javascript enabled, screen-readers etc), but its a possibility...
You could change the IMG tag so that it hijacks a different attribute, like ALT (LONGDESC, or TITLE too):
Then use Javascript to update the SRC attribute with the ALT value as you need to.
So thats one way, and not a good one. I think the only real approach is to dynamically generate the proper IMG tag as needed via Javascript and not publish it with the HTML (this too has implications for non-JS browsers etc)
This article shows some tests using both css background and img tags on a set of standard browsers.
In my personal experience the PictureFill by Scott Jehl is the best solution I've ever used to deal with image resolutions and sizes for mobile devices.
I know this is an old question, but it took me a while to figure out how to accomplish what I wanted to. This is the top result on DuckDuckGo so I think it's worth posting here.
This little snippet will prevent imgs, embeds and iframes from being loaded and will manually load them later when needed.
One caveat: objects that are loaded too fast for JQuery/JavaScript to catch them are still loaded, and the script still removes them.
Since this is intended to decrease load time this should not be a problem though.
Fiddle
loadObjects = function() {
/* LOAD OBJECTS */
$("img, embed, iframe").each(function() {
var obj = $(this);
obj.attr("src", obj.data("objsrc")).ready(function() {
obj.fadeIn(1000, "linear").prev(".loading").fadeOut(750, "linear", function() {
$(this).remove();
});
});
});
}
$(document).ready(function() {
/* *** PREVENT OBJECTS FROM LOADING *** */
$("img, embed, iframe").each(function() {
var obj = $(this);
obj.data("objsrc", obj.attr("src"));
obj.hide().attr("src", "").before("<span class=\"loading\"></span>");
});
});
You can also wrap the image in a template tag:
<template>
<img src="foo.jpg"/>
</template>
Browsers will not try to load it.
The answer to this problem is very easy via insertAdjacentHTML() which lets you add HTML when you like, in this case on button click:
function LoadImages(){
document.body.insertAdjacentHTML('afterEnd','<img src="one.jpg" alt="" height="100" width="100"> <img src="two.jpg" alt="" height="100" width="100">');
}
The HTML...
<button onclick="LoadImages();">Click to load images</button>
I'm working on a facebook tab that includes an iframe showing content from another website. I've narrowed the iframe down to only showing the part of the website that I want it to and disabled scrolling. In addition to that, I'd like to disable the links in the iframe content, and I've read that it should be possible by adding a transparent .png background image to a div containing the iframe and setting the iframe's z-index to -1, but the iframe is still in front of the image.
So far my css looks like this:
<style type="text/css">
iframe
{
z-index:-1;
}
.bgimg {
background-image: url('transparent.png');
}
</style>
and my html like this:
<div class="bgimg" style="overflow:hidden; width: 700px; height: 100%;margin:auto;">
<iframe src="http://www.url.com/site.html" width="1100" height="700" seamless="seamless" frameborder="0" scrolling="no" style="margin-top:-230px;"></iframe>
</div>
I'm using this to give a direct link to my amateur soccer team's league table, instead of manually having to update the tab each week with all the new information, but I don't want it to be possible to click on each team for team information - just the League table.
I've read several places that this should be possible, but haven't been able to find a functioning code - also read a few places saying it's impossible, and yet some others that say it can only be done using jQuery (which I know nothing about).
If anyone has any alternative solutions to what I'm doing now - please let me know.
Keep in mind that z-index only works for positioned elements (can be relative though.)
See: http://www.w3.org/TR/CSS21/visuren.html#z-index:
Applies to: positioned elements
We have some embedded Spotify play buttons in a paged quiz style wizard/carousel (using jQuery Tools -yuk- to provide the paging functionality); the issue I'm having is that because each question is on a div that is initially hidden, the content of each Spotify iframe is unable to work out which player to render (small vs large).
It would be possible to force a refresh of these iframes when the user scrolls to each panel, but this feels like a hack and a bunch of extra HTTP requests.
Has anyone had any experience with this? Any workarounds that don't require me to multiply requests to Spotify?
Thanks in advance
S
The team in charge of the Spotify Play Button has recently released an update that fixes this issue. You don't need to make any change in your embed code.
Here I attach some sample code, together with its jsFiddle.
In example, being this the HTML:
<button id="show-play">Show Play Button</button>
<div id="container" style="display:none">
<iframe src="https://embed.spotify.com/?uri=spotify:track:4bz7uB4edifWKJXSDxwHcs" width="300" height="380" frameborder="0" allowtransparency="true">
</iframe>
</div>
you change its style CSS property:
(function() {
var button = document.getElementById('show-play'),
container = document.getElementById('container');
button.addEventListener(
'click',
function() {
container.style.display = 'block';
},
false
);
})();
You can see it in action in this jsFiddle.
Disclaimer: I'm a Spotify employee.
I've been reading threads (specifically this one: iFrame inside Jquery accordion) and still not finding (or not understanding) how to get the Spotify playlist I have hidden in a closed accordion section to fully load on page load.
Many solutions have been offered that I've tried, so far, nothing has done the trick (probably due to my JS noobness). I'd appreciate any insight. Please do be specific about where to put what as I'm very new at Javascript.
JS:
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
autoHeight: false,
alwaysOpen: false,
active: true
});
});
</script>
Relevant HTML:
<h3 id="bubble">The Bubble Creatures</h3>
<section id="bubble">
<div id="bubble-story"><p>Blah blah</p></div>
<iframe id="spotify" src="https://embed.spotify.com/?uri=spotify:user:seedpodpub:playlist:4MsCt5Fkg5G99Tb5VFqzQ4" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</section>
Thank you again!
o.
UPDATED WITH MORE INFO:
Essentially, I want to do this:
If the section style is "#section1 {display:none;}" then do nothing.
If the section style is "#section1 {display:block;}" then trigger the div #spotify to load.
This should overcome the half-loading issue I'm seeing with the hidden iframe (I hope)? I'm looking at this post: Event detect when css property changed using Jquery, again, failing to implement the suggested solution.
It seems like you have found your way out of this but for others I suggested a rather easy solution for this.
I was trying to load my Google map api into an iframe which was inside the jQuery Accordion.
The problem is if you load the accordion as closed, the iframe never loads so if you try to open the accordion you wont see anything in it.
The solution is that to load the accordion as open or active first (active: '0') and then use this code to close your accordion as soon as the page gets loaded:
$("#accordion-map").accordion(
{
active: 'none'
}
);
So what happens is that when you declare your accordion its open and the above code close it right after ;) so you never see it open.
Worked for me just fine in both Chrome and FireFox.