CSS Box Model and Dojo/dom-geometry

Posted on

Since Dojo 1.7, dojo.position, dojo.marginBox, and dojo.contentBox should be called with dojo/dom-geometry module. dojo.position returns an object for the size and the x/y coordinates of the domNode. marginBox and contentBox are based on CSS box model so users can manipulate the position of a domNode. Basically marginBox includes information for margin/padding/border-width, but contentbox only looks at the padding and the domNode itself.

HTML:

<div id="firstBox">Box #1 W:60px H:60px</div>
<div id="secondBox">Box #2 W:100px H:100px</div>

Dojo 1.7:

require(["dojo/parser", "dojo/dom-geometry", "dojo/domReady!"], function(parser, domGeom) {

    var marginBox = domGeom.getMarginBox('secondBox'),
        contentBox = domGeom.getContentBox('secondBox');

    console.log(domGeom.position('secondBox'));
    console.log("MarginBox - T: " + marginBox.t + ", L: " + marginBox.l + ", W: " + marginBox.w + ", H: " + marginBox.h);
    console.log("ContentBox - T: " + contentBox.t + ", L: " + contentBox.l + ", W: " + contentBox.w + ", H: " + contentBox.h);

    setTimeout(function() {
        //set the width and height of the domNode 
        //size will not be the same as the first box becuase of the padding
        domGeom.setContentSize('secondBox', {
            w: 60,
            h: 60
        });
    }, 2000);

});​

CSS:

#firstBox{
 width:60px;
 height:60px;
 border:1px solid #1de;
}

#secondBox {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 1px solid #ccc;
  position: relative;
  top:10px;
  left:10px;
}​

Two boxes before the second box is resized:

Output in console:


Dijit Progressbar

Posted on

For my first Dojo application, I decided to make a progress bar, and a back button displays after it reaches 100%.

Live Demo

Script on the html page.

<script type="text/javascript">

dojo.require("dijit.ProgressBar");
dojo.require("dijit.form.Button");     
dojo.require("dojo.parser");

dojo.addOnLoad(function progressBar() {
	var timer = 0;
	var progressInterval = setInterval(function(evt) {
	timer++;

	dijit.byId("downloadProgress").update({progress : timer,
             label:"Loading..."});
	
	if(timer > 99){
	  clearInterval(progressInterval);
	  dijit.byId("downloadProgress").update({label:"Done"});
	  show();
	}
	}, 1);
	
	function show(){
	   var btn = dijit.byId('continue').domNode;
	   dojo.style(btn, {visibility:'visible'});
        }
});
	
</script>