Angular Material - javascript

So i have installed angular, angular-material, angular-aria, angular-animate dependencies to my system.
I just want to test out this up and coming styling method.
It seems I'm stuck at the beginning. Can you tell me whats wrong with the code?
These are my 3 files.
app.js
styles.css
index.html
My output is {{title1}} at the centre-top of the webpage.
angular.module('MyApp', ['ngMaterial'])
.controller("MyController", function($scope) {
$scope.title1 = 'Lol';
});
.buttondemoBasicUsage section {
background: #f7f7f7;
border-radius: 3px;
text-align: center;
margin: 1em;
position: relative !important;
padding-bottom: 10px;
}
.buttondemoBasicUsage md-content {
margin-right: 7px;
}
.buttondemoBasicUsage section .md-button {
margin-top: 16px;
margin-bottom: 16px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="angular-material.css">
<title>AngularJS</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
</section>
</md-content>
</div>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
</body>
</html>

This is really just a matter of referencing the files to the correct places in your project.
Replacing all your local references to CDN's, your code is working flawlessly: http://codepen.io/qvazzler/pen/vOaqXW
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="CSS.css">-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css">
<title>AngularJS</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
</section>
</md-content>
</div>
<!-- <script src="MyApp.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-aria.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
</body>
</html>
A helpful thing to do in these cases is to open the Chrome developer tools (CTRL + SHIFT + I), get to the Console section and look at the error messages.
Link to guide on using DevTools: https://developer.chrome.com/devtools
If I were to actually answer your question on why it's not working, we'd have to see your file structure, but as it is common that js files are located in a folder separate from your html files, you'd have to add "../" to the beginning of your href's to access a parent folder.
Example:
[My Project]
jsfolder
- angular.js
- angular-material.js
cssfolder
- angular-material.css
- styles.css
html
- index.html
To access angular.js from your index.html, you'd have to write href="../jsfolder/angular.js"

I fixed your imports.
angular.module('MyApp', ['ngMaterial'])
.controller("MyController", function($scope) {
$scope.title1 = 'Lol';
});
.buttondemoBasicUsage section {
background: #f7f7f7;
border-radius: 3px;
text-align: center;
margin: 1em;
position: relative !important;
padding-bottom: 10px;
}
.buttondemoBasicUsage md-content {
margin-right: 7px;
}
.buttondemoBasicUsage section .md-button {
margin-top: 16px;
margin-bottom: 16px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="angular-material.css">
<title>AngularJS</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
</section>
</md-content>
</div>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
</body>
</html>

I suggest to use typescripts or a kind of that option, first steps are hard but later you ll be in better solution.
please dont make writing code pain and gain.
happy codings.

Related

How to fix Uncaught ReferenceError: TimelineMax is not defined

My JS file:
const logo = document.querySelector("#logo");
const tl = new TimelineMax({});
tl.fromTo(logo, 1, {height: "0%"}, {height: "80%"});
My CSS file:
#logo{
width: 100%;
height: 100%;
position: absolute;
top: 200px;
z-index: -1;
}
My HTML file:
<!DOCTYPE html>
<html lang= "es">
<head>
<title>Quark</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div class="Limg">
<img id="logo" src= "Logo.svg">
</div>
<script src="animaciones.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js" integrity="sha512-0xrMWUXzEAc+VY7k48pWd5YT6ig03p4KARKxs4Bqxb9atrcn2fV41fWs+YXTKb8lD2sbPAmZMjKENiyzM/Gagw==" crossorigin="anonymous"></script>
</body>
</html>
And I don't know where the problem is already trying using different versions and nothing
Move your script tag for timeline max on header
<head>
<title>Quark</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="Style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js" integrity="sha512-0xrMWUXzEAc+VY7k48pWd5YT6ig03p4KARKxs4Bqxb9atrcn2fV41fWs+YXTKb8lD2sbPAmZMjKENiyzM/Gagw==" crossorigin="anonymous"></script>
</head>

angularjs class is not working

I am new leaner to the angularjs and I make simple page as below, where in I have style called "item" and I am trying to give it to div but it is not working but on the same time if I give inline style then it will work.
What can be the issue, Kindly somebody help me
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="KACApp">
<div id="layoutContainer" ng-controller="layoutController as ctrl" style="height:100%">
<div layout="row" layout-xs="column">
<div flex class="item">Item</div>
<div flex="20">Item 2</div>
</div>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<style>
.item {
background: "#073857";
}
</style>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('KACApp', ['ngMaterial'])
.controller('layoutController',layoutController)
.run(function() {
console.log('App is ready');
});
function layoutController($scope){
}
</script>
</body>
</html>
Simply remove " from your style and it'll work :
.item {
background: "#073857";
}
change to ->
.item {
background: #073857;
}
Try this
.item {
background: #073857;
}
See the Plunker

Code working in JSFiddle but wont work in browser

I'm trying to get this piece of code working from my browser but I can't get it to work. Here is what I am currently tying, does anyone know what I'm missing?
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="fader.css"/>
<script type="text/javascript" src="fader.js"></script>
</head>
<body>
<div id="div1">hover over me</div>
<div id="div2"></div>
</body>
</html>
fader.js
$(document).ready(function(){
$(function() {
$('#div1').hover(function() {
$('#div2').fadeIn();
}, function() {
$('#div2').fadeOut();
});
});
});
fader.css
#div2 {
width: 200px;
height: 200px;
background: red;
display: none;
}
Original:
http://jsfiddle.net/kevinPHPkevin/4z2zq/
You haven't imported jquery in your html doc. your js code uses jquery.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="fader.css"/>
<script type="text/javascript" src="fader.js"></script>
<script type="text/javascript" src="[jqueryversionrighthere]"></script>
</head>
<body>
<div id="div1">hover over me</div>
<div id="div2"></div>
</body>
</html>
please insert this code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Troubles with integrating Jquery and Jquery-UI frameworks

