Navigation

1. Mouse Scroll
2. Pan
3. Zoom

Mouse Scroll

Vertical and Horizontal scroll

Set mouseScrool option to FamilyTree.action.scroll and you will be able to navigate with the mouse:

• Scroll up/down
• Press Shift key to sroll left/right
• On Apple Magic Mouse or Logitech G502 you can scroll left/right/up/down without pressing the Shift key

Edit in BALKAN Code

Add scroll bars with the options showXScroll: FamilyTree.scroll.visible and showYcroll: FamilyTree.scroll.visible

Edit in BALKAN Code

Horizontal scroll only

In order to enable horizontal scroll bar set showXScroll to FamilyTree.scroll.visible. Aslo you have an option to use the mouse scroll set mouseScrool to FamilyTree.action.xScroll. Here is an example:

Edit in BALKAN Code

Vertical scroll only

Now set the showYScroll to FamilyTree.scroll.visible and chage mouseScrool to FamilyTree.action.yScroll

Edit in BALKAN Code

Scroll sensitivity

To increase or decrease sroll sensitivity change FamilyTree.scroll.smooth and FamilyTree.scroll.speed constants, the default values are:

 
     FamilyTree.scroll.smooth = 12;
     FamilyTree.scroll.speed = 12;  
    

 
     FamilyTree.scroll.safari = {
        smooth: 12,
        speed: 500
    };
     FamilyTree.scroll.ie = { smooth: 12, speed: 200 };
     FamilyTree.scroll.edge = { smooth: 12, speed: 200 };
     FamilyTree.scroll.chrome = { smooth: 12, speed: 200 };
     FamilyTree.scroll.firefox = { smooth: 12, speed: 200 };
     FamilyTree.scroll.opera = { smooth: 12, speed: 200 };
    

Pan

Pan/move, left-click and hold mouse button in the Family Tree JS and drag the mouse in any direction. You cannot disable the Pan navigation.

Zoom

Chage mouseScrool to FamilyTree.action.zoom. Here is the result:

Edit in BALKAN Code

Ctrl + Zoom

Chage mouseScrool to FamilyTree.action.ctrlZoom. Here is the result:

Edit in BALKAN Code

Mini map

Show mini map over the tree.

Edit in BALKAN Code

6. Mini map properties

You have several properties for the mini map, that you can set:

• colors - array of colors that are set for the different subtree levels
• selectorBackgroundColor - the "background" color in the mini map
• focusStroke - the color of the focus rectangle stroke
• opacity - number from 0 to 1 - the opacity of the "background"
• border - the CSS bodred definition of the mini map
• width - width in pixels
• height - height in pixels
• padding - padding of the mini map in pixels
• position - object with top, left, right and bottom properties to position the mini map. You can use 'padding', undefined or pixels
• draggable - boolean - the default value is true

Edit in BALKAN Code