Modernizer won't show the correct values - javascript

I'm using ie10 and have had wrong values returned from modernizr from my site, it is an internal site.
It is running and to simplify things, I have it just checking the value of hsla.
There are a lot of other features that we want to see, but to debug I have stripped it down to just look at hsla.
If I go to different sample sites, "hsla" is shown as an option.
If I go to our site ex, http://www.example.com/test.htm, "no-hsla" is shown.
I have switched out the modernizr file we are using to use one from ajax.cdnjs.com and I get the same result.
I have generated a new download modernizr with just hsla in it and same result "no-hsla".
I can copy the same exact files to a server that I hit with IP http://x.x.x.x/test.htm and it works fine and show "hsla"
this is all I have in test.htm
<!doctype html>
<html lang="en" class="no-js" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<script type="text/javascript" src="moderntest.js"></script>
</body>
</html>
Any thoughts on this?

Related

browser gives same console output even when its changed, how to fix it (Flask)?

I'm experimenting with getting my "javascript parts" seperated from my html. I followed this post on stack overflow. My goal is to have separate files for each class.
I got it working one time.
But then I keep getting the first "old" output in the browser console even when its changed.
As if it's stuck in there. I tried restarting everything, the computer ect. The other pages in my app that aren't separated works just fine.
I hope someone can help :) Thanks :)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New page</title>
</head>
<body>
<p>test</p>
<canvas id="canvas" width="1000" height="500"></canvas>
<script type=text/javascript src="{{
url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
my file main.js is in the static/js folder.
first I wrote
main.js:
console.log("new text"); // changed the text
It's likely your browser caching the .js, try opening your page in a incognito/private window (chrome/firefox), clearing your browser cache, or do a hard refresh (Shift + F5).
You can use Ctrl+F5 or Shift+F5 to reload your current page ignoring cached content.
Your issue is very probably just related to your previous data being cached by the browser in order to enhance performance and reduce the amount of downloaded data.
It's cache problem. You can use Flask-Assets extension so then whenever you make a change to your static files it will give it a unique version number. assets.%(version)s.js. Or you can just use Ctrl+r or Ctrl+F5 to purge cache.

Google Chrome doesn't offer translation for my website

Google translation icon doens't appear on a website I'm working on, and I can't find a reason for this. Should I add a specific code to enable chrome to suggest translating it?
Please note that I don't want to add Google Chrome widget, and Chrome settings are OK.
I'd like to make Chrome suggests to translate the pages of the website.
Here's an example: https://drive.google.com/file/d/1hKlPcs_HnIXApSa7jYX1pvDZigvdh9mc/view?usp=sharing
You can force the Chrome Translate dialog to show up by adding the lang tag with the language. This should work as long as the user doesn't have the settings in Chrome to never translate. Some people turn off that dialog in the chrome settings because they do not want to be annoyed by the translate dialog.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Language
sample html.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<p>这只是一个测试。</p>
</body>
</html>
Can you try adding text in another language except english and then load the page ?

Locally sourcing Javascript in HTML