After a long time I try again to work with jquery. The last time it worked great but now I have to run to bring it trouble. Have tried to break the problem down into simple parts and have included the HTML, JS and CSS file created to eliminate as many errors as possible. I think that I have not correctly using jquery, but can not find my error.
Here is the HTML:
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="test.css" >
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" >
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
CSS:
html, body{
height: 100%;
width: 100%;
background-color: #FCF65A;
}
#slider{
height: 100%;
width: 300px;
background-color: #88E453;
margin-left: 0;
}
JS:
$('#slider').click(function() {
$(this).toggle(1000);
});
});
According to my understanding of this, the Green bars should left click on the edge of NEM but disappear?
I'd appreciate any help. I've been seeking the error now for almost 2 days.

Why Dijit doesn't work for me?

Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
<script type="text/javascript">
dojo.require("dijit.layout.AccordionContainer");
</script>
<script type="text/css">
html, body {
width: 100%;
height: 100%;
}
</script>
</head>
<body class='claro'>
<div data-dojo-type="dijit.layout.AccordionContainer" style="width: 200px; height: 95%; margin: 0 auto;">
<div data-dojo-type="dijit.layout.AccordionPane" title="pane #1">accordion pane #1</div>
<div data-dojo-type="dijit.layout.AccordionPane" title="pane #2">accordion pane #2</div>
<div data-dojo-type="dijit.layout.AccordionPane" title="pane #3">accordion pane #3</div>
</div>
</body>
</html>
It is just a very simple code from the example of Dojo.
When I run it in safari, nothing appears but some plain text.
When I run it in chrome, following error occurs:
XMLHttpRequest cannot load http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/layout/AccordionContainer.js. Origin null is not allowed by Access-Control-Allow-Origin.
and
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 dojo.js:15
What's the problem?
1.You forgot to require dijit.layout.AccordionPane
2. You forgot to invoke the parser
Try this :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var dojoConfig = {
async : true,
parseOnLoad : true
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
<script type="text/javascript">
require(["dijit/layout/AccordionContainer",
"dijit/layout/AccordionPane"],
function(){
// your code...
}
);
</script>
<script type="text/css">
html, body {
width: 100%;
height: 100%;
}
</script>
</head>
<body class='claro'>
<div data-dojo-type="dijit.layout.AccordionContainer" style="width: 200px; height: 95%; margin: 0 auto;">
<div data-dojo-type="dijit.layout.AccordionPane" title="pane #1">accordion pane #1</div>
<div data-dojo-type="dijit.layout.AccordionPane" title="pane #2">accordion pane #2</div>
<div data-dojo-type="dijit.layout.AccordionPane" title="pane #3">accordion pane #3</div>
</div>
</body>
</html>
Alternatively, instead of invoking the parser manually, you may invoke it on page load by adding data-dojo-config="parseOnLoad: true" to the script tag where dojo.js is loaded, or by setting the variable dojoConfig before dojo.js is loaded (see http://dojotoolkit.org/documentation/tutorials/1.7/dojo_config/).

Categories