Firefox isn't reading any of the styling. Not even the width or height. Am I missing some part of the setup?
My index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Learning Less</title>
<link rel="stylesheet/less" href="style.less" type="text/css"/>
<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>
</head>
<body>
<div id="container">
Hello World
</div>
</body>
</html>
My Stylesheet style.less
#primary-color: red;
#container {
width:200px;
height:200px;
background: #primary-color;
}
Related
I have this simple page that should display a bordercontainer with top, bottom and center regions. When you run it, contents briefly appear and then they disappear. Firebug shows no error and i can't see anything wrong with the code.
thank you.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<script src="http://js.arcgis.com/3.13/"></script>
<script >
var dojoConfig = {
parseOnLoad: true
}
require(
['dijit/layout/BorderContainer', 'dijit/layout/ContentPane',
"dojo/parser",
"dojo/domReady!" ],
function(BorderContainer, ContentPane, parser) {
parser.parse();
});
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo- props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo- props="region:'top'">
top
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo- props="region:'bottom'">
bottom
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo- props="region:'center'">
center
</div>
</div>
</body>
</html>
I did some more research.
After fixing the unwanted spaces in "data-dojo- props" and replaced by "data-dojo-props" the same behavior as what you describe in your question arises.
Actually, it look like it is a sizing issue.
The border container will take the size of its parent. However, if it fail getting it. It size will be 0, thus everything disappearing.
You see the content at first because the border container isn't loaded yet.
As soon as it gets loaded, the content is gone.
In the below snippets, I force the size of the borderContainer's parent (the body tag in this example) to be 300px by 150px
The you can see that the content stays.
(Note: I also changed the data-dojo-type to use the slash notation. the dot notation is for old dojo version.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/claroGrid.css">
<script src="http://js.arcgis.com/3.13/"></script>
<script >
var dojoConfig = {
parseOnLoad: true
}
require(
['dijit/layout/BorderContainer', 'dijit/layout/ContentPane',
"dojo/parser",
"dojo/domReady!" ],
function(BorderContainer, ContentPane, parser) {
parser.parse();
});
</script>
</head>
<body class="claro" style="width:300px; height:150px" style="font-family: Verdana; font-size: 11px;">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
top
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
bottom
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
center
</div>
</div>
</body>
</html>
As you can see in below screenShot-
We are able to see contentPane however it shows a error for contents:
So I guess this weird behaviour may be happening because of content for these pane.
Try to add contents in it and see if you are getting same error or fixed in your environment.
Here's the minimal configuration that I've figured out so far:
<html>
<head>
<link rel="shortcut icon" href="microsoft.png" type="image/png">
<link rel="stylesheet" href="bootstrap-4.0.0-alpha.2/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<script src="bootstrap-4.0.0-alpha.2/docs/assets/js/vendor/tether.min.js"></script>
<script src="bootstrap-4.0.0-alpha.2/dist/js/bootstrap.js"></script>
</body>
</html>
Q: After the opening body tag, what replaces div class="container"?
Nothing replaces it. Bootstrap 4 still uses containers.
I am trying bootstrap3 date picker but it does not show up calendar or it does not even show any javascript error when i click on textbook.
Below is my code for showing up calendar.
enter code here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap-datepicker3.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Date Picker -->
<script src="js/bootstrap-datepicker.js"></script>
</head>
<body>
<input type="text" class="form-control" id="sandbox-container">
<script>
$(function() {
$('#sandbox-container input').datepicker();
});
</script>
</body>
</html>
You jquery selector is wrong and should just be $('#sandbox-container')
This should be your code (including working example):
$(function() {
$('#sandbox-container').datepicker({
//..
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<input type="text" class="form-control" id="sandbox-container">
I have a few problems after having upgraded to gulp-mocha-phantomjs Version 0.8.0:
1) Error when running against remote by url:
When running my tests against a remote URL, I get the following error:
ReferenceError: Can't find variable: Mocha
at browser-shim.js:27
All required files in runner.html seem to be available and the test do work as expected in an actual browser like FF or Chrome.
runner.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mocha Test Runner</title>
<link rel="stylesheet" href="HTTP://localhost:7777/q/p/lj_unittest/test/mocha.css">
<link rel="stylesheet" href="HTTP://localhost:7777/q/p/lj_unittest/css/core.css">
</head>
<body>
<div id="mocha"></div>
<div id="fixture" style="display:none;">
<div id="charset_ascii"> !"#$%&'()*+,-./0123456789:;<=>?#ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~</div>
<div id="charset_other">ÄäÆæß</div>
</div>
<script src="HTTP://localhost:7777/q/p/lj_unittest/js/core.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/mocha.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/chai.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/chai-datetime.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/sinon.js"></script>
<script>
mocha.setup("bdd");
</script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/charset_backend.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/ods.log_backend.js"></script>
<script src="HTTP://localhost:7777/q/p/lj_unittest/test/backend/ods/date.js"></script>
<script>
mocha.run();
</script>
</body>
</html>
Gulpfile.js:
gulp.task('test:backend:ODS', function (/callback/) {
var stream = mochaPhantomJS({'reporter': 'spec'});
stream.write({path: config.URL_ROOT + '/TEST_WEB_ODS.main'});
stream.end();
return stream;
});
2) Strange warnings in some (but not all) of the runner.html based tests:
Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file:///D:/MyDev/ljs_app/trunk/periscope/build/node_modules/gulp-mocha-phant
mjs/node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js. Domains, protocols and ports must match.
runner.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mocha Test Runner</title>
<link rel="stylesheet" href="../../../libs/mocha/mocha.css">
<link rel="stylesheet" href="../../../dist/css/core.css">
</head>
<body>
<div id="mocha"></div>
<div id="fixture" style="display:none;"></div>
<script src="../../../dist/js/core.js"></script>
<script src="../../../libs/mocha/mocha.js"></script>
<script src="../../../libs/chai/chai.js"></script>
<script src="../../../libs/chai/chai-datetime.js"></script>
<script src="../../../libs/sinon/sinon.js"></script>
<script>
mocha.setup('bdd');
</script>
<!-- START of actual unit test scripts -->
<script src="./json.js"></script>
<script src="./moment.js"></script>
<script src="./underscore.js"></script>
<!-- END of actual unit test scripts -->
<script>
mocha.run();
</script>
</body>
</html>
Gulpfile.js:
gulp.task('test:frontend:lib', function (/*callback*/) {
return gulp.src('test/frontend/lib/runner.html').pipe(mochaPhantomJS({'reporter': 'spec'}));
});
Any help is appreciated!
Load mocha.js first. Your own comment is correct.
Related:
ReferenceError: Can't find variable: Mocha when running test · Issue #7 · nathanboktae/mocha-phantomjs-core
I have setup jquery datetimepicker but it not display correctly in localhost (but online is ok). Picture 1 is datetimepicker localhost, picture 2 is datetimepicker online:
Picture 1
Picture 2
Who have any ideal?
Thank you!
Please check whether you have included the below files:
1. jquery-ui-1.8.custom.css
2. jquery-1.7.1.min.js
3. jquery-ui-1.8.custom.min.js
Sample html code as below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>DistribuTix</title>
<meta http-equiv="expires" content="">
<meta http-equiv="ImageToolbar" content="No">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" media="all" type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<style type="text/css">
#ui-datepicker-div{ font-size: 80%; }
/* css for timepicker */
#ui-timepicker-div dl{ text-align: left; }
#ui-timepicker-div dl dt{ height: 25px; }
#ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
</style>
</head>
<body>
<input name="eventDate" id="eventDate" maxlength="20" size="17">
</body>
<script type="text/javascript">
$('#eventDate').datepicker({
dateFormat: 'mm-dd-yy',
showOn: "button",
buttonImage: "../images/calendar.gif",
buttonImageOnly: true
});
</script>
</html>
Also check the included files are in correct path..