I am trying to make a local html file so that I can embed Cryptowat.ch's embed API into a desktop application through a webview.
I have found an NPM package that demonstrates how to use the API, and it seems really easy. It even comes with a sample JSFiddle.
Before digging into any of the customization I simply copied the JSFiddle to a local file:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style>
#chart-container {
width: 550px;
height: 186px;
}
</style>
<div id="chart-container"></div>
<script type="text/javascript" src="https://static.cryptowat.ch/assets/scripts/embed.bundle.js"></script>
<script type="text/javascript">
function loadChart() {
var chart = new cryptowatch.Embed('gdax', 'btcusd', {
timePeriod: '30m',
width: 550,
height: 186
});
chart.mount('#chart-container');
}
window.onload = loadChart;
</script>
</body>
</html>
It works fine in the JSFiddle, but it doesnt work in ANY browser I've had installed. On Chrome, I see the chart, but no data and the page becomes unresponsive. On Firefox I only see a black square. On Internet Explorer, it's just a blank page.
Is there something obvious I'm missing?
There simply seemed to be a momentary blip in the API.
I was experiencing the exact same issues as you described, using your above code.
Without modifying the code at all, it now appears to be working correctly.
Related
I'm trying to use d3-graphviz in a very basic html page to render a graph for display. However, nothing ever renders. I worked my example down to the exact content of the "basic example" from the documentation and still nothing renders. Here is my page content which is exactly the same as https://bl.ocks.org/magjac/a23d1f1405c2334f288a9cca4c0ef05b which is referenced from https://github.com/magjac/d3-graphviz
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/#hpcc-js/wasm#0.3.11/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz#3.0.5/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
d3.select("#graph").graphviz()
.renderDot('digraph {a -> b}');
</script>
If I load that file (chrome, firefox, or safari) then I just get a blank page. I can throw in HTML above the <div> which renders, but the graph doesn't render. Any ideas what I'm doing wrong?
This code runs if I set up a local web server and access it. To do the same, you'll need to set up a web server.
in my website i have embedded accuweather widget:
<div id="awcc1459281264171" class="aw-widget-current" style="float:right; width: 479px; height: 180px; margin:12px;" data-locationkey="275174" data-unit="c" data-language="pl" data-useip="false" data-uid="awcc1459281264171"></div><script type="text/javascript" src="http://oap.accuweather.com/launch.js"></script>
today i realized that i didnt pay last internet provider bill and instead of lanunch.js i got this stuff loaded:
<html>
<head>
<meta http-equiv="refresh" content="2; url=https://ebok.upc.pl/blokada">
<script type="text/javascript">
setTimeout("document.location='https://ebok.upc.pl/blokada';", 1000);
</script>
</head>
<body></body>
</html>
saying internet connection has been blocked. Unfortunatelly this replaced by provider file is generating error on my webpage, and makes it non functional:
Uncaught SyntaxError: Unexpected token < launch.js:1
question is - what would be the best workaround for that? mean how to disable widget if there is no internet connection etc?
thx for all responses
I have the following example:
<style type="text/less">
#bg: black;
#fg: white;
body {
background-color: #bg;
color: #fg;
}
</style>
<script type="text/javascript" language="JavaScript"
src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.js">
</script>
<title> test </title>
</head>
<body>
test
<script type="text/javascript" language="JavaScript">
alert("test");
</script>
</body>
</html>
It shows a JavaScript alert and white text on black ground in Firefox, Chrome and Opera. For some reason, it does not work in IE11: The alert is being shown, but the LESS parsing does not happen. I made the IE11 Developer Tools break on all exceptions, but nothing seems to go wrong.
The alert is here because I was worried that Internet Explorer might not be executing scripts at all, but this is clearly not the case.
Btw, I also tried this with the earlier version
https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js
instead of the one from cdnjs.cloudflare.com, no luck either.
As far as I know, LESS should be supported on IE11. I would be very grateful if anyone had any idea why it is not working.
Edit It seems like this may be a problem with my internet explorer configuration. I am on a Windows 2008 R2 machine with all my Internet Explorer settings at default.
Place your LESS code after the <script>tag.
<script type="text/javascript" language="JavaScript"
src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.7.3/less.js">
</script>
<style type="text/less">
#bg: black;
#fg: white;
body {
background-color: #bg;
color: #fg;
}
</style>
<title> test </title>
If you place it before you include less.js the browser doesn't know what to do with that piece of code. That is why it doesn't get parsed.
Another approach: remove language="JavaScript" on all <script> tags as the attribute has been deprecated.
I have a JavaScript code that I got from the site: http://www.micahcarrick.com/change-image-with-jquery.html I only modified the name of the images as to use .png files I have. The issue is if I open this in a web browser locally, then when I click on one of thumbnails called django.gif I am directed to the actual image rather then the new image replacing the other. However, if I put this .html script on a Godaddy.com website and go to it with the same web browser it does work correctly just like the original site: http://www.micahcarrick.com/code/jquery-image-swap/index.html . I notice that at the site I got this code from the author mentions that "The thumbnails are links to full size versions of the images. If a user does not have JavaScript, the links still go to the large image." Does this mean I don't have Java Script? I can run other simple JavaScript codes locally. Why does this work when I put it on a site, but does not work when testing locally, even when using the exact same web browser? Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example: Change Image with jQuery</title>
<style type="text/css">
body { width: 600px; margin: auto; }
#imageWrap {
width: 640px;
height: 420px;
background: url('ajax-loader.gif') center center no-repeat;
}
</style>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
</head>
<body>
<h1>Example: Change Image with jQuery</h1>
<p>
Main image is replaced using jQuery when a thumbnail is clicked. See full
description at <a
href="http://www.micahcarrick.com/change-image-with-jquery.html">Change
Image with jQuery</a>
</p>
<a href="bidu.png" class="thumbnail"><img src="django.gif"
alt="Image 1"/></a>
<a href="athex.png" class="thumbnail"><img src="django.gif"
alt="Thumbnail 2"/></a>
<div id="imageWrap">
<img src="bidu.png" alt="Main Image" id="mainImage"/>
</div>
</body>
</html>
Thank you,
Tom
This line right here is what's causing your issues:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
The "//" before the URL tells the browser to use the same protocol as the page is, and when running locally, the protocol is going to be "file:" which the browser will use to look into your local drive to find the jquery library (which it won't find, thus breaking the page). To fix this, prepend "http:" or "https:" to the URL so it looks like
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
I see two problems.
1. Your script tag src attribute for jQuery will not locate the correct resource. Running locally, this syntax (//ajax...) will resolve as file:///ajax.googleapis.com/..., which is not where jQuery is. Try putting a http:// or https:// in front of it.
2. You're using a deprecated jQuery function. .live() is not in version 1.6.2 - you need to use .on() instead, like so:
$(".thumbnail").on("click",function() { ... });
That should work.
Hope this helps.
change the src of the script tag to include the http: protocol
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
This question already has an answer here:
Plugin implementation issue with jQuery
(1 answer)
Closed 9 years ago.
Here is my problem. There's a nifty looking plugin here http://lab.smashup.it/flip/ which flips things around. I managed to implement it, but for some odd reason I'm only getting the first half of the animation rendered, the second part is just invisible (or hidden) and then it jumps to the end. To make things even more fun, everything was working fine at some point but then suddenly not. I of course backtracked as far back as possible back to when things were fine, and same problem again. I can't seem to locate the source of the problem. If someone could just please help me out by testing out the plugin and telling me if they managed to get a full animation rendered. For my HTML I based it on the source code of the plugin demo page to make sure, but to no avail.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test#0935</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load jQuery
google.load("jquery", "1");
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="JS/jquery.flip.js"></script>
<script type="text/javascript">
$(function() {
$("#id1").bind("click", function() {
$("#flipo").flip({
direction: "bt"
})
return false;
});
});
</script>
<style type="text/css">
#flipo {
width:100px;
height:70px;
background-color:lightblue;
margin:20px;
}
</style>
</head>
<body>
<div id="flipo"></div>
<div id="id1">left</div>
</body>
</html>
For those of you who recognize this problem, I did try to avoid posting a new thread until I was advised to do so as no one was reading the old post. I've also flagged my initial post for deletion.
Nothing wrong with the basics of what you posted, I set up a quick fiddle and it worked fine, but that was when I noticed that you have not included your JS correctly. I think the issue is with that.
First you are pulling in jQuery from google using google.load. Then you are getting a (potentially different) version from jQuery.com. Also, flip relies on jQuery UI, and I can't see you importing that anywhere in the html snippet you posted.
Why don't you try this and get rid of the google.load and jQuery.com sources and see if that works.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="JS/jquery.flip.js"></script>
Demo Fiddle
This plugin depend's on jquery and jqueryUI, include both in your code