I am working on a JQM mobile website, and i am requaired to add support for IE8 and under using modernizr, in my project i use features like geolocation, canvas, localStorage, html5 forms and css3 design, i am trying to use webshims, which, to my understanding, support all this features but i must have missed somthing when reading the documentation because i dont think its working very well (tried the IE developer tools emulator to test it but nothing happned), here is the top of my html code:
<!DOCTYPE html>
<html clas="no-js">
<head>
<title>Ziv's car rental</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="scripts/modernizr.custom.75297.js"></script>
<script src="scripts/polyfiller.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.webshims.polyfill()
});
</script>
the "polyfiller.js" is the js file that came with the webshims,
what am i missing?
Modernizr doesn't necessarily do anything besides feature detection. For example, if you wanted to do a check in javascript for, lets say css transition support, you would do something like this:
if (Modernizr.csstransitions) {
// Do modern things
} else {
// Do old things
}
As for the classes it adds to the HTML element, that is up to you how to use them via stylesheets.
Related
I have a Chrome extension that currently uses Material Design Components, Web. I have no issues using unminified CSS, however the JS does not appear to be working correctly.
If I use the source code, there should be an animation when focusing on a text field as the example shows, but I do not experience this in my extension.
I'm really hoping this isn't some sort of security limitation by Chrome... wouldn't make sense that their browser couldn't detect and support their own framework.
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chrome Ext</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<body>
<div class="mdc-text-field">
<input type="text" id="my-text-field" class="mdc-text-field__input">
<label class="mdc-floating-label" for="my-text-field">Hint text</label>
<div class="mdc-line-ripple"></div>
</div>
</body>
</html>
The "Hint Text" should appear above the text, like the example above.
Note: I had no problem with Material Design Lite, but since that is no longer supported, I figured I'd rebuild using the modern framework.
MDC is a bit different than MDL in that the js dependent features require you to instantiate the MDC component. There are various ways to do that depending on how you are incorporating the MDC js into your project. In your html example above, you could probably add a script tag with a one-liner to instantiate the MDC textfield. Something like:
<script>
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>
You can also use mdc.autoInit() with data-mdc-auto-init markup to instantiate MDC components (see the Auto Init docs for details).
I am trying to understand what the main difference between hta and html files is. I googled it and I found this:
The main problem is that javascript is buggy. For example the
javascript: protocol does not even exist. Hta seems to prefer VBscript
modeled coding instead of the javascript model, such as
<span style="cursor:hand" onclick=go()> instead of
<a href="#" onclick=go()>. It's a windows exe so some
cross-browser/cross-platform contructs of html are simply not
supported or ill-supported. Also window resizing produces different
dimensions.
I have some interactive plots (HTML5) generated by JavaScript codes. Are they gonna be functional if I transfer them to hta files?
If you don't add any special code, the answer is no.
Usually, HTML5 doesn't work in HTA files because they are run by mshta.exe which acts like IE7 and HTML5 isn't supported in earlier versions of IE than IE9. But if you add <meta http-equiv="x-ua-compatible" content="ie=edge" /> in the head of the HTA, the HTA will act like the version of IE installed on the computer, so if the computer has IE9 or later and you add that tag, it will work. The problem with this is that if you upgrade the HTA, the <hta:application/> tag won't have any effect so you will lose all effects like icons, window properties, etc. For this reason, I prefer to not upgrade the HTA and to use workarounds instead of HTML5.
In HTA, to get the code to properly work, you must include the tag <meta http-equiv="x-ua-compatible" content="ie=edge" /> or <meta http-equiv="x-ua-compatible" content="ie=9">to get the JavaScript and HTML 5 to work completely. You may add
<HTA:APPLICATION
APPLICATIONNAME="HTA"
ID="HTA"
VERSION="1.0"
MAXIMIZEBUTTON="no"/>
Or some variant of that to get the HTA window to work properly. If you would post the code, Hamid K, that you are referring to, I would check it for you to more thoroughly answer the question.
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.
I am very new to using Intel's XDK, I already have a web app that I need to convert to an android app. I have tested the html web app thoroughly and so far, it works perfectly in the browser. The problem is that when I imported it to the XDK, it doesn't seem to work on the emulators. I searched everywhere and no one else seems to have the same problem, so it must be I'm missing something. I know you have to insert an extra javascript (which I already did) but so far, it still doesn't work. Can anybody here point me to the right direction? Thank you in advance.
My code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width target-densitydpi=device-dpi initial- scale=0.1 maximum-scale=0.5 user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<title>King</title>
<style>
html {
height:100%;
}
body {
background-color: #000000;
margin:0;
height:100%;
}
</style>
<meta name="viewport" content="user-scalable=yes, width=1024" />
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* Intel native bridge is available */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
</head>
<body>
<div style ="margin:auto;width:1024px;height:768px">
<div id="king_hype_container" style="position:relative;overflow:hidden;width:1024px;height:768px;">
<script type="text/javascript" charset="utf-8" src="King.hyperesources/king_hype_generated_script.js?7046"></script>
</div>
</div>
</body>
</html>
Maybe I'm putting the intel xdk in the wrong place in javascript?
Do what #rscohn2 suggests (make that "king" script is local to your project, avoid loading it over the network if at all possible), but also take a look at this "beefier" template which I've provided to people who are trying to turn a web app into a webview app. There are lots of comments and console.log messages to help you figure out what's going on, but, in essence:
wait for the custom "app.Ready" event to kick off your app
consider when you are loading your third-party and custom JS scripts (see the README)
It probably isn't loading the king_hype_generated_script.js. You could see that by popping up the debugger in the emulator. You can do that by clicking on the bug icon in the top left of the screen and then looking at the messages in the console tab. you probably want to make king_hype_generate_script.js a static file and copy into your project, or use an absolute URL pointing back at your server. Copying it into your project will give you better ability to work offline.
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.