Extreme beginner here guys so please explain as easily as possible.
I've read multiple variations of this and still am unable to figure it out, any help is greatly appreciated.
What I am wanting is a local environment to be able to learn HTML & javascript, but cannot get the script source inside HTML to correctly reference the .js file sitting in the exact same folder as the .html file. I am testing in a Chrome browser just referencing the .html file on my local machine via file:///C:/JavaScript/Index.html.
2 files(index.html and JS.js), both located locally on C:\Javascript
HTML Code:
<!doctype html>
<head>
<title>Title in browser tab</title>
</head>
<body>
"Text on the page"
<script src="C:\JavaScript\JS.js"></script>
</body>
</html>
-Based on what I read, if they are in the same folder I should be able to just reference <Script src="JS.js"> as there is no folder structure to look through, is that correct?
-I've also tried to absolute path via <script src="file:///C:/JavaScript/JS.js"> and related versions of <Script src="C:\Javascript\JS.js"> that do not work either.
In my JS.js file, I have nothing but alert(); to test functionality, as my reasoning for incorrect sourcing.
If I simply write <script>alert();</script> without referencing any outside source, the alert works as planned.
Thank you in advance!
I'd recommend popping open Chrome's Developer Tools to see where the issue may lie (and, if you're new to development, these are tools that are built into Chrome that will make your life so much easier).
Your assumption about not requiring a path should be correct: if you're referencing another file that lives in the same directory, omitting a full path will cause the browser to assume the path is relative (e.g. "right next to") to the current file:
<!doctype html>
<head>
<title>Title in browser tab</title>
</head>
<body>
"Text on the page"
<script src="JS.js"></script>
</body>
</html>

IE8 site keeps going into Quirk mode with JS added into the page

We have a site that's running perfectly in all browsers except IE8.
What happens is that it falls into Quirks mode forcefully by the browser due to the reason unknown to me.
And yes, it breaks the site really bad.
What's more weird is that it adds somekind of JS on its own to the code (when checked through View Source.
This is what it's showing:-
<SCRIPT language="JavaScript">
<!--
document.cookie = "IV_JCT=%2Fapchannel-lop; path=/";
//-->
</SCRIPT>
<!DOCTYPE html>
<html lang="en">
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
...
The <SCRIPT> in the start is not added by me and is being added by IE8.
I have tried the following
First line <!DOCTYPE html> and then right after <head>, I wrote <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
Adding respond
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Nothing works.
Any idea how I can stop this and just force it to load with IE8 standard mode?
Thanks
The problem is that you're adding the script before the <!DOCTYPE>.
The doctype must be the very first thing on the page, otherwise IE will go into quirks mode. (even blank lines at the top of the page have been known to affect this)
Move your script somewhere else in the page, ideally inside the <head> element, and ensure that you have valid HTML markup, and the problem will resolve itself.
IE 8 will not mangle HTML like that. Something else must be responsible.
From AJAX techniques within a Tivoli Access Manager WebSEAL Environment:
Junction cookies
Issue
When you create a WebSEAL junction using the -j option to enable
junction cookies, special HTML code is inserted at the beginning or
end of the HTTP response that sets the correct cookie path in the
browser (the location determined by the -j option). Generally, the
returned page will look similar to that in Listing 11.
Listing 11. Example of junction cookie insertion
<SCRIPT>
document.cookie = "IV_JCT=%2Fjunction_name";
</SCRIPT>
<html>
<title>Example page </title>
<body>
Rest of the document...
.
.
.
That's a pretty specific bit of JavaScript (Debugging tip: When weird variable names show up in your code and you don't know where they came from: Type them into Google), so its a reasonable bet that this is what is responsible.
It doesn't sound like there is a work around, so your options seem to come down to:
Stop using IE 8. It is unsupported by Microsoft and no supported operating system that can run it can't be upgraded to a newer version of IE (they could also be upgraded to a non-IE browser).
Stop using WebSEAL (or at least WebSEAL junctions using the -j option) since it invalidates your HTML.

Modernizr help?

I can't seem to get modernizr to work on my website. I have added the javascript files into a folder and called to them. I've also added no-js to the html but still nothing.
When I view source, it doesn't populate the html like it should.
I'm not using it for css3 elements yet so I don't need any fallback styles, I just want to be able to use the more semantic tags like header, nav, footer etc...
This is my document code:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset=utf-8>
<title></title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<script type="text/javascript" src="/js/modernizr-1.7.min.js"></script>
Ran into this problem myself. Make sure you view the page during run-time. When you view the page source, js calls are not executed and it will not replace the no-js. If you are using Chrome then use their element inspector.
It is most likely a path issue. Try temporally replacing
<script type="text/javascript" src="/js/modernizr-1.7.min.js"></script>
With
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js"></script>
Or it could be working, but it's not obvious. Keep in mind you don't see the Modernizr classes when you view the source, you need a tool like Firebug on FF or the Developer Tools on Chrome to actually inspect the post-javascript code.
An additional test would be doing something like...
.borderradius body {
background: #c00;
}
And if the background is red, then Modernizr is running.
You don't have any styles here but maybe you haven't defined your HTML5 elements as display: block? Modernizr doesn't do that by itself and so you still won't get the results you expect if you don't add that into your CSS.
For the record I had this issue too. After a long time testing I found that removing the 'Add CSS Classes' option from the custom build was causing it for me.

Categories

Resources