I have an iframe that loads a map from CartoDB.
<iframe src='https://recology.cartodb.com/tables/condma_1_cleaned/embed_map' width='900' height='600'></iframe>
This iframe is embedded in an html presentation. When I am doing the presentation it's possible there won't be internet. In that case, it would be nice if a screenshot of the map would load instead.
How can I get a screenshot of the map to load when loading the live version fails due to lack of internet access?
Borrowing from this answer on SO you could do something like the following:
<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script id="iframe_loader">
function loadIframe() {
var iframe_element = document.getElementById('iframe_id');
if (navigator.onLine) {
iframe_element.src = 'www.CartDB_url.com';
} else {
iframe_element.src = '/local_version_CartDB.htm';
}
}
</script>
And then just before you close the BODY-tag at the end of your website put in
<script>
loadIframe();
</script>
Related
I embedded Power BI into my web page using iframe code but I would like to hide the footer with share buttons. Is there any way to achieve this?
I'm specifically talking about embed code (iframe), not public URL.
Thank you.
Typically, PowerBI returns the Iframe with it to show it was created by PowerBI, with the name embedded.
Depending on how you created it you have some options.
JavaScript with CSS to hide the footer.
If you used the UI, from the UI using this
link, as described below from the site in link
Some code to help you out: at configuration you can setup various values, and set your
footer to false
<html>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js""></script>
<script type="text/javascript">
var embedConfiguration = {
type: 'report',
accessToken: 'someToken',
id: '71.Tykt.org',
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=xxx.TYKT.org',
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
// Find the setting you want to hide and set it to False
}
};
var report;
window.onload = function () {
var $reportContainer = $('#reportContainer');
report= powerbi.embed($reportContainer.get(0), embedConfiguration);
}
</script>
<div id="reportContainer"></div>
</html>
Hope it helps!
With HTML5, is there any way in IE11/Edge to populate a sandboxed iframe (<iframe sandbox></iframe>) with HTML other than using a src url? I am looking for a solution like srcdoc which works with all other modern browsers.
Using src with a data URI is not an option according to Microsoft as it "cannot be used [to] populate frame or iframe elements." Surprisingly, this does works for me in Edge but only for data URIs with less than 4096 characters.
All other options that I have found, e.g. in Alternatives to iframe srcdoc? and Html code as IFRAME source rather than a URL do not work for a sandboxed iframe.
Assuming usage of <iframe sandbox="allow-scripts"> is desired or acceptable, a possible workaround would be using window.postMessage() with the following setup:
index.html:
<!doctype html>
<html>
<body>
<iframe onload="connectIframe()" sandbox="allow-scripts" src="iframeConnect.html" name="srcdocloader"></iframe>
<script>
var SRCDOC_HTML = '<html><body><script src="https://code.jquery.com/jquery-3.2.1.js"><\/script><script>console.log("loaded srcdoc and dependencies", jQuery);<\/script><h1>done!</h1></body></html>';
var loaded;
function connectIframe (event) {
if (!loaded) {
loaded = true;
window.frames.srcdocloader.postMessage(SRCDOC_HTML, '*');
} else {
onloadSrcdoc();
}
}
function onloadSrcdoc () {
// ...
}
</script>
</body>
</html>
iframeConnect.html:
<!doctype html>
<script>
window.addEventListener("message", handler);
function handler(event) {
if (event.source === window.parent) {
window.removeEventListener("message", handler);
document.write(event.data);
document.close();
}
}
</script>
Note that the iframe's onload event will be triggered two times. The second time will be after the srcdoc html and all its dependencies got loaded.
I have a page that I work on daily and I need to look through the page for text that has HTML of:
<tr style="background-color:#33FF00">
How can I use CSS to auto navigate to that color or HTML code when the page loads?
Is there a way?
I cannot edit the html as it's not hosted locally and I don't have access to write access, only read.
I am currently using Stylebot to modify the css for my own display purposes and want to know if I can do the same to auto navigate to that colored section.
If there is a way similar to using style bot but for HTML like userscripts etc, I am not familiar enough so if you have a workaround any tutorial would be great to show me how to implement it.
Thanks!
UPDATED
Copy and paste the code below into a text file and save it as an html file. Then open it in a browser.
This code loads the target page from the host into the 'result' element, then uses some post-load javascript to navigate to the colored tr elements. If the page requires scripts on external stylesheets, etc., these need to be loaded explicitly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.ajaxPrefilter( function (options) {
if (options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$(document).ready(function(){
var sourceUrl='https://en.wikipedia.org/wiki/Main_Page';
var sourceScript='https://en.wikipedia.org/wiki/Main_Page';
$( "#result" ).load(sourceUrl, function() {
$.getScript(sourceScript, function(){
alert("Script loaded and executed.");
});
$('html, body').animate({
scrollTop: $('tr').filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
});
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
from jQuery scroll to element
and JQuery Find Elements By Background-Color
UPDATE 2
Or, in an iFrame (but only works if you are on the same domain as the target page)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function onLoadHandler(){
var $iframe = $("#result").contents();
var trs=$iframe.find('tr');
$iframe.find('html,body').animate({
scrollTop: trs.filter(function(){
var color = $(this).css("background-color").toLowerCase() || $(this).css("background").toLowerCase() ;
return color === "#33ff00";
}).position().top
}, 100);
};
</script>
</head>
<body>
<iframe id="result" src="FRAMESOURCE" style="top:0;left:0;width:100%;height:700px" onload="onLoadHandler();"> </iframe>
</body>
</html>
UPDATE 3
If none of these work, try: 1) load your page in a browser, 2) open Developer Tools, 3) go to the Page Inspector or Elements tab, 3) Ctrl-F and search for your color string ('#ddcef2'), 4) right-click the first highlighted element in your search results and select "Scroll into view"
Try and see if that does the trick:
* {
display: none
}
[style*=background-color:#33FF00] {
display: table-row
}
I am trying to develop a program that will switch between url locations every 10 seconds and then loop back after going to the last url. Description below:
Display url1 for 10 sec
Display url2 for 10 sec
Display url3 for 10 sec
LOOP BACK TO URL (continuous loop)
I believe this can be done using settimeout and for loop. I do not have a complete understanding of settimeout and java for that matter so that is where I am currently stuck at. I have placed a code below but since I do not know how to use settimeout believe this is my first mistake.
If there is a better way to do this I am all ears. I have been trying java for 3 days because it needed to be do for a project at work so I am brand new to it and probably over my head.
<!DOCTYPE>
<html>
<body>
"urls"
<script>
var myurl;
function urls()
{
myurl=setTimeout(url1,0);
myurl=setTimeout(url2,10000);
myurl=setTimeout(url3,20000);
}
function url1()
{
<embed width="100%" height="100%" name=plugin src="http://files.asme.org/ICOMES/News/15876.pdf#pagemode=none&scrollbar=0&page=2" type="application/pdf".;
}
function url2()
{
<embed width="100%" height="100%" name=plugin src="http://www.tbp.org/pubs/Features/Su04McMasters.pdf#pagemode=none&scrollbar=0&page=2" type="application/pdf".;
}
function url3()
{
<embed width="100%" height="100%" name=plugin src="http://milproj.dc.umich.edu/publications/EngFlex_report/download/EngFlex%20Report.pdf#pagemode=none&scrollbar=0&page=2" type="application/pdf".;
}
</script>
</body>
</html>
edit:
<!DOCTYPE>
<html>
<body>
<script>
var urlList = ['http://www.google.com', 'http://www.msn.com', 'http://www.yahoo.com'];
var wnd;
var curIndex = 0; // a var to hold the current index of the current url
function openWindow(){
wnd = window.open(urlList[curIndex], '', '');
setTimeout(function () {
wnd.close(); //close current window
curIndex++; //increment the index
if(curIndex < urlList.length) openWindow(); //open the next window if the array isn't at the end
}, 2000);
}
openWindow();
</script>
</body>
</html>
It's not java. It's javascript ;)
You can do one iframe in an HTML and use javascript to change it's source every 10 seconds.
For example:
<html>
<body>
<iframe id="theIframe" src="">
</iframe>
</body>
<script>
function timeout() {
setTimeout(function () {
document.getElementById("theIframe").src= 'http://www.google.com';
timeout();
}, 10000);
}
timeout();
</script>
<html>
I am not sure this exact code will work because I just wrote it without test. But you can get the general idea. Like this every 10 seconds it will reload google. You can modify it so the websites are taken from an array or something.
Not all browsers will support opening the PDF directly in browser though. Some might want to download it - depending on plugins. If you want to render the PDF it might require external libraries.
I'm trying to embed Google Translate snippet in my website, but for some reason it is not even displayed.
I go here:
Google tools
Copy this:
<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Paste it to my webpage.
And I don't see it there.
What am I missing?
Some HTML maybe?
Here is a working example. I think you are missing "&ug=section&hl={LANGUAGE}" parameters:
My Page
Тестирование
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
http://jsfiddle.net/maxim75/H3Wkr/ - working example
In the HTML, the 'control' class element needs to be nested in the 'section' element. :)