JavaFX: Removing CSS effects to a Button

This entry is part 23 of 55 in the series JavaFX

When a mouse is moved over a button, we can apply an effect such as changing the color of the button.

However, when the mouse is out of the button or out of any other nodes, we will want it to get back to its original state.

We can use remove() method if we have only one class or removeAll() method if we have more than one CSS class.

package javafxapplication19;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class JavaFXApplication19 extends Application {

    Button btn = new Button("Codecrawl");

    DropShadow ds = new DropShadow();

    @Override
    public void start(Stage stage) {

        stage.setTitle("JavaFX Program!");

        StackPane stackpane = new StackPane();

        Scene scene = new Scene(stackpane, 300, 250);
        scene.getStylesheets().add("javafxapplication19/style.css");
        stage.setScene(scene);

        btn.setOnMouseEntered(e -> mouseEntered());

        btn.setOnMouseExited(e -> mouseExited());

        stackpane.getChildren().add(btn);

        stage.show();
    }

    public void mouseEntered() {

        btn.getStyleClass().add("button1");
        btn.setText("Mouse In");

    }

    public void mouseExited() {

        btn.getStyleClass().remove("button1");
        btn.setText("Mouse Out");

    }

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

}

remove

Here is the simple style.css that we use to set the color of the button.

.button1 {
    
    -fx-base: blue;    
    
}

 

 

Javascript: Mouse event

This entry is part 26 of 27 in the series Javascript Tutorial

Mouse event is probably the most common event used in Javascript or web programming.

<!DOCTYPE html>
<html>
<head>
    <script>
        function mouseOver() {
            document.getElementsByClassName("lineClass")[0].style.color = "#C0D9FE";
            document.getElementsByClassName("lineClass")[1].style.color = "#C0D9FE";
            document.getElementsByClassName("lineClass")[2].style.color = "#C0D9FE";
        }
        function mouseOut() {
            document.getElementsByClassName("lineClass")[0].style.color = "silver";
            document.getElementsByClassName("lineClass")[1].style.color = "silver";
            document.getElementsByClassName("lineClass")[2].style.color = "silver";
        }
    </script>
</head>
<body>
<div class="lineClass">This is line 1</div>
<div class="lineClass">This is line 2</div>
<div class="lineClass">This is line 3</div>
<h1 onmouseover="mouseOver();" onmouseout="mouseOut();">Mouse over this text</h1>

</body>
</html>

JS Fiddle

We have bind 2 events to a single h1 element.  When the mouse is over the line, mouseOver function is called changing the lineClass related lines to a different color.

Look at how lineClass has turned the 3 div lines into an array with 3 items in the array.  They are accessed with [0], [1] and [2].

You can also pass the lineClass into a variable.  This will make the code look cleaner.

<!DOCTYPE html>
<html>
<head>
    <script>
        function mouseOver() {
            var lineC = document.getElementsByClassName("lineClass")
            lineC[0].style.color = "#C0D9FE";
            lineC[1].style.color = "#C0D9FE";
            lineC[2].style.color = "#C0D9FE";
        }
        function mouseOut() {
            var lineC = document.getElementsByClassName("lineClass")
            lineC[0].style.color = "red";
            lineC[1].style.color = "red";
            lineC[2].style.color = "red";
        }
    </script>
</head>
<body>
<div class="lineClass">This is line 1</div>
<div class="lineClass">This is line 2</div>
<div class="lineClass">This is line 3</div>
<h1 onmouseover="mouseOver();" onmouseout="mouseOut();">Mouse over this text</h1>

</body>
</html>

JS Fiddle – simplified

In the above simplified JS Fiddle, I have passed the lineClass into a variable lineC as shown in line 2 below.

function mouseOver() {
    var lineC = document.getElementsByClassName("lineClass")
    lineC[0].style.color = "#C0D9FE";
    lineC[1].style.color = "#C0D9FE";
    lineC[2].style.color = "#C0D9FE";
}

jQuery UI & Tooltips: Place tooltip near the mouse

This entry is part 7 of 7 in the series jQuery UI Tooltips

jQuery UI Tooltip – Track the mouse

Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Tooltip - Track the mouse</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>
        label {
            display: inline-block;
            width: 5em;
        }
    </style>
    <script>
        $(function () {
            $(document).tooltip({
                track: true
            });
        });
    </script>
</head>
<body>

<p><a href='#' title='That's what this widget is'>Tooltips</a> can be attached to any element. When you hover
    the element with your mouse, the title attribute is displayed in a little box next to the element, just like a
    native tooltip.</p>

<p>But as it's not a native tooltip, it can be styled. Any themes built with
    <a href='http://themeroller.com' title='ThemeRoller: jQuery UI's theme builder application'>ThemeRoller</a>
    will also style tooltips accordingly.</p>

<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>

<p><label for='age'>Your age:</label><input id='age' title='We ask for your age only for statistical purposes.'></p>

<p>Hover the field to see the tooltip.</p>

</body>
</html>
Try The Code

jQuery: Mouse events

This entry is part 9 of 33 in the series jQuery Tutorial

Ever hover your mouse over a line and found that the line color changed?

This can be done easily using jQuery.

<!doctype html>
<html>
<head>
    <title>hover demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        ul {
            color: blue;
        }
    </style>
    <script>
        $(function () {
            $('li').mouseover(
                    function () {
                        $(this).css('color', 'red');
                    }
            );
            $('li').mouseout(
                    function () {
                        $(this).css('color', 'blue');
                    }
            )
        });
    </script>
</head>
<body>

<ul>
    <li>Milk</li>
    <li>Bread</li>
</ul>
</body>
</html>

Try The Code

With jQuery, it acts on the li element using $(‘li’).

It is also similar to writing jQuery(‘li’) where the $ is replaced by jQuery.

Here are other jQuery related mouse events.

Mouse EventDescription
.click()triggers an event when the mouse is clicked.
.dblclick()triggers an event when the mouse is double clicked.
.hover()event to be executed when the mouse pointer enters and leaves the elements.
.mousedown()Binds an event handler to the “mousedown”
.mouseenter()triggers an event when the mouse enters an element.
.mouseleave()event is fired when the mouse leaves an element.
.mousemove()Bind an event handler to the “mousemove” Javascript event.
.mouseout()Bind an event handler to the “mouseout” event.
.mouseover()When the mouse is over an element.
.mouseup()Fired on a mouseup event.
.toggle()Events to be executed on alternate clicks.