I'm having a bizarre situation here where my external site files, both JavaScript and CSS, are being interpretted as somehow corrupt on Safari browsers. The same site looks fine in Internet Explorer, but on Safari the javascript and css are being completely ignored. If I look at the files through the Inspector, I can see that Safari views these files as containing junk characters -- either asian symbols or square boxes. When I navigate directly to the files, however, they appear just fine. See the site below, viewed in Safari 5, for an example:
http://amsoell.com/dch/castlemoore
If I embed the same exact CSS or JavaScript into the HTML itself, it renders perfectly. I don't know if this is a server issue or something in my CSS, but I'm at my wits end here.
I checked your website for validation and it's not valid. But the most interesting thing is that your enconding is utf-16le. You should put your encoding to utf-8. Just put the following line in your <head> section:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
Include the charset="utf-8" parameter in your <script> and <link> tags:
<script type="text/javascript" charset="utf-8" src="script.js"></script>
<link rel="stylesheet" type="text/css" charset="utf-8" href="style.css">
The problem can be solved by saving the html page in "Windows-1252 Encoding".
Related
I am trying to include 5 javascript files which I have written to an HTML file.
However, there is an error message that the files are fail to load.
Source code:
<html class="gr__2k8dc"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Toilet partition tool</title>
<link rel="stylesheet" href="C:\Users\Downloads\3dmodelproject\files\style.css">
<script src="C:\Users\Downloads\3dmodelproject\files\three.js"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\STLLoader.js.download"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\OrbitControls.js.download"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\resources.js.download"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\toiletpartition.js.download"></script>
</head>
The error message:
Any clue what's wrong with the path format? Thanks!
As mentioned elsewhere, your paths are absolute paths, rather than relative paths. Essentially what this means, is you've hard-coded the locations of your assets (scripts/css/images/etc), making it very difficult to deploy the site, or move the location of your site on your local drive.
In addition, it causes problems with cross origin requests (the actual error you're seeing). Using a relative path resolves that issue, as you're guaranteed to be referencing the same origin.
You mentioned in your comment, the html file is: C:/Users/Downloads/3dmodelproject/files/Toiletpartitiontool.html
Thus, the relative location here is
C:/Users/Downloads/3dmodelproject/files
In order to then reference
C:\Users\Downloads\3dmodelproject\files\three.js, you simply need to use three.js.
Thus, your page should be:
<html class="gr__2k8dc">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Toilet partition tool</title>
<link rel="stylesheet" href="style.css">
<script src="three.js"></script>
<script src="STLLoader.js.download"></script>
<script src="OrbitControls.js.download"></script>
<script src="resources.js.download"></script>
<script src="toiletpartition.js.download"></script>
</head>
<body>
<!-- Content here -->
</body>
</html>
The reason is that only IE/Windows is happy with C:/
Try changing the drive to a series of ../
Each one of those will raise the folder level one. Eventually it will get to the root of the drive/domain and then go down the folders to your file. Depending on where you are running the html file will decide how many ../ to add. Linux and Mac don't use windows drive letters so this is also cross OS compatible.
The link would become:
../../../../Users/Downloads/3dmodelproject/files/STLLoader.js.download
I'm 90% sure this is the problem you are having
The reason may be your \, which the html requires /
But bonus:
Can you make the scripts to be the relative path to the index.html?
Make the path to be like <script src="/3dmodelproject/files/three.js"></script>
Javascript strings with non-ASCII characters work as expected successfully when placed inside a tag in the HTML file, e.g.
<script type="text/javascript">
alert('tänään');
</script>
That is, an alert window pops up with the word 'tänään'.
However, if the code linked externally in a javascript file, e.g.
<script src='js/alert.js' type="text/javascript"></script>
the 'ä' characters are replaced with null-glyph characters ('t�n��n'). Using the charset attribute does not fix it:
<script charset="UTF-8" src="js/alert.js"></script>
Why is this happening? What fixes are available?
While adding a charset indicator for the browser, like:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
All text based files (html, js, and oh what the heck css) should be converted to utf-8 as well.
Keep in mind to convert the files to UTF-8 without BOM to avoid those annoying empty lines that will appear on some browsers.
I'm new to javascript and trying to add this http://codepen.io/jklm313/pen/EarFd great map scrolling effect to my site. Css anf HTML read fine, but the js part doesn't want to work. Even if I put the js code in my html. This is the very typical beginning of my html:
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
I've searched for clues, but I can't seam to find the issue, is the code outdated or should I add something more? Thanks in advance
Test and make sure you are getting the js file loaded into the page. One method would be to place at the top of the script.js file :
alert('loaded');
If you get the alert box then you you have the correct path. If not then you know it is likely a path issue. You may need to make sure your file is in the same directory or else specify the directory in the src
I just glanced at the link and notice it is using the jquery library. Go to jquery.com to learn how to include that js file as well
I had a great working PhoneGap mobile web-app project, then my laptop died. I had all the files saved to the cloud, so no trouble with code loss, but now I've been trying to rebuild the project and that's where the trouble is.
I've set the whole thing up again, and it's loading alright, all the html elements are there as coded, but the jQuery Mobile css doesn't seem to be including on any of my pages, given that all I see is a white page with normal underlined blue links. Very unattractive.
Here's the beginning of my code on each page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
Which should be alright, I would think...it worked before, anyway.
What's missing? I'm inclined to think it's somewhere in the configuration rather than the code, give the circumstances.
Should there be some sort of cordova.css file? Because there isn't one, and I thought there used to be. (About to Google that...)
Have you checked that code.jquery.com is in ExternalHosts in your phonegap.plist (or cordova.plist)?
Please try whit this,
https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.0/jquery.mobile-1.1.0.min.css
Hope this helps. :)
I am trying to use Google Chrome Frame in my Django app.
Inserting <meta http-equiv="X-UA-Compatible" content="chrome=1"> into the header doesn't do the trick.
Right now, this is what my header looks like:
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Amuse Me</title>
<link href='/static/style.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="/static/jquery-1.6.0.min.js"></script>
<script type="text/javascript" src="/static/base.js"></script>
</head>
Any suggestions?
Your page might be cached as suggested in quirksblog:
Cache
When I was doing research I used one
test page and constantly changed the
tags in the . The problem
was that IE/Frame seemed to be caching
not only the page, but also in which
rendering engine it should be shown.
Therefore a simple page refresh won’t
help you here.
Fortunately Twitter user jdalton came
up with a solution: simply append a
pseudo-query such as ?123 to the page
URL. That bypasses the cache and
forces the browser to re-evaluate the
tags.
Open your code in Google Chrome's developer tools and look for html errors, and check your resource headers.