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).
Related
So I just discovered the bootstrap and I'm trying to implement it into my small webpage/app so that I can make my form/console box more visually appealing.
After integrating bootstrap as an external resource in jsfiddle, the prototype of my app/page still works. See:
code to make the red box go away
jsfiddle
As you can see, the jsfiddle version of my app is working properly
But when implementing bootstrap into the actual site, everything is out of wack...
Actual site
As you can see, the main image and output of text is completely gone and the structure of the form/console is also gone.
Can anyone explain what's going on here?
Am I integrating the CSS file incorrectly or am I just implementing bootstrap incorrectly, in general? Here's some the of the HTML file uploaded to the server:
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
...
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="textualizer.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Or does it have something to do with the CSS selectors and maybe they get altered after integrating bootstrap and that's why it's not working in the actual site? I'm totally lost here as to why it works in the jsfiddle but not with the actual site. (usually when I'm completely lost on something of this magnitude, the answer ends up being the most simple thing that I just happen to overlook)....
As you can see in bootstrap docs, it has some markup with css classes to get what you wanted. example, <div class="container"> </div>, <button type="button" class="btn btn-default">Submit</button> etc. It will not get applied automatically to your html page by just adding the css reference. Since you used your custom css styling in jsfiddle it works fine. However, since you have not used your custom css in your website, it will render as plain html markup without any styles.
Hence, please change the markup with bootstrap layout and classes for your website and see the result. If you wish to override colors, etc, you can use a custom css file just after the bootstrap core css file as:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mycustomstyle.css">
You can make overrides to the bootstrap core styles in mycustomstyle.css file. Just read bootstrap docs thoroughly to get an idea about using it in a website/web application.
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.
I want to get startet with dojo.
Therefore I am useing their tutorials: http://dojotoolkit.org/documentation/tutorials/1.8/hello_dojo/
The simplest tutorial displays this page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
data-dojo-config="async: true"></script>
</body>
</html>
I now open the page (tried both localy and hosted version on their page).
And when I write
dojo.query("h1")
in my firebug console I get the message:
ReferenceError: dojo is not defined
Please help
This question is lacking a correct answer. The reason this is not working is because you enabled async mode. What this actually does is that the Dojo core will be loaded asynchronously.
The Dojo core is the part of Dojo that is loaded automatically when you load the dojo.js file. It sets a global variable called dojo which contains basic functionality like the dojo.query part.
Your problem is that you're actually not waiting for the core to load. Because the core is not loaded, dojo will be undefined, giving you that error.
You should only use async mode when using the AMD loader (require()), if you don't want to use it (legacy mode), you just put async to false. But this mode is actually deprecated and will be removed in Dojo 2.0.
The other solution is to use the AMD loader (asynchronous module loader), the proper syntax to this is:
require([ "dojo/query" ], function(query) {
query("h1");
});
In this example you might have the chance that the DOM is not loaded yet, so the best answer is to wait for the DOM to load as well, resulting in:
require([ "dojo/query", "dojo/domReady!" ], function(query) {
query("h1");
});
You're indicating that it's working when you use the protocol implied URL. However, this is not true. The only reason why it suddenly is working is because you left the async property away, which defaults to false.
Unlike Christofer said, the legacy mode is still available, but it's deprecated.
Agnes' answer will work because because it's using the AMD loader. However, combining legacy code and the new syntax doesn't look well. If you're choosing for AMD you should put everything in AMD and not only certain parts.
Having no previous experience of Dojo, I read through a bit of the documentation. Especially this part, talking about the "Modern Dojo".
It turns out, as of version 1.7, you can no longer just load dojo.js and expect to call dojo.something. With the "new Dojo", that is no longer possible. This is why you get dojo is not defined.
For more info, read through the updated documentation on how to get started, but here is a simple hello world:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<link rel="stylesheet" href="../../../resources/style/demo.css">
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load dojo and provide config via data attribute -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>
<script>
require(["dojo/dom", "dojo/domReady!"], function(dom){
var greeting = dom.byId("greeting");
greeting.innerHTML += " from Dojo!";
});
</script>
</body>
</html>
If you like to use the old way, I guess you could reference a version of Dojo prior to 1.7, but using a legacy version is rarely a good way forward, so I recommend that you learn the new way of doing things instead.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo- config="async: true"></script>
</head>
<body>
<script>
require(["dojo"], function(dojo){
dojo.ready(function(){
//Your code here
});
});
</script>
</body>
</html>
are your sure your source for dojo is in "//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" because your folder structure look like in googleapis folder which is "http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
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.
Do you know any method to optimize this HTML Code to IE6 or 7 (or 8) without adding any HTML elements, or the IE is skipping all the HTML5 elements?
If i just want to format elements with CSS, - i dont want to use other features - is the document.createElement("nav") DOM element create enough to scam IE and make a plain HTML document?
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>title</title>
<link type="text/css" rel="stylesheet" href="reset.css">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<header>code of header</header>
<nav>
code of nav
</nav>
<section>
code of gallery
</section>
<article>
code of article
</article>
<footer>code of footer</footer>
</body>
</html>
Thank you.
More info about DOM create elements in IE6, IE7 and IE8 with html5 enabling script ยป here
This code should work fine with IE6. Though, you may want to define your elements in your stylesheet to give them the properties you are looking for. Something like this:
header, footer, nav, section, article {
display:block;
}
EDIT: Oops. I am wrong about this. Shouldn't have posted so quickly. Reading this (which you probably just read as well): http://blog.whatwg.org/supporting-new-elements-in-ie
It appears that the Javascript hack you indicated above may be the only way to get these elements to render properly.
This script looks to be pretty handy and may solve your problem nicely, though I have not tested it: http://remysharp.com/2009/01/07/html5-enabling-script/
IE8 does not support html5, just some random bits and pieces of it.
IE6 or 7 even less.