I am trying to have my buttons styled with AngularJS Material. Specifically, I want to use md-button with class md-raised.
However, when I try this my button looks like regular text rather than an md-button. What could I be doing wrong?
Here is my index.html where I am trying to place the button.
<!doctype html>
<html>
<head>
<!--Angular scripts-->
<link href="./node_modules/angular-material/angular-material.css" rel="stylesheet" />
<script src="./node_modules/angular/angular.js" type="text/javascript" ></script>
<script src="./node_modules/angular-animate/angular-animate.js" type="text/javascript" ></script>
<script src="./node_modules/angular-aria/angular-aria.js" type="text/javascript" ></script>
<script src="./node_modules/angular-material/angular-material.js" type="text/javascript" ></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="node_modules/angular-resource/angular-resource.js"></script>
<script src="mainController.js"></script>
</head>
<body>
<md-button class="md-raised">Button</md-button>
</body>
The reason why it didn't appear is because you forgot to initialize your app!
// Initialize your app here and add `ngMaterial` dependency
angular.module('App', ['ngMaterial']);
<!-- Also add your ng-app directive -->
<html ng-app="App">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>
<body>
<md-button class="md-raised">Test</md-button>
</body>
</html>
I was able to accomplish this by adding
<div class="md-button md-raised">
<p>Button</p>
</div>
instead of
<md-button class="md-raised">Button</md-button>
I'm not sure why this works though, and any feedback would be greatly appreciated.
Related
angular java script shows {{message}} in browser.i tried all possible ways but still sucks.
var myApp=angular.module("mod",[]);
myApp.controller("con", function($scope){
$scope.message = "hhhhhhhh";
});
<html ng-app="mod">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="sample.js"></script>
</head>
<body ng-controller="con">
<div>
{{message}}
</div>
</body>
</html>
Include your sample.js at the end of the body (DOM Manipulation), plus, it's
<script src="sample.js"></script>
not
<script type="sample.js"></script>
See the following plunker that works with your code :
https://plnkr.co/edit/jwkd4hzsUrqNQYmG0jCH?p=preview
So maybe you don't have the angular.js file at the following location bower_components/angular/angular.js
So use a CDN instead
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
You can use the ng-cloak directive.
<html ng-app="mod">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="sample.js"></script>
</head>
<body ng-controller="con">
<div ng-cloak>
{{message}}
</div>
</body>
</html>
I hope this is not a stupid question/issue. I am trying to use fullcalendar for the first time. I am running this from flask on a local server. Here is the code I am attempting to use, based on examples I have found from some googling:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script>
$(function() {
$('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
So when I run that, it just gives me nothing.Am I missing a resource?
You never load the fullcalendar into the div. Do it like this:
<!DOCTYPE html>
<html>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
$('#calendar').fullCalendar();
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
This way you load it as soon as the document is ready.
Can you check your css link? I think It should end with fullcalendar.min.css not fullcalednar.min.css.
Here's the codepen: http://codepen.io/jjmartucci/pen/DlCmy
I'm using Brackets. I copied and pasted the CSS into my style.css, the JS into my init.js, and the HTML part into the body of my index.html...
I also modified the head of my HTML document to say:
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-scenario.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-sanitize.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-resource.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-resource.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-mocks.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-bootstrap-prettify.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-bootstrap-prettify.js"></script>
</head>
and I'm still struggling to get it going. The CSS seems to be working, but the functionality is messed up. Is there any obvious step I'm missing?
You're loading way too many instances of the same scripts. And your init.js needs to come after your 3rd party libraries.
Try this:
<head>
<!-- style -->
<link type="text/css" rel="stylesheet" href="css/style.css" />
<!-- libs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-scenario.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-resource.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-mocks.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-bootstrap-prettify.min.js"></script>
<!-- app -->
<script src="js/init.js"></script>
</head>
While copying javascript from codepen, it may be adding some addition checks whilst compiling the coffeescript. So just use http://js2.coffee/ in order to convert the coffeescript into javascript preview, which you can then use in your code own code. Hopefully this solves the javascript problems.
I have problem with columns filter dialog not showing in IE
it works fine in all other browsers
I have had already great trouble with
<!DOCTYPE html>
in IE
I suspect something related to the order of these definitions
<link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/scripts/demos.js"></script>
<script type="text/javascript" src="/jqwidgets/jqxvalidator.js"></script>
thanks to jqwidgets team for great work :)
you can look at this sample: jQWidgets Grid Filtering. Works fine with IE on my side. According to me, the <!DOCTYPE html> should be always used in your web pages.
thanks
the problem is that the grid is within window jqxWindow
i just defined div as in the example without embedding it within other divs
I am attempting to add some simple jQuery through an external file. I would like the code to remain in the external .js file. I'm using Dropbox so I can test my site locally, and I am almost certain JavaScript works through this method, but I don't know about the jQuery library. I can't seem to get any feedback through trial and error. Here is the simple form of the code I'm attempting.
The HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel='stylesheet' type='text/css' href='style.css'/>
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
</head>
<body>
<div id='container'>
<div class='menu'>
<h2>Title of menu/h2>
</div>
<div class='panel'>
<p>
Some text here
</p>
</div>
</div>
</body
This is the entire .js file so far. Does this need to be defined as a function and then added into the HTML? Is it a scope issue?
$(document).ready(function(){
$('.menu').click(function(){
$('.panel').slideToggle('slow')
})
})
You load your file before the library your file is using. Change the two <script> lines so that jQuery is loaded first:
Change
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="functions.js" ></script>
You need to add your code after the jQuery inclusion..
So swap these lines
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="functions.js" ></script>
That is because your code uses jQuery, so you need to load jQuery before you can use the $.