Create page htm include number 0~9 and rule, when you click to number or rule then data change the same image
You might be looking for something like the html range-type input, e.g. <input type="range" id="mySlider" min="0" value="5" max="9" step="1">. For example, see this description.
Related
I have 3 inputs for every div container (e.g. first-section, second-section ...), and I have several such div containers on my page, similar to this:
...
<div id="first-section">
<fieldset>
<legend>First Section</legend>
<input type="number" placeholder="000" id="input1" min="0" max="255" autofocus maxlength="3" required>
...
</fieldset>
</div>
<div id="second-section">
<fieldset>
<legend>Second Section</legend>
<input type="number" placeholder="000" id="input2" autofocus min="0" max="255" maxlength="3" required>
...
how can I use jQuery to move from input1 to input2 to input3 (not shown) to input4 (not shown) only after the user has entered the maxlength of input which is set to 3? My jQuery below does not work because when I move onto the third input (not shown), it keeps resetting the focus back to input 2.
$(':input').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength')){
$(this).nextAll(':input').first().focus();
if($('#input1').val().length==$('#input1').attr('maxlength')){
$('#input2').focus();
}
}
})
You can find the div that contains the current input, then find the next sibling of the div and the input inside the next div element and set the focus to that.
$(this).closest('div').next().find(':input').first().focus();
Demo: Fiddle
The above one has following issues:
unable to move to previous tab once its filled.
skips the text box which is already filled.
makes things worst if you have JS validations on any input fields.
Use the below jQuery plug-in its easy to configure and use:
Developer Site: http://www.mathachew.com/sandbox/jquery-autotab/
Documentation: https://github.com/Mathachew/jquery-autotab/blob/master/README.md
Includes both Angular and React examples
Cheers...
I've seen those draggable settings bars for random things, but I can't seem to remember what they were called, and thus am having a hard time to search it up on google.
It was one of those bars where if you dragged to the right, the value increases and if you dragged it to the left, the value decreases.
What's the easiest way to create one of these in html/css/js?
What you are looking for is called a range and is an input element:
<input type="range" min="1" max="10">
To get the out put you could use JavaScript and <output>:
<form oninput="x.value=parseInt(a.value)">
<input type="range" id="a" value="50">
<output name="x" for="a b"></output>
</form>
JSFiddle Example
I'm new to angular and banging my head against the wall over this:
I am making a re-usable slider element which will generate an input type="range" wrapped in a label.
I want the attributes defined on the directive to be applied to the child input element defined in the directive's template, which they do, but they also get added to the wrapping label element. This seems messy and I think I'm missing something fundamental.
What is the best way to do this? do I need to use a compile function, that seems like it would defeat the purpose of having a template in the directive?
current html:
<slider min="0" max="1000" step="1" label="foo" ng-model="slider1" value="750">
</slider>
current directive:
myApp.directive('slider', function() {
return {
restrict: 'AE',
scope:{
data:'=ngModel',
min:'#',
max:'#',
step:'#',
label:'#',
value:'='
},
replace: 'true',
template: '<label>{{label}}<input min="{{min}}" max="{{max}}" step="{{step}}" type="range" ng-model="data" value="{{value}}" />{{data}}</label>'
};
});
current output:
<label min="0" max="1000" step="1" label="foo" ng-model="slider1" value="250" class="ng-isolate-scope ng-pristine ng-valid ng-binding">
foo
<input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid">
</label>
desired output:
<label>
foo
<input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid">
</label>
This is strange. Though i haven't tried, i would guess the replace is adding the attributes of the slider element to the first element in your template which is label. Try adding another element in the template before your label, and try if replace: false does the same
<div class="filler></div><label>{{label}}<input min="{{min}}" max="{{max}}" step="{{step}}" type="range" ng-model="data" value="{{value}}" />{{data}}</label>
UPDATE
Since replate:true always seems to add the attributes, you will probably have to use replace:false, and create a compile or link function that deletes the element manually as in
link: function (scope, element, attrs) { angular.element(element).remove();
I see this question is a few months old so you've probably moved on now but I kinda just want to answer it anyway. Maybe it'll help other people.
I've only been using AngularJS for around 3 weeks now but I get the feeling that the messy output you're getting is typical of AngularJS and after all it's only messy if you're delving around in the generated html. AngularJS seems not to care too much about polluting the html with tags and attributes - it seems (to me in my opinion at least) to be about making reusable components and bits and making it easier to use them while coding.
I have found it's best not to use replace because then when you're inspecting your html it is harder to tell whether you've just used your directive or whether you simply put the html directly in the page. Additionally the docs mention that it's only real use case is for when you're generating SVG documents.
Let me use your example here to illustrate what I'm trying to say:
Source:
<some html />
<slider min="0" max="1000" step="1" label="foo" ng-model="slider1" value="750" />
<some other html />
Your desired result:
<some html />
<label>
text
<input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid" />
</label>
<some other html />
Result with replace:
<some html />
<label min="0" max="1000" step="1" label="foo" ng-model="slider1" value="250" class="ng-isolate-scope ng-pristine ng-valid ng-binding">
text
<input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid" />
</label>
<some other html />
Result without replace:
<some html />
<slider min="0" max="1000" step="1" label="foo" ng-model="slider1" value="250" class="ng-isolate-scope ng-pristine ng-valid ng-binding">
<label>
text
<input min="0" max="1000" step="1" type="range" ng-model="data" value="250" class="ng-pristine ng-valid" />
</label>
</slider>
<some other html />
I would suggest that when you're inspecting the html and you see your desired result how will you know whether you just wrote in the html or whether you used a directive. In the result without replace however the directive is explicitly named and it'll be impossible to mistake it for anything else. Also the html that gets inserted looks exactly like you expected it to without additional attributes on the label.
Of course you could use the compile function to remove the excess elements or attributes as mentioned by #frank but again I would suggest that this would still make your generated html less clear than the result without replace.
I would also just point out for future viewers of this question that the replace option of AngularJS directives is deprecated bearing this notice in the documentation: ([DEPRECATED!], will be removed in next major release - i.e. v2.0)
See documentation here: https://docs.angularjs.org/api/ng/service/$compile#-replace-deprecated-will-be-removed-in-next-major-release-i-e-v2-0-
i'm trying to make a slider example with HTML5 and Javascript but the code doesn't work
<script type="text/javascript">
function slider_change(val){
document.getElementById('slider_value').innerHtml=val;
}
</script>
<input type="range" id="slider" min="0" max="100" value="50"
step="2" onChange="slider_change(this.value)" />
<br/><br/>
Slider value : <span id="slider_value" >50</span>
appears the slider but no change in the inner HTML of the span .
The property is called innerHTML, not innerHtml
Good to see you have done everything right except innerHTML .. replace innerHtml by innerHTML
I am trying to create a form so that user can enter certain information and JavaScript will do the calculations for them. I've been trying to use http://demo.rsjoomla.com/calculation-form-example (the one on the left) to get the basics started and I can manipulate from there. So far though it's only working in IE.
Here's the basic layout of my code:
HTML
<input type="number" name="income1" value="0" onkeyup="update()">
<input type="number" name="income2" value="0" onkeyup="update()">
<input type="number" name="income3" value="0" onkeyup="update()">
JavaScript
var op1=document.getElementById('income1');
var op2=document.getElementById('income2');
var result=document.getElementById('income3');
if(op1.value=="" || op1.value!=parseFloat(op1.value)) op1.value=0;
if(op2.value=="" || op2.value!=parseFloat(op2.value)) op2.value=0;
result.value=0;
result.value=parseInt(result.value);
result.value=parseInt(result.value)+parseInt(op1.value) - parseInt(op2.value);
You wrote code that is looking for id
document.getElementById('income1');
Where is the id on the input?
<input type="number" name="income1" value="0" onkeyup="update()">
Name is not the same thing as id.
And your parseFloat check, you probably should look at isNaN(). And you are using parseInt() at the bottom, and you are using parseFloat() above!
If you're going to do getElementById, you need to have an ID in your element.
<input type="number" id="income1" value="0" onkeyup="update()">
var op1=document.getElementById('income1');
Or you could use jQuery (requires including jQuery source):
<input type="number" name="income1" value="0" onkeyup="update()">
var op1 = ${"input[name=income1]").val();
Alternatively, you could do this, assuming you only have one element named income1. This isn't a very good way to do this, but it should work.
<input type="number" name="income1" value="0" onkeyup="update()">
var op1=document.getElementsByName('income1')[0];