Panel.toFront

Syntax

toFront(ctrl: PP.Ui.Control);

Parameters

ctrl. Item which is brought to the front.

Description

The toFront method brings the item to front.

Example

To execute the example, HTML page must contain links to PP.js script file and to PP.css styles file in the <body> tag of the HTML document of the <div> item with the panel identifier and the example must be placed in the <script> tag. Add a panel with two buttons in the document:

function createPanel() {
    // Create a panel
    panel = new PP.Ui.Panel({
        // Set parent item
        ParentNode: document.getElementById("panel"),
        // Set panel name
        Name: "Panel",
        // Set custom positioning of items
        IsAbsolutePositioning: false
    });
    // Create buttons
    button1 = new PP.Ui.Button({
        Content: "Button 1"
    });
    button2 = new PP.Ui.Button({
        Content: "Button 2"
    });
    // Add buttons to the panel
    panel.beginUpdate();
    panel.add(button1);
    panel.add(button2);
    panel.endUpdate();
}

As a result, the panel with two buttons is added to the document:

Check whether the Anchors could be used:

// Check whether the Anchors could be used
if (panel.supportAnchors()) {
    console.log("The Anchors could be used");
} else {
    console.log("The Anchors could not be used");
}

As a result, information whether the Anchors could be used is displayed in the console:

Anchors could not be used

Get panel sizes:

// Get panel sizes
console.log("Panel height: " + panel.getContentNode().clientHeight);
console.log("Panel width: " + panel.getContentNode().clientWidth);

As a result, panel sizes are displayed in the console:

Panel height: 21

Panel width: 150

get the contents of the item which is in coordinates (10, 10):

// Get contents of the item which is in coordinates (10, 10)
if (panel.getItemByPoint(10, 10) !== undefined) {
    console.log("Item contents: " + panel.getItemByPoint(10, 10).getContent());
} else {
    console.log("Items is absent");
}

As a result item contents or information about its absence is displayed in the console:

Item contents: Button 1

Set absolute positioning of panel items and bring the first button to the front:

// Set absolute positioning of items
panel.setIsAbsolutePositioning(true);
// Bring the first button to the front
panel.toFront(button1);

As a result the first button will be brought to the front and the second to the back:

Send the first button to the back:

panel.toBack(button1);

As a result the first button will be sent to the back and the second one will be on the front: