I have embedded a google spreadsheet on my website through an iframe. But data take time to load on the spreadsheet. Is there any add-on or a simple script that i can include to my spreadsheet to show a spinning arrow till all data is loaded in my spreadsheet. Otherwise it just shows a white screen for around 5 to 10 seconds.
<iframe name='iframe2' scrolling='no' src='https://docs.google.com/spreadsheets/d/e/2PACX-1vQyRGpXqAZ15m-WEyI6mbCIVZrWssEZcEs8nIu7H0NdwELvvg7hDH4GOBJ7HuLMWQxhDdP8Ft9uQsPe/pubhtml?widget=true&headers=false' style='height: 1000px;width:360px;margin-right: auto; margin-left: auto; text-align:center;background:white;display:block;overflow:hidden;'></iframe>
i'm not sure, but maybe you're looking for something like this:
let spinner = true;
document.querySelector("iframe").addEventListener("load", () => {
console.log("iframe content loaded");
spinner = false;
});
found the implementation here
i've created a sandbox here - it fails to find the iframe on the initial load (i think due to the implementation of the sandbox site itself), but if you click refresh in the preview window, it works as expected
There is no way to add an "add-on or simple script" to add a spinner to the spreadsheet, instead modify the webpage holding the iframe tag as follows,
Add the spinner to your HTML ( you might use a framework for this)
Put the iframe tag as a children of another tag, i.e. a div, and hide it using style="visibility:hidden;".
Use the window load event to remove the spinner by using style.display = 'none' and turn the visibility of the iframe parent to visible.
The following sample use Bootstrap for the spinner.
window.onload = () => {
document.querySelector('iframe').parentNode.style.visibility = 'visible'
document.querySelector('.spinner-border').style.display = 'none'
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<div style="visibility:hidden;">
<iframe name='iframe2' scrolling='no' src='https://docs.google.com/spreadsheets/d/e/2PACX-1vQyRGpXqAZ15m-WEyI6mbCIVZrWssEZcEs8nIu7H0NdwELvvg7hDH4GOBJ7HuLMWQxhDdP8Ft9uQsPe/pubhtml?widget=true&headers=false' style='height: 1000px;width:360px;margin-right: auto; margin-left: auto; text-align:center;background:white;display:block;overflow:hidden;'></iframe>
</div>
Related
Creating a slideshow using Galleria.io APIs.
Galleria's DIV tag in my HTML page looks like :
<div class="content">
<div id="galleria">
<!-- I have used Javascript to input values in this DIV tag -->
</div>
<div id="full" style="float: right">
<!-- DIV tag for fullscreen and auto slideshow play-->
<button>full screen</button>
<button>play slideshow</button>
</div>
</div>
I have used the classic theme provided in the downloads of Galleria.io, and which has below script to call the contents in the DIV tag ("id = galleria").
<script>
$(function () {
Galleria.run('#galleria');
});
</script>
I have referrer the official documentation of Galleria for enabling fullscreen and auto slideshow.
But these documents only provide the method names, and not the example of implementing those methods. Can someone please guide how to implement these methods in script tag ?
Also, I have gone through the discussion about auto-resize in galleria
and tried to implement but having issues.
So I found the answers, and posting it as a reference in Galleria.io customization.
Everything will be the same, Galleria has parameters for different functionalities, that we have to call. For the functionality of auto slideshow, i edited the same script in the question this way.
<script>
$(function () {
Galleria.run('#galleria', {
autoplay: 3000,
transition: 'flash',
transitionSpeed: 600,
});
});
</script>
I try to make some kind of ads rotator as follows:
<html>
<head>
<title></title>
<style>
body {
margin:0;
padding:0;
}
</style>
<script>
function fillBoard() {
s = document.getElementsByClassName('slots');
board = document.getElementById('board');
board.innerHTML = s[0].innerHTML
alert(board.innerHTML);
}
</script>
</head>
<body>
<div id="board" style="width:160px; text-align: center; margin:0">
</div>
<div class="slots" style="display:none">
<!-- THE PROBLEM IS HERE -->
<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript">
<!--
hsoub_adplace = 1310003403401506;
hsoub_adplace_size = '125x125';
//-->
</script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/1/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/2/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/3/" />
</div>
<script>
fillBoard();
</script>
</body>
</html>
In the code above:
There is a div with id board to act as a board that displays contents.
The board should be filled with data supplied from other hidden divs with class name slots using innerHTML property.
To do the above a function named fillBoard() is defined in the head section of the page and then called at the end of it just before closing </body> tag.
What is happening?
The hidden divs slots works fine with divs that contain images. However, in the first div there are a javascript code that should generates ads from an ads network which it does not work.
I expect that the javascript code of the ads network should fill its div with data, then the calling of fillBoard() will just copy its content to the board div. However, this is does not occur!
I need to know how could I overcome this issue?
A live example is found here
You can just show the desired hidden div and it's usually a better practice than copying DOM content. If you make sure to only show one of the hidden divs at a time you can show the image always in the same place.
Try this to show the first "slots" element:
s[0].style.display = 'block';
Ok so after some more digging I've found the issue, although I don't have an easy solution at the moment.
The js file show.js is generating some ad content inside of an iframe for you, which you are placing in the first 'slots' div. Simple enough. When you are setting the content of the board to the content of the first slots class, an iframe is being created in the board div but without the same content.
After some searching it seems that innerHTML of an iframe will not copy the contents of the iframe if it comes from a domain other than the page domain for security reasons.
It seems to me that the solution at this point is to either show and hide the slots divs like Zhertal suggested or you can possible find some other way to physically move the content of the slots div into board, but this may still be a violation of the same security concern. I'm going to keep digging and I'll edit this answer if I find anything more.
Reference SO posts:
Get IFrame innerHTML using JavaScript
Javascript Iframe innerHTML
I'm creating a resource database that has a scrolling container on the side. Essentially, when you click a thumbnail within the container, it will load the contents of a div which will fade in and display content for that category. Each div tag looks something like this:
<div>
<h2>Category1</h2>
<p><a style="float:right" class="a_demo_four" href="/Resources/file1.pdf" target="_blank">
Download
</a>File Desc</p>
<hr/>
</div>
And will load as such:
Essentially, I want to be able to display the same exact content when I open another category on this page. I have several different categories, and want to be able to pull the code from say Category1, Category2, and so on and so forth so I can display all of them in a "View All" tab. I've attempted to use jQuery's load function as seen below:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
<h1>This is why I rule</h1>
</body>
</html>
to load the content from the original div into the view all category, but nothing shows up. Unfortunately, I have very limited knowledge with Javascript/jQuery so I'm having difficulty being able to use the same content in a different div without just copying and pasting the code over. This would also pose problems in the future when I am adding files and have to edit the code twice if I did so.
Thank you in advance!
You can keep your content in a variable like this:
var content = '';
$(document).ready(function(){
//load first in a div
$('#includedContent').load('b.html', function(result){
content = result;
//from here on, you know you have b.html data in the variable content
//and you can use it elsewhere like this
$('#anotherDivId').html(content);
});
});
If you call your code within document ready function will work.
Try,
$(document).ready(function(){
$("#includedContent").load("b.html");
});
However you will probably need to keep it somewhere as visualex suggested in order to add the content in multiple places as you require.
This is a working jsfiddle,
http://jsfiddle.net/c5SAH/show/
it loads content from
http://jsfiddle.net/gfgE8/show/
I have a page on my website called printUsers.html.
On it there is a button which prints the page using 'javascript:window.print()'.
I am also using '#media print' on the page to hide some buttons when the page is printed.
This is all working well and I have no problems here.
The problem is the following:
All the pages on the site, extend from the main page. So at the top of printUsers.html I have:
#{extends 'App/main.html' /}
This includes styles and a header which has buttons and drop-downs.
When the user clicks the print button, I want to hide all the header and buttons etc, which come from the main.html.
I tried wrapping it into a div, giving it an id and hiding it but this didn't work.
I have just started using javascript so any help would be much appreciated.
Thanks.
The CSS way
#media print
Use #media Print as you stated in your question, but include all the elements you don't want to see in your printed result, and put display:none to them. You can also apply some margin:0 auto; text-align:center; to your main content if you want to center it into your page.
Edit: You can hide any element, such as header this way:
header
{
display:none;
}
footer
{
display:none;
}
The Javascript way
Button's onClick
Your button's onclick:
Button onClick()
<button id="printThatText" name="printThatText" onclick="printPage();">Print this page</button>"
Your javascript code in the header (or at the end of the page)
Javascript
function printPage()
{
var myDropDown = document.getElementById('myDropDown');
myDropDown.style.display = "none";
//Whatever other elements to hide.
window.print();
myDropDown.style.display = "block";
return true;
}
You could also put all of these elements in an array and make a for ... in ... loop to show/hide them.
Wrap the contents with an element that encapsulates all of stuff you want to hide. In the print CSS, set the display to none.
The CSS:
#media print {
#myHeader, #myFooter { display: none }
}
The HTML:
<div id="myHeader">
<ul>
<li>
<a>My link</a>
</li>
</ul>
</div>
<div id="myContent">
<p>This will print fine</p>
</div>
<div id="myFooter">
<p>This will not print</p>
</div>
You could always use HTML5 header/footer elements!
Maybe try the opposite--print only a particular div--rather than hiding other divs: Print <div id=printarea></div> only?
I have a page with an iframe to feature the contents of the clicked tab. There are 3 tabs and 1 iframe. The sources of the contents relating to each tab clicked are formatted and coded in other html & css files.
What is another alternative to using an iframe, because I noticed that when the tab is clicked, it still shows the white background, similar to when a new page is loading?
Here's my code:
<div id="tabs">
<div id="overview">
<a target="tabsa" class="imagelink lookA" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a target="tabsa" class="imagelink lookA" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a target="tabsa" class="imagelink lookA" href="trframe.html">Reviews</a>
</div>
</div>
<div id="tabs-1">
<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0">
</iframe>
</div>
The only alternative to using IFRAMEs to load dynamic content (after the page has loaded) is using AJAX to update a container on your web page. It's pretty elegant and usually faster than loading a full page structure into an IFRAME.
Ajax with JQuery (use this and you will be loved on SO; the AJAX functions are great and simple)
Ajax with Prototype
Ajax with MooTools
Standalone Ajax with Matt Kruse's AJAX toolbox (Used to use this, using JQuery today because I needed a framework)
AJAX with Dojo (Said to be fast, but AJAX is not as straightforward)
Another alternative is to use AJAX to load the content of a tab and use a div to display the content. I would suggest that using an existing Tab library might be an option rather than trying to solve all the problems associated with creating tabs.
Maybe the jQuery UI Tab might be helpful here if you like to try it.
EDIT: AJAX example with UI Tabs.
First, the HTML will look like this.
<div id="tabs">
<ul>
<li><span>Overviews</span></li>
<li><span>Gallery</span></li>
<li><span>Reviews</span></li>
</ul>
</div>
Then make sure that you import the appropriate jQuery files:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
etc...
Then add the code to create the tabs:
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
There's an alternative to AJAX!
You can load ALL three possible contents into separate DIVs.
Then clicking on a tab will simply make the display attribute of the appropriate content's DIV "block" while making the other two DIVs' display property "none".
Cheap, easy, does not require AJAX costs for extra http request or for coding.
Mind you, AJAX is a better solution if the contents of the tabs will change dynamically based on other data as opposed to being known at the time the page loads.
You don't need script.
<ul><li>foo link<li>bar link</ul>
<div class="tab" id="foo">foo contents</div>
<div class="tab" id="bar">bar contents</div>
Plus this CSS, in most browsers: .tab:not(:target) { display: none !important; }, which defaults to all content visible if :target isn't supported (any modern browser supports it).
If you're showing content with script, always hide it with script. Let it degrade gracefully if that script doesn't run.
It's probably better to load in the content for each tab into DIVs on the same page and then switch the visibility of each DIV when a tab button is clicked using JavaScript and the CSS display property.
If you can't do that then iframe is probably the best solution. You can make the iframe background transparent, see below:
<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0" allowtransparency="true"></iframe>
You would then need to add the following CSS to the BODY element using:
BODY { Background: transparent; }
The HTML iframe is to be used to include/display non-template content, such as a PDF file. It's considered bad practice when used for template content (i.e. HTML), in both the SEO and UX opinions.
In your case you just want to have a tabbed panel. This can be solved in several ways:
Have a bunch of links as tabs and a bunch of div's as tab contents. Initially only show the first tab content and hide all others using CSS display: none;. Use JavaScript to toggle between tabs by setting CSS display: block; (show) and display: none; (hide) on the tab content divs accordingly.
Have a bunch of links as tabs and one div as tab contents. Use Ajax to get the tab content asynchronously and use JavaScript to replace the current tab contents with the new content.
Have a bunch of links as tabs and one div as tab contents. Let each link send a different GET request parameter or pathinfo representing the clicked tab. Use server-side flow-control (PHP's if(), or JSP's <c:if>, etc) or include capabilities (PHP's include(), or JSP's <jsp:include>, etc) to include the desired tab content depending on the parameter/pathinfo.
When going for the JavaScript based approach, I can warmly recommend to adopt jQuery for this.
This is jQuery example that includes another html page into your document. This is much more SEO friendly than iframe. In order to be sure that the bots are not indexing the included page just add it to disallow in robots.txt
<html>
<header>
<script src="/js/jquery.js" type="text/javascript">
</header>
<body>
<div id='include-from-outside'></div>
<script type='text/javascript'>
$('#include-from-outside').load('http://example.com/included.html');
</script>
</body>
</html>
You could also include jQuery directly from Google: http://code.google.com/apis/ajaxlibs/documentation/ - this means optional auto-inclusion of newer versions and some significant speed increase. Also, means that you have to trust them for delivering you just the jQuery ;)
As mentioned, you could use jQuery or another library to retrieve the contents of the HTML file and populate it into the div. Then you could even do a fancy fade to make it look all pretty.
http://docs.jquery.com/Ajax/jQuery.get
Something along these lines:
$.get("toframe.html", function(data){
$("#tabs-1").html(data);
});
edit..
you could prepopulate or onclick you could do the get dynamically
$("#tabs a").click(function(){
var pagetoget = $(this).attr("href");
$.get...
})
If you prepopulate could have three containers instead of the one you have now, 2 hidden, 1 display, and the click functions will hide them all except for the one you want.
The get is less code though, easier time.