Why Dijit doesn't work for me? - javascript

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/).

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>

Angular Material

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.

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.

Setting Div (#Map) height and width to 100%

I'm setting 100% width and height to the div (map), but my map shows only half of the page. I would like to display the full map below the div container.
I am using bootstrap and esri JavaScript api to build the page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
<script>
dojo.require("esri.map");
function init() {
var map = new esri.Map("map",{
basemap:"topo",
center:[-95.45,29.80], //long, lat
zoom:10,
sliderStyle:"small"
});
}
dojo.ready(init);
</script>
<style>
#map {
height:100%;
width:100%;
margin:0;
padding:0;
}
</style>
</head>
<body class="claro">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project Name</a>
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
<div id="map" class="claro"></div>
</div><!-- /.navbar -->
</body>
</html>
Add this (to your external css file or inline style tag):
html body {
height: 100%;
min-height: 100%;
}
At bootstrap 3.0 twitter bootstrap adds a .container css class which overrides the map container. The result is that a max-width is set on the .map .container. Add this to override and make the map fill the complete width:
html body {
height: 100%;
min-height: 100%;
}
.map .container{
max-width: 100%;
}
try this :
#map{height:100%; min-height:100%;}

Categories