So I had tried a simple Js code to increment/ decrement the value of a number. I have fixed its position to center in html code itself, but it changes its position to left after the js operation. What should I do so that its position remains in center? And why does it even change its position in the first place?
So here's the code:
<html>
<title>Learning JS</title>
<style type="text/css">
.buttonBlock{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h2 id="header-number"><center>0</center></h2>
<div class="buttonBlock">
<button type="button" onclick="increment()">+</button>
<button type="button" onclick="decrement()">-</button>
</div>
</body>
<script src="JScode1.js"></script>
</html>
And here's the JS code:
var number=0;
var string="script loaded";
function changeNumber(){
document.getElementById('header-number').innerHTML=number;
console.log("Number: "+number);
}
function increment(){
++number;
changeNumber()
}
function decrement(){
--number
changeNumber()
}
console.log(string)
Related
Just running barebones "material-components-web" and I can't get the input field to look like it's supposed to. JS interaction is working great. Theme looks good. But my field is getting cut off
index.html:
<html>
<head>
<link rel="stylesheet" href="bundle.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
</head>
<body class="mdc-typography">
<h1 class="mdc-typography--headline1">Big header</h1>
<div class="mdc-text-field" data-mdc-auto-init="MDCTextField">
<input class="mdc-text-field__input" type="text" id="input">
<label for="input" class="mdc-floating-label">Input Label</label>
<div class="mdc-line-ripple"></div>
</div>
<!-- at the bottom of the page -->
<script src="bundle.js"></script>
</body>
</html>
app.scss:
#import "material-components-web/material-components-web";
app.js:
import * as mdc from 'material-components-web'
mdc.autoInit()
I have no other files pulling in. No other styles added. What could be happening?
That usually happens when .mdc-text-field__input has incorrect box-sizing (for example, inheriting parental .mdc-text-field's border-box). Please ensure that .mdc-text-field__input has initial box-sizing:
.mdc-text-field__input {
box-sizing: initial; // or content-box
}
The following worked for me: add the following to a custom style sheet.
.mdc-text-field {
width: -webkit-fill-available;
width: fill-available;
}
Hopefully I'm just missing something simple, but there is a little too much space between the items ("grid-stack-item" divs). I would like a grid where the items are a little closer together. I was hoping maybe someone had a codepen or fiddle that showed how to decrease the space between the items (shrink the columns).
Relevant code:
<html>
<head>
<!--JQUERY-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--Lodash-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js"></script>
<!--Gridstack-->
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.js'></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.css" />
<style>
.grid-stack-item{background-color: #00CED1;}
.red {border: 1px solid red;}
.blue {border: 3px solid blue;}
.red-dash {border: 3px dashed red;}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="col-md-12">
<div class="grid-stack" style="margin-top: 20px;">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content">BOX 1</div>
</div>
<div class="grid-stack-item"
data-gs-x="2" data-gs-y="0"
data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content">BOX 2</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var options = {
cellHeight: 80,
width: 4
};
$('.grid-stack').gridstack(options);
});
</script>
<!-- Scripts -->
</body>
</html>
You need to make the data-gs-x attribute of the second grid-stack-item 1 instead of 2 as the width of each grid-stack-item is only 1. At the moment you have a empty space there because you've told it to leave it empty.
Well this is a four years old quetions. But you can change that gap by adding the margin parameter to the grid options. Default margin value is 10.I can be an integer (px) or a string (ex: '2em', '20px', '2rem')
var options = {
cellHeight: 80,
width: 4,
margin: 5
};
source document
I'm unable to get a dojo example listed under dojo's official documentation to work.
When I run Dojo's demo from their web page, it works fine. But when I copy and paste the code (which appears below) and try to run it in ay web browser, I get an error. For multiple different web browsers, I get an error in my console log that says:
Error: Tried to register widget with id==borderContainerThree but that
id is already registered
This is frustrating because I can't figure out the difference that is causing my code to fail, but their code to work.
I've copied their code verbatim from the web page.
The example is given on the page:
http://dojotoolkit.org/reference-guide/1.9/dijit/layout/BorderContainer.html
and is titled:
"BorderContainer Inside A Dijit Template"
A similar question here (dojo 1.8: Error: Tried to register widget with id==main_bContainer but that id is already registered) and here (Dojo - "Tried to register widget with id==centerPane but that id is already registered") said this might be because I'm calling parser.parse twice, but if I uncomment the parser.parse line,
the error disappears, but there is no content displayed on the web page.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dijit/layout/BorderContainer — The Dojo Toolkit - Reference Guide</title>
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/default.css" type="text/css" />
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/css/site.css">
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/resources/guide.css">
<script type="text/javascript">
dojoConfig = {
async: true
};
</script>
<script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"></script>
<script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/guide.js"></script>
</head>
<body class="claro" >
My Test
<script type="text/javascript">
require([
"dojo/parser",
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/AccordionPane"
], function(parser, declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin){
declare("MyDijit",
[_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
// Note: string would come from dojo/text! plugin in a 'proper' dijit
templateString: '<div style="width: 100%; height: 100%;">' +
'<div data-dojo-type="dijit/layout/BorderContainer" design="headline" ' +
' style="width: 100%; height: 100%;" data-dojo-attach-point="outerBC">' +
'<div data-dojo-type="dijit/layout/ContentPane" region="center">MyDijit - Center content goes here.</div>' +
'<div data-dojo-type="dijit/layout/ContentPane" region="bottom">MyDijit - Bottom : ' +
' <div data-dojo-type="dijit/form/Button">A Button</div>' +
'</div>' +
'</div></div>'
});
parser.parse();
});
</script>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true" id="borderContainerThree">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div data-dojo-type="dijit/form/Button" id="createButton">Create Inner Dijit
<script type="dojo/on" data-dojo-event="click">
require(["dojo/dom", "dojo/dom-construct"], function(dom, domConstruct){
// Create a new instance
var newdijit = new MyDijit({}, domConstruct.create('div'));
newdijit.placeAt(dom.byId('mydijitDestination'));
newdijit.startup();
});
</script>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:false">
OUTER LEFT<br />
This is my content.<br />
There is much like it,<br />
but this is mine.<br />
My content is my best friend.<br />
It is my life.<br />
I must master it,<br />
as I must master my life.
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:false">
<div id="mydijitDestination" style="width: 100%; height: 100%"></div>
</div>
</div>
</body>
</html>
Any suggestions given as to what I'm doing wrong would be greatly appreciated.
The error indeed indicates that you're trying to create a widget with the same ID twice, either because you have two elements with the same ID, or because you are parsing the same markup twice.
I suggest commenting the line parser.parse() and by adding parseOnLoad: true to dojoConfig, for example:
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: true
};
</script>
The reason you won't see a thing when you comment the parsing line, is another issue. Most layout widgets in Dojo are generating their layout according to the space of the parent DOM node. This means you have to set the space of the widget by using CSS first, for example:
#borderContainerThree {
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow:hidden;
}
If you do that, then everything should work fine, just as in this fiddle: http://jsfiddle.net/92NT4/
I am starting with Twitter Bootstrap and have a question about how layout functions in it. Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row">
<div class="span12">c</div>
</div>
</div>
</body>
</html>
style.css:
div.container
{
background-color:#aaa;
}
div.span4, div.span8, div.span12
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
Adding border to span4 and span8 increases their width and I end up with this:
span4 and span8 get stacked while they should be on the same line. I realize I could decrease their width in my .css file and correct this, or use this:
http://paulirish.com/2012/box-sizing-border-box-ftw/
but does Bootstrap provide means to correct this (not adding extra CSS every time I add or remove border, etc)
The span classes in bootstrap have specific widths so adding a border throws off the total for the row and forces them to wrap. To get around this I usually put the border styling on a div inside the div with the span class. Something like this:
HTML
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
CSS
.span4 > div, .span8 > div
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
I had exactly the same issue and playing with the box-sizing didn't help at all. The only solution that worked for me in the end was to use row-fluid.
The difference with row-fluid is that they are based on percentages, not fixed pixels. Then the child spans in a row always add up to 12, instead of adding up to their parent span width in the normal pixel width rows.
So for example yours would now be
<div class="container">
<div class="row-fluid">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row-fluid">
<div class="span12">c</div>
</div>
</div>
Now you don't get any issues with changing margins, paddings, or borders.
It sounds like you want your divs to stay on the same line, yes? To do that you'll have to specify a width and float them. Divs tend to always want to stack on top of each other.
Here's a fiddle: http://jsfiddle.net/me73v/
Another option would be to tweak the span widths with JQuery:
$(".some-bordered-container [class*=span] ").each(function(index) {
$(this).width($(this).width()-1);
});
It seems to work well for me. I don't miss the pixels.
You may also use negative margins :
div.span4, div.span8, div.span12
{
background-color: #eee;
border: 1px solid #888;
border-radius: 3px;
margin: -1px;
}
It's not as good a solution as using box-sizing: border-box, IMHO, but it's just worth noticing it works, if you're forced to use box-sizing: content-box.
I am trying to get two elements to sit side by side inside a div or other element, so both two elements are always centered in the page.
Here's the catch... I cannot use any fixed widths, it is dynamically generated by javascript. It would seem that from reading other posts that this is not possible without fixed widths, but I wanted to see if any one had any other ideas to achieve the same result.
HTML:
<body>
<div class="centerdiv">
<div class = float1></div>
<div class = float2></div>
</div>
</body>
CSS:
body {text-align: center; width: 100%;}
.centerdiv {margin: 0 auto;width: 100%}
div.float1 {float:left; display:inline;}
div.float2 {float:left; display:inline;}
You can use the follwing code to center the div side by side.
<html>
<head>
<style type="text/css">
body {text-align: center; width: 100%;}
.centerdiv {margin: 0 auto;width: 100%;margin-left:40%;}
.float1{border:1px solid black;width:10%;float:left;}
</style>
</head>
<body>
<div class="centerdiv">
<div class = float1>Hello</div>
<div class = float1>Hai</div>
</div>
</body>
</html>
Hope this helps!!!!!!