I'm trying to create a local dashboard with embedded google trends charts on various topics. When I create a standard HTML file and paste the code snippet from Google Trends, the chart goes full-width but cuts off at around 300px or so: Original Code Output
I looked around and tried an iframe solution (as people have suggested in other posts here) but I'm having trouble implementing it. I'm pretty new to using iframes and advanced elements/tags.
Here's a link to the code I customized based on other examples I've seen on here: https://drive.google.com/file/d/1w6Dnyk0h4ktJ7KaRz-yrpqVhlHmhWVp-/view?usp=sharing
Here's what the rendered code looks like when I open the file locally in my browser:
Unexpected Results from Code
This might be a stupid question, but even so, I'd love to get some help! Thank you!
Please find the code snippet below, I tried to solve the problem that you are having in paragraph one, Hope this solution works for you
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
border: 1px outset lightblue;
background-color: lightgray;
text-align: left;
}
</style>
</head>
<body>
<h1>Data Tracking</h1>
<h2>COVID-19 Data</h2>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/2431_RC04/embed_loader.js"></script>
<script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"/m/03376x","geo":"GB","time":"today 5-y"}],"category":0,"property":""}, {"exploreQuery":"date=today%205-y&geo=GB&q=%2Fm%2F03376x","guestPath":"https://trends.google.com:443/trends/embed/"});
</script>
<script type="text/javascript">
document.getElementsByTagName("iframe")[0].addEventListener( "load", function(e) {
this.setAttribute('height','450px')
} );
</script>
</body>
</html>
Related
Im looking to figure out how to compile a couple of html pages into one page. like if i made a triangle in one html page, how would i link it with another html page that has a rectangle for example so that they both show up in one page. of course im not trying to figure out how to do this specifically but i want to generally know how to do it.
With jquery you can do it like so:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("#includeContent").load("fileName.html");
});
</script>
</head>
<body>
<div id="includeContent"></div>
</body>
</html>
source: https://www.codegrepper.com/profile/abutahir
Newbie question from a UX designer been trying to get this working for 2 days now.
I am trying to test out matthew dove's inject script in codepen
https://github.com/Matthew-Dove/Inject
I have copied the raw github file using jsdelivr into the Pen settings. When I click on the eye icon I can see the .js file.
I have copied the example code provided by Matthew into the html panel.
But as you can see in the image above the website does not get injected.
My codepen is https://codepen.io/lisatw/pen/oNXxgMR
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1,width=device-width" name="viewport">
<title>Inject</title>
</head>
<body>
<h4>Below this heading the world's first website will be injected</h4>
<div data-inject-src="http://info.cern.ch/" style="height: 175px;"> </div>
<h4>Above this heading the world's first website will be injected</h4>
</body>
</html>
I have tried with and without the call to the .js library
<script src="./inject.js"></script>
Any help mightly appreciated.
When you add a script on CodePen by URL, this URL will be injected as is before </body>. There is no need to explicitly adding script like this:
<script src="./inject.js"></script>
Because right after that, CodePen automatically adds another script:
<script src="https://cdn.jsdelivr.net/gh/Matthew-Dove/Inject#master/src/inject.js"></script>
But the code doesn't work for another reason. This issue applies even to Matthew's https://rawgit.com/Matthew-Dove/Inject/master/src/example.html example, yahoo APIs (https://query.yahooapis.com/v1/public/yql) under the hood no longer available. https://twitter.com/ydn/status/1079785891558653952
Unfortunately, there is nothing you can do about it.
I have a processing program which I want to display on a browser in an html file. I found an instruction on https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/. It still does not show up in my webpage. I also tried it with the same code from the instruction and it still does not show up. I am using chrome and my html code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Bitmap?</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<h1>Text</h1>
/* #pjs preload="Karte_schweiz_zentriert.jpg","bitmap_zentriert.jpg"; */
<canvas data-processing-sources="bitmap_map_comparison.pde"></canvas>
</body>
</html>
I have the .html file, processing.js, the two .jpg pictures and the bitmap_map_comparison.pde processing code in one folder called bitmap_map_comparison.
Does anyone know where the problem is?
You are using src incorrectly. Unless you have ProcessingJS in the exact same folder as the program, it will not import as it does not exist. Use this instead:
<script src="https://cdn.jsdelivr.net/processing.js/1.6.6/processing.min.js"></script>
Edit: I'm just now realizing that I'm 3 years late and this probably won't help anyone.
Subject solved! The answer is below.
Good morning, everyone!
So that's it, I'm telling you my problem. I currently have to create a small script allowing me to retrieve the tags from an HTML file and drop them to another HTML file. I had a possible idea to do this in VBS but without much success for the moment.....
I also thought about doing this with a split but also without much success...
If you have examples of scripts, I'm a taker!
Thank you.
I solved my problem!
I relied on the code that was provided to me and that was removed and I followed the jQuery doc;)
Doc link: http://api.jquery.com/load/
My code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script>
$(function() {
$("#PremierTest").load("file.html #test1");
$("#DeuxiemeTest").load("file.html #test2");
$("#TroisiemeTest").load("file.html #peutetre");
});
</script>
<div id="PremierTest">
</div>
<div id="DeuxiemeTest">
</div>
<div id="TroisiemeTest">
</div>
</body>
</html>
Thank you to all of you :)
I'm using foundation.min.css in my project.
Every time I load the above in my HTML file, my browser tries to fetch the fonts online.
But the strange part is that it works even if there's no internet access.
I need to know:
How to disable foundation from fetching the fonts online?
Why there's no change in functionality even if it gets loaded?
How to edit this to remove online fetching functionality without harming the original file? foundation.min.css code:
#import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
HTML code:
<!doctype html>
<html ng-app ng-csp>
<head>
<link href="styles/foundation.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="libs/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<style>
body {
padding: 10px;
overflow: auto;
}
</style>
</head>
<body>
<div>
<div>
<h3>Sample Application</h3>
<input type="text" ng-model="name" placeholder="Your text here..">
<h1>{{name}}</h1>
</div>
<button>Submit</button>
<table>
<tr><th>Name</th><th>Age as on 1/1/2014</th></tr>
<tr><td>Sourabh Sharma</td><td>21</td></tr>
<tr><td>Shourya Sharma</td><td>23</td></tr>
<tr><td>Vinay Kumar</td><td>18</td></tr>
</table>
</div>
</body>
</html>
When your offline, removing the web-font import will not prevent the font from displaying if you have the font on your computer. It will only prevent the font from displaying if its viewed by someone who doesn't have the font installed.
If at some point you plan to use the fonts then leave the #import alone and just add an override that you can easily toggle on and off.
body { font-family:arial,sans-serif !important; }
If you only want to affect specific fonts and not the entire document then just search and replace in your editor of choose for the font-family declaration you want to replace.
How to disable foundation from fetching the fonts online?
remove the following code from foundation.min.css (you've mentioned above)
#import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
Why there's no change in functionality even if it gets loaded?
because it describes the required css locally