jQuery UI & Spinner: Overflow

This entry is part 4 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Overflow

Overflowing spinner restricted to a range of -10 to 10. For anything above 10, it’ll overflow to -10, and the other way round.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Overflow</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='//jqueryui.com/resources/demos/external/jquery.mousewheel.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'>
    <script>
        $(function () {
            $('#spinner').spinner({
                spin: function (event, ui) {
                    if (ui.value > 10) {
                        $(this).spinner('value', -10);
                        return false;
                    } else if (ui.value < -10) {
                        $(this).spinner('value', 10);
                        return false;
                    }
                }
            });
        });
    </script>
</head>
<body>

<p>
    <label for='spinner'>Select a value:</label>
    <input id='spinner' name='value'>
</p>

</body>
</html>

Try The Code

jQuery UI & Spinner: Map

This entry is part 6 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Map

Google Maps integration, using spinners to change latitude and longitude.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Map</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='http://maps.google.com/maps/api/js?sensor=false'></script>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//jqueryui.com/resources/demos/external/jquery.mousewheel.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'>
    <script>
        $(function () {
            function latlong() {
                return new google.maps.LatLng($('#lat').val(), $('#lng').val());
            }

            function position() {
                map.setCenter(latlong());
            }

            $('#lat, #lng').spinner({
                step: .001,
                change: position,
                stop: position
            });

            var map = new google.maps.Map($('#map')[0], {
                zoom: 8,
                center: latlong(),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
        });
    </script>
    <style>
        #map {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>

<label for='lat'>Latitude</label>
<input id='lat' name='lat' value='44.797'>
<br>
<label for='lng'>Longitude</label>
<input id='lng' name='lng' value='-93.278'>

<div id='map'></div>

</body>
</html>
Try The Code

jQuery UI & Spinner: Decimal points

This entry is part 5 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Decimal

Example of a decimal spinner. Step is set to 0.01. 
The code handling the culture change reads the current spinner value, then changes the culture, then sets the value again, resulting in an updated formatting, based on the new culture.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Decimal</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='//jqueryui.com/resources/demos/external/jquery.mousewheel.js'></script>
    <script src='//jqueryui.com/resources/demos/external/globalize.js'></script>
    <script src='//jqueryui.com/resources/demos/external/globalize.culture.de-DE.js'></script>
    <script src='//jqueryui.com/resources/demos/external/globalize.culture.ja-JP.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'>
    <script>
        $(function () {
            $('#spinner').spinner({
                step: 0.01,
                numberFormat: 'n'
            });

            $('#culture').change(function () {
                var current = $('#spinner').spinner('value');
                Globalize.culture($(this).val());
                $('#spinner').spinner('value', current);
            });
        });
    </script>
</head>
<body>

<p>
    <label for='spinner'>Decimal spinner:</label>
    <input id='spinner' name='spinner' value='5.06'>
</p>

<p>
    <label for='culture'>Select a culture to use for formatting:</label>
    <select id='culture'>
        <option value='en-EN' selected='selected'>English</option>
        <option value='de-DE'>German</option>
        <option value='ja-JP'>Japanese</option>
    </select>
</p>

</body>
</html>
Try The Code

jQuery UI & Spinner: Basic spinner

This entry is part 1 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Default functionality

Enhance a text input for entering numeric values, with up/down buttons and arrow key handling.

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - 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='/resources/demos/external/jquery.mousewheel.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'>
    <script>
        $(function () {
            var spinner = $('#spinner').spinner();

            $('#disable').click(function () {
                if (spinner.spinner('option', 'disabled')) {
                    spinner.spinner('enable');
                } else {
                    spinner.spinner('disable');
                }
            });
            $('#destroy').click(function () {
                if (spinner.data('ui-spinner')) {
                    spinner.spinner('destroy');
                } else {
                    spinner.spinner();
                }
            });
            $('#getvalue').click(function () {
                alert(spinner.spinner('value'));
            });
            $('#setvalue').click(function () {
                spinner.spinner('value', 5);
            });

            $('button').button();
        });
    </script>
</head>
<body>

<p>
    <label for='spinner'>Select a value:</label>
    <input id='spinner' name='value'>
</p>

<p>
    <button id='disable'>Toggle disable/enable</button>
    <button id='destroy'>Toggle widget</button>
</p>

<p>
    <button id='getvalue'>Get value</button>
    <button id='setvalue'>Set value to 5</button>
</p>

</body>
</html>
Try The Code