Develop Reference

GetOrgChart removing top bar, accesing click handlers

I'm trying to implement GetOrgChart with asp.net mvc in a complex scheme but stuck with some issues...
I need to remove top search bar. Tried to do this adding "display-none" to generated div's css class. But this resulted in main svg not filling screen, 'cause it's padding gets set to some value from inline styling.
Is there any way to access add/edit/delete/view buttons' click handlers? I want to display a custom page for each operation. And can we disable individual buttons (i.e. add or edit) selectively?

In order to remove the top bar you have to change the theme, lets assume that you are using "ula" theme, remove the top bar set getOrgChart.themes.ula.toolbarHeight = 0;
Regarding your second question use the following example as starting point:
http://www.getorgchart.com/Demos/Custom-Edit-Form

I have removed the toolbar by overriding it's css
.get-org-chart .get-oc-tb {
display: none;
}

How to add an empty component in Framework7?

I need to press two buttons down in the screen. Is not there such a component (spacer) which would have 100% height and moved the buttons to the bottom?

Use tool bar for that purpose which put all the content into the bottom of the view
https://framework7.io/docs/toolbar.html

programatically scroll *within* a child div in angular

I'm writing my own directive which controls a child div (widget to be exact) within a larger screen. The view for the directive contains a scroll bar, separate from the scroll bar on the larger webpage.
When a user clicks a button to calculate results I want to jump down to the results part of the view IFF results come back, but not move the screen if we don't get any results back for his query.
I'm having trouble doing this. $anchorScroll doesn't seem to work, it scrolls the entire screen down instead of just the content of my directive's child div, and in fact doesn't scroll at all if the value I want to scroll to doesn't yet show on the child div.
I've seen plenty of examples of a directive that can be added to an HTML element to handle scrolling but they function on-click without the extra programmatic control I want, deciding when to actually scroll from within a controller method. I don't know how to generalize this logic to work within my larger directive unfortunately.
How would I go about scrolling a child div programmatically without scrolling the larger div?

You could use element.scrollTop = x. You can see a basic demo here - it will automatically scroll the child div's content after 2 seconds.
The demo uses $timeout, obviously you'll need to put that logic in your $http calls success part.
Assuming you have everything else done, the relevant part is the following:
var target = angular.element(document.querySelector('#result'));
// #result is your directive's child div
target[0].scrollTop = 200;
// You'll have to calculate the exact number if it's not a fix one.

fullPage.js utilizing .active and .fp-viewing-firstpage-X classes

I have a webpage that utilizes fullPage.JS. There is a firstPage section with 5 horizontal slides that is navigated to with a header menu via data-menuanchor. Additionally there is a secondPage section with 3 horizontal slides that is navigated with a footer menu, also via data-menuanchor.
I would like for each li menu item to change color when it's corresponding section is navigated to. Right now I am accomplishing MOST of this by using the :focus CSS selector. However this only works when a menu item is clicked. I also need the highlights to change when navigation is done via touchscrolling, keyscrolling, etc.
Initially I thought I could accomplish this by using the "active" class as it is passed to the menu, but I quickly realized that, because of the structure of my page, the "active" class is simultaneously passed to every li in the menu....either all five items in my header menu or all 3 items in my footer menu.
After concluding that I would not be able to use the "active" class to differentiate as needed, I began looking at the "fp-viewing-firstpage-X" class that is given to the body as each section and slide is navigated to...
However, I am not having luck with either approach I've come up with.
First I tried to do it all with CSS with something like this:
.fp-viewing-firstpage-1 .item {
color:white;
}
After not having success with that I tried using this javascript in the onLoad, onLeave, afterRender callbacks, etc...:
if ( $('body').hasClass('fp-viewing-firstpage-1') ) {
$('.item').addClass('white');
}
So far neither approach has accomplished my goal of changing the color of whichever menu item's corresponding section is navigate to, regardless of HOW is is navigated to.
Your assistance is appreciated!

Jquery Treeview has wrong hitarea icon on persisted tree

If I use the option "cookie" to persist the treeview state like this:
//apply treeview to container list (in sidebar)
$("#container_tree").treeview({
collapsed: true,
animated: "fast",
persist: "cookie",
cookieId: "containerTreeMainMenu"
});
I have a problem with the hitarea icons (the icons used to toggle each level of the tree).
If I expand one part of the tree, then reload the page (as to let the cookie remember and load the correct expand/collapse for each level), upon the reload ALL hitarea icons are the plus sign, as if treeview assumed nothing was expanded (even though it is, the cookie works fine in leaving the expanded sections as expanded). When you then click a hitarea to collapse, the icon changes into the minus, so the icon will forever be inverted against how it should behave.

Ok, I got it now.
Since this version of jquery treeview is initialized from the actual html element (the UL that you are turning into a collapsible tree) it is for some reason sensitive to the display property.
My UL was inside a DIV that had display:none on page load (I would toggle it with a button to fade in when needed). Turns out this messed up the status of the nodes to the point where they were displayed correctly, but the plugin read them invertedly (causing both +/- icons and the functions expand all/collapse all to behave in an inverted way).
My solution was to use a negative left position for my DIV instead of the display property and it works like a charm =)