Stacktrace.js

Generate, parse, and enhance JavaScript stack traces in all web browsers.
Stacktrace.js

Toevoegen van DOM nodes bemerken via animationstart

Er is nog een andere manier om het toevoegen van nodes in javascript te bemerken. Via animationstart!

Het is ongelovelijk, maar het werkt. De app sentinel maakt er gebruik van.

Veranderingen in de DOM bemerken via javascript

Stel je wilt het verwijderen van een element genaamd spaForm bemerken via javascript. Je kunt dan MutationObserver gebruiken.

function spaFormRemovalCallback(callback) {

  var spaFormNotifier = new MutationObserver(function(e) {

  var j = 0;

  for (j = 0; j < e.length; j++) {

    var removedNodes = e[j].removedNodes;

    if (removedNodes.length > 0) {

      var i = 0;

      for (i = 0; i < removedNodes.length; i++) {

                                                                                          var node = removedNodes[i];

        if ((node.id === "spaForm") && (node.nodeName === "FORM")) {

          callback();

          spaFormNotifier.disconnect();

        }                                                                               }

    }

       }

    });

  var spaFormNode = $("#spaForm");

  if (spaFormNode.length > 0 && spaFormNode.parent().length > 0) {

    spaFormNotifier.observe(spaFormNode.parent()[0], { childList: true });    

  }                                 

}

Toolbar to the left on equal level

See: https://jsfiddle.net/kjtmq0us/3/

html

<div class="sideBarEqual">Side info!</div>
<div class="baseNode">
<div class="toolbar">Toolbar</div>
<div class="theContent">
very much content...
</div>
</div>

css

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background-color: yellow;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.baseNode {
  flex: 1 1 auto;
}

.toolbar {
  background-color: red;
  height: 40px;
}

.theContent {
  background-color: blue;
  height: calc(100vh - 40px); 
  overflow: auto;
}

.sideBarEqual {
  flex: 0 0 120px;
  background-color: purple;
  color: yellow;
}

.sideBarOverlay {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 120px;
  height: 100vh;
  background-color: purple;
  opacity: 1.0;
  color: yellow;
}

div height rest of page

See: https://jsfiddle.net/kjtmq0us/2/

Suppose, we have a toolbar, and want to fill the remaining of the height of the page. You can do it as follows:

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: yellow;
  overflow: hidden;
}

.toolbar {
  background-color: red;
  height: 40px;
}

.theContent {
  background-color: blue;
  height: calc(100vh - 40px); 
  overflow: auto;
}



html:
<div class="baseFlex">
<div class="toolbar">Toolbar</div>
<div class="theContent">
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
1234234 5345645 6756781 234234 5345656 76787896 1234234 534564 567657812 3412344321
</div>
</div>


css:

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: yellow;
  overflow: hidden;
}

.baseFlex {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
}

.toolbar {
  background-color: red;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 40px;
}

.theContent {
  background-color: blue;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc(100vh - 40px);
  overflow: auto;
}