jQuery spinner with HTML not working

StackOverflow https://stackoverflow.com/questions/23401593

  •  13-07-2023
  •  | 
  •  

Question

I am trying to use jQuery spinner in my HTML. This code works fine in JSFiddle http://jsfiddle.net/Uygt2/80/ but it does not work with the following html run from any browser. It shows just the regular textbox. I have been scratching my head for a while but could not figure out what is wrong with the code below:

<html>
<head>
<title>website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/fontPicker.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script type="text/javascript">
  $( document ).ready(function() {
    $("input").spinner({
        max: 3,
        min: 0
    }).on('input', function () {
    var val = this.value,
     $this = $(this),
     max = $this.spinner('option', 'max'),
     min = $this.spinner('option', 'min');
     if (!val.match(/^\d+$/)) val = 0; //we want only number, no alpha
 this.value = val > max ? max : val < min ? min : val;
 });
});
</script>
</head>
<body>
<div id="layout">
    <!-- Wrappers for website modified using css file -->

    <!-- Header -->
    <div id="header-wrapper">Header</div>

    <!-- Center Column -->
    <div id="column-center">
        <!-- Code display -->
        <div id="code-area">
            <pre>code is displayed here</pre>
        </div>

        <!-- Preview -->
        <div id="preview-area">
        </div>

    </div>

    <!-- Left Column -->
    <div id="column-left">
        <div id="settings">
            Number of Boxes: <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
        <br><br>
        For each box: <br><br>
        Height: <input type="text" value="0"> px
        <input id="spinner" name="value">
        <span style="display:inline-block; width: 12px;"></span>
        Width: <input type="text"> px<br>
    </div>

</div>

<!-- Right Column -->
<div id="column-right">Column right</div>
<!-- Footer -->
<div id="footer-wrapper">Footer</div>

Was it helpful?

Solution

When running locally, you can't use links like:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

The //ajax.googleapis.com/ part will translate into file://ajax.googleapis.com/ and fail.

When testing locally, you'll need to type out a full URL, like:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top