"Navigator" tab

The "Navigator" tab allows you to conveniently navigate in the source code of documents of various languages supported by Spider. It quickly helps to find the structure of the document, with one click it allows you to move to the selected HTML tag, class, function or structure in scripting languages, or selector in CSS sheets.

You can turn on the "Navigator" tab using the right panel or the CTRL + 7 keyboard shortcut, and from the menu under the button shown above from Main Menu / View .

The navigator window consists of a menu and a dynamically created document structure tree.

Tree branches can be expanded by clicking on the plus sign on the left side of the name. Clicking on the name of a given element takes you to the place where it appears in the document

The tree is created dynamically - if some elements are not present in the script, there will also be no corresponding main branches. For example - if there are no images in the HTML document, the categorized HTML navigator will not show the Images branch

Tab menu

The following navigators are available:

• HTML navigator
• categorised HTML navigator
• CSS navigator
• JavaScript navigator
• VBScript navigator
• PHP navigator
• ASP navigator

In addition, there are two commands available in the menu:

Refresh the navigator tree.
Spider automatically refreshes the tree view when you save the document, or when you switch from one navigator to another. However, if you want to refresh the tree manually, use the button shown next to it.

Lock current navigator .
The navigator can handle block documents in different languages. The program detects whether the cursor is in the script block, in the CSS sheet, or maybe in the part containing the HTML code and automatically changes the navigator to the appropriate one.

In some cases, however, you may want to see only one navigator at a time. For example: you create an HTML document and sometimes use PHP script in it - constantly switching the navigator is not only distracting, it also takes up time and computer resources. In this case, you can lock the window using the command with the icon shown above.

When the navigator is locked, automatic detection of the block of code where the cursor is located stops working. However, you can still change the navigator manually using the menu buttons.

In addition, by using the arrow to the right of the button, you can display a submenu containing two additional commands that allow you to lock the current navigator type for all open documents of the same type (with the same filename extension as the current document), and to unlock the navigator for all similar documents.

Tree branches common to all navigators

Each of the navigators displays different data. However, they always have three branches in common - they are:

• Numbered bookmarks
• Named bookmarks
• To-Dos

They only appear when there are bookmarks or tasks defined in the editor. Using them, you can quickly find and go to the selected element regardless of the currently displayed navigator - clicking on the selected position will move the cursor to the appropriate place in the editor.

Tag navigator

The tree is built according to the order of the tags (all types of tag documents supported by the Spider) in the document and presents the tag hierarchy. Child elements are placed in the branches of the parent element.

For example, an HTML table will be represented by a tree that looks something like this:

+ <table>
    + <tr>
        + <td>
            + table cell contents

Categorised HTML navigator

Document elements are grouped in the tree by type, in separate branches there are:

• Images - list of images inserted in the document
• Links - a list of links to other documents
• Forms - a list of forms and their fields,
• Style sheets - a list of style sheets (nested and included), as well as their elements (even from attached sheets!)
• Scripts - list of client-side scripts (JavaScript, VBScript), nested and included
• Server-side scripts - a list whose elements point to server-side script blocks, such as PHP or ASP

CSS navigator

Sheet elements are grouped according to their type - in separate branches of the tree there are:

• AT-instructions - CSS instructions preceded by @ - @import, @media, @page, @font-face, @charset
• element selectors - the tag names used to create the style,
• classes - have a prefix . (dot), used in the markup document with the class attribute),
• identifiers - have a prefix # (hash) before the name, assigned to the elements of the markup document on the basis of the id attribute

JavaScript navigator

There are branches on the tree containing:

• Global variables - contains a list of all global variables used in the script
• JavaScript functions - contains a list of all functions declared in the script. If a function contains conditional statements, loops etc. these will be shown as branches starting from the branch with the function name.
• Script constructs - contains a list of script constructs (conditional statements, loops, etc.) used outside the script functions.

VBScript navigator

The VBScript component tree contains the following branches:

• Global constants - lists all global constants in the script
• Global variables - contains a list of all global variables in the script
• Classes - contains a list of all classes in the script. If a class has methods, these will be shown as branches starting from the branch with the class name. The content of the methods is shown similarly.
• Functions - contains a list of functions in the script. Analogous to methods in a class, you can access the constructs used in a function.
• Script constructs - contains a list of script constructs (conditional statements, loops, etc.) used outside the script functions.

PHP navigator

The tree contains two main branches where all the elements of the PHP script will be placed.

PHP scripts in the current document
The first main branch of the tree contains a list consisting of:

• Constants
• Global variables
• Classes declared in the script. A Class branch may have sub-branches containing the Properties and Methods of the class. Methods of a class may contain further sub-branches - identical to the branch Functions
• Functions - contains a list of all functions declared in the script. A branch of a function may contain branches Nested functions, Local variables, Script constructs
• Script constructs - contains a list of script constructs (conditional statements, loops, etc.) used outside the script functions.

Imported scripts
The second branch contains a list of scripts attached to the current script (e.g. using include()).

The content of each link script branch is analogous to the PHP Scripts branch in the current document and allows you to go to specific places in the linked document!

ASP navigator

Due to the possibility of using different languages in ASP technology, the ASP navigator will contain a tree for the language in which the script was written (JS or VBS).