jQuery Mobile - Chrome stuck loading - html

I started to learn jQuery Mobile.
I created basic website which is working fine in Firefox.
However, it's not working in Google Chrome. It is stuck in "loading".
How I can fix this issue? I use latest stable Firefox and Chrome.
http://s12.postimg.org/mfdcx8mu5/chrome.png
Source code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
Content of the document......
</body>
</html>

It happens when you try to open local html files by "file:///..." interface. Once you upload your html file to any http server the issue is gone.

Related

Why doesn't my Angular app display images?

I created a simple html file which should display svg image:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<img src="D:/Angular/hello-world/node_modules/bootstrap-icons/icons/star.svg">
</body>
</html>
It displays fine in Google Chrome but Firefox displays nothing at all but that's another issue...
When I'm running exactly the same code but in an Angular project inside index.html Google Chrome shows the "couldn't load" image. Does somebody know why in a pure html file it works but when running from Angular project it stops? And why firefox displays nothing?
For an Angular app, images need to be in a specific folder for it to be able to find said images. Move (or copy) the image to src/assets and use the path assets/star.svg.

What is the best approach to embed a hosted React application in to another non React site?

I have an entire React application that I am hosting on AWS. I want to embed this application in to another non React site. Currently I have it iframed in and it works fine.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
</head>
<body>
<iframe src="https://testlink.cloudfront.net"></iframe>
</body>
</html>
I have seen examples in the React docs around implementing individual components without iframes but nothing around entire hosted applications.
Idealy I will be able to do something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
</head>
<body>
<div="app"></div>
<div="app2"></div>
</body>
</html>
What's the best approach to do this or am I best to just deal with iframes?
I had to integrate multiple react apps into a cake php framework.
Place the final bundle in webroot of the hosted site e.g under /react.
Then just include the final bundled script tag in the html.
You will have to handle the routing to the app on the hosted site.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
...
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="ReactAppDiv"></div>
<script type="text/javascript" src="/react/main.js"></script>
</body>
</html>

Using Autodesk Forge in a web component

I am trying to create a webcomponent that includes the forge viewer. Im sadly running into an issue where the forge viewer fails to properly load the lmvworker and the allstrings.json
It looks like the viewer has problems loading them when used into a webcomponent: viewer3D.js:40122 GET https://stacksnippets.net/lmvworker.js 404 (Not Found)
The viewer is fetched from developer.api.autodesk.com
To properly see the error open the inspector.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Core</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.14/webcomponents-hi.js"></script>
<link rel="import" href="https://raw.githubusercontent.com/zedero/forge-webcomponent/master/bim.html">
</head>
<body>
<bim-viewer></bim-viewer>
</body>
</html>
Webcomponentjs still new to me, but manually loading lmvworker.js causes some problems. Can you try removing this line?

Website Not Displaying in Firefox, IE or Chrome

I'm using an FTP, and added some simple code to a website. On my desktop within this server, I can't view the content. I've tried Firefox, IE and Chrome. On my phone I can, and tech support could also view the content. I've cleared all cached data, but still nothing. Does anyone have any suggestions?
When I type in www.site.com/index.htm, the content will display on the desktop. When I just type in www.site.com, it won't. When I type in www.site.com on my phone, it will display.
This is the code displaying on my site:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Milani Reviews</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>fasdfaskl</p>
</body>
</html>

Google Maps Application doesn't start anymore

My map worked fine until recently. The HTML is using a javascript and css file loaded from Google Drive to display. It seems that this is the problem, because when I load these files directly from the computer, it works. Here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Atlas</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" href="http://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/style.css" rel="stylesheet" media="all" />
<script src="https://www.google.com/jsapi"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBkcSHRlpwYgUpLlFXSC4hC73QCCcKNh2Q&sensor=false&libraries=geometry&language=ro"></script>
<script src="http://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/harta.js"></script>
</head>
<body>
<div id="map"></div>
<div id="elevation_chart"></div>
<div id="legenda"></div>
</body>
There was a universal problem with public-hosted html files hosted on Google Drive on 9/17. They were aware of the problem and as of today have fixed the issue.
If your map still doesn't work, try uploading your index.html file to the Drive, delete the old one, and refresh. That worked for me this morning.
See this thread from Google Groups on the issue.
Also, as of Monday, Google has reported several issues with Drive on it's Apps Status Dashboard.