JavaFX: Setting absolute position for circle

This entry is part 47 of 55 in the series JavaFX

In our previous example, we have put the circle in a stack pane.  If you look at the constructors for Circle object, we should be able to set the position of the circle in the scene.

Circle(double centerX, double centerY, double radius, Paint fill)

As was mentioned in an earlier post, we can put the circle in a Pane object and this will allow the absolute position of the circle to take effect.

package javafxapplication12;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;

public class CirclePosition extends Application {

    @Override
    public void start(Stage stage) {

        stage.setTitle("Codecrawl.com");

        Pane pane = new Pane();

        Scene scene = new Scene(pane, 500, 400);
        stage.setScene(scene);

        pane.setStyle("-fx-background-color: lightgray;");

        Circle circle = new Circle();
        circle.setCenterX(120);
        circle.setCenterY(250);
        circle.setRadius(50);
        circle.setFill(Color.CORNFLOWERBLUE);

        pane.getChildren().add(circle);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

circleposition

 

jQuery UI & Utilities: Position

This entry is part 1 of 3 in the series jQuery UI Utilities

jQuery UI Position – Default functionality

Use the form controls to configure the positioning, or drag the positioned element to modify its offset. 
Drag around the parent element to see collision detection in action.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Position - Default functionality</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <style>
        #parent {
            width: 60%;
            height: 40px;
            margin: 10px auto;
            padding: 5px;
            border: 1px solid #777;
            background-color: #fbca93;
            text-align: center;
        }

        .positionable {
            position: absolute;
            display: block;
            right: 0;
            bottom: 0;
            background-color: #bcd5e6;
            text-align: center;
        }

        #positionable1 {
            width: 75px;
            height: 75px;
        }

        #positionable2 {
            width: 120px;
            height: 40px;
        }

        select, input {
            margin-left: 15px;
        }
    </style>
    <script>
        $(function () {
            function position() {
                $('.positionable').position({
                    of: $('#parent'),
                    my: $('#my_horizontal').val() + ' ' + $('#my_vertical').val(),
                    at: $('#at_horizontal').val() + ' ' + $('#at_vertical').val(),
                    collision: $('#collision_horizontal').val() + ' ' + $('#collision_vertical').val()
                });
            }

            $('.positionable').css('opacity', 0.5);

            $('select, input').bind('click keyup change', position);

            $('#parent').draggable({
                drag: position
            });

            position();
        });
    </script>
</head>
<body>

<div id='parent'>
    <p>
        This is the position parent element.
    </p>
</div>

<div class='positionable' id='positionable1'>
    <p>
        to position
    </p>
</div>

<div class='positionable' id='positionable2'>
    <p>
        to position 2
    </p>
</div>

<div style='padding: 20px; margin-top: 75px;'>
    position...
    <div style='padding-bottom: 20px;'>
        <b>my:</b>
        <select id='my_horizontal'>
            <option value='left'>left</option>
            <option value='center'>center</option>
            <option value='right'>right</option>
        </select>
        <select id='my_vertical'>
            <option value='top'>top</option>
            <option value='center'>center</option>
            <option value='bottom'>bottom</option>
        </select>
    </div>
    <div style='padding-bottom: 20px;'>
        <b>at:</b>
        <select id='at_horizontal'>
            <option value='left'>left</option>
            <option value='center'>center</option>
            <option value='right'>right</option>
        </select>
        <select id='at_vertical'>
            <option value='top'>top</option>
            <option value='center'>center</option>
            <option value='bottom'>bottom</option>
        </select>
    </div>
    <div style='padding-bottom: 20px;'>
        <b>collision:</b>
        <select id='collision_horizontal'>
            <option value='flip'>flip</option>
            <option value='fit'>fit</option>
            <option value='flipfit'>flipfit</option>
            <option value='none'>none</option>
        </select>
        <select id='collision_vertical'>
            <option value='flip'>flip</option>
            <option value='fit'>fit</option>
            <option value='flipfit'>flipfit</option>
            <option value='none'>none</option>
        </select>
    </div>
</div>

</body>
</html>
Try The Code

jQuery Mobile: Icon positioning

This entry is part 47 of 73 in the series jQuery Mobile

By default, icons in input buttons are placed to the left of the button text.

We have placed our icons on the left and this default may be overridden using the data-iconpos attribute to set the icon position to ‘right’, ‘top’, or ‘bottom’.

In case of link buttons or button elements you have to add an icon position class (ui-btn-icon-[value]).

Icon Position
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Button Icon Positioning</h1></div>
    <a href='index.html' class='ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-left'>Left</a>
    <a href='index.html' class='ui-btn ui-shadow ui-corner-all ui-icon-arrow-r ui-btn-icon-right'>Right</a>
    <a href='index.html' class='ui-btn ui-shadow ui-corner-all ui-icon-arrow-u ui-btn-icon-top'>Top</a>
    <a href='index.html' class='ui-btn ui-shadow ui-corner-all ui-icon-arrow-d ui-btn-icon-bottom'>Bottom</a>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code

In the highlighted line, we have positioned the icon on the left using ui-btn-icon-left.

 

 

jQuery Mobile: Icon Position Right Of Checkbox

This entry is part 17 of 73 in the series jQuery Mobile

To place the checkbox icon on the right hand side of the page, we use data-iconpos=’right’ attribute.

<fieldset data-role='controlgroup' data-iconpos='right'>
Checkbox Icon Position
<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js'></script>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header'><h1>Icon Position Right Checkbox</h1></div> 
    <br>
    <p>Icon Position right</p>
    <form>
        <fieldset data-role='controlgroup' data-iconpos='right'>
            <input type='checkbox' name='checkbox_a' id='checkbox_a'>
            <label for='checkbox_a'>One</label>
            <input type='checkbox' name='checkbox_b' id='checkbox_b'>
            <label for='checkbox_b'>Two</label>
            <input type='checkbox' name='checkbox_c' id='checkbox_c'>
            <label for='checkbox_c'>Three</label>
        </fieldset>
    </form>

    <div data-role='footer' data-position='fixed'>
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>
Try The Code