I want to make it possible for visitors of my website to add fraction in a input text field.
So if they push the '/' or a specific button on my website, in the text field a fraction line should popup and a number can be added in the numerator and denominator.
The same I would do for the exponent, when push the '^' or a specific button.
[edit] Maybe my question wasn't clear. I tried to create it myself, but I have really no idea how to start. I can create it in two separated fields, but I want the visitor to choose if he has to add a fraction.
I saw the solution in a flash website, but I thought with the introduction of html 5, flash would disappear.
This is the best solution i can come up. I dont really know how you would make a fraction like this in an input field.
Hope it helps
$('#input-main').change(function(){
$('.main').html($('#input-main').val());
})
$('#input-denom').change(function(){
$('.denom').html($('#input-denom').val());
})
$('#input-num').change(function(){
$('.num').html($('#input-num').val());
})
p {display: inline-block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<lable for="input-main">Number</lable>
<input id="input-main" type="text" value="">
<lable for="input-num">Numerator</lable>
<input id="input-num" type="text" value="">
<lable for="input-denom">Denominator</lable>
<input id="input-denom" type="text" value="">
<p class="main" >1</p><sup class="num">1</sup>⁄<sub class="denom">2</sub>
Related
I have a HTML input with maxlength=4 attribute on it and it works well.
The thing is when I type the last character - it hides the first one while i'm focused on the input. when I lose focus (blur) the inputs looks ok.
Here's a visual explanation:
While typing:
When I get to 4 it looks like this (1 is hidden):
When I lose focus:
Here is my HTML input:
<input name="input[input-1]" type="text" maxlength="4" style="letter-spacing:15px;" class="numeric">
How can I fix this?
provide your html css code here. if you are using type="number" and a fixed width it might be for the reserved place in type number for the increment and decrement arrows.
i can't see any problem here :
<input type="number" min="1" max="9999" value="1">
I changed the type of Price to number but it has placed the label to the left, how can I correct this?
http://i.imgur.com/73JOIlA.png
End Date* (YYYY-MM-DD) <input type="text" name="eDate"><br>
Price* <input type="number" name="price"><br>
You can do a couple of things. Some more simple than others.
I know I've fixed this in the past by simply using <br>
soo.. Price*<br> <input type="number" name="price"><br>
Let me know if that doesn't work, I can suggest other solutions, like using width, display: block and floats etc.
You could go with either floating, expanding the width of the input field or using a label tag to then put that display:block; like for example this:
label{display:block}
<form>
<label for="eDate">End Date* (YYYY-MM-DD)</label>
<input type="text" name="eDate"/>
<label for="price">Price*</label>
<input type="number" name="price"/>
</form>
This would be the way I would handle it, but feel free to ask additional information if you'd require it!
I have a design question. I have a few input boxes in my form with some default values (numbers). I was wondering if I should have a mechanism to blank them out when user clicks on the box to change them. It would look cool. But if I leave them as it is, it might just be more useful for the user in case he wants to alter only a few digits or copy the figure..
I apologize if this is not the right forum for this type of questions.
You can specify a placeholder-attribute for input like this:
<input type="text" value="" placeholder="Some text" />
JSFiddle is here
The text "Some text" will disappear if the user takes some input.
This snipplet doesn't require any javascript and is really nice i think. Have Fun!
Personally, I wouldn't. Beware of "creeping featurism" :)
Just have the above saying e.g. "your phone number", people should manage.
Here's the simplest possible way of removing the digits on "click":
HTML
<input name="" type="text" value="2">
JS:
jQuery(document).ready(function($) {
$('input').click(function(){
$(this).val('');
});
});
Fiddle:
http://jsfiddle.net/k47L4/
I want to make a HTML form for a webpage that is re-size-able ranging form full HD to smartphones. I want the distance form the label to the input to be the same distance such that if the form was to be placed in a div that for instance is 600px and the label and input field as line totals to 300px (including padding,margin, etc) that the fields order in 2 columns. If the div than after re-size would become 900px the form would spread over 3 columns.
The fields should then be ordered in the following manner:
with 2 columns:
F1 F4
F2 F5
F3 F6
with 3 columns:
F1 F3 F5
F2 F4 F6
Now since i am relatively new to HTML and CSS i personally would do this with a lot of div's but that seems a little bit redundant or just as really bad coding. I tried to do this with a <span style="width:300px;"> but the span wont be 300 px nor will it include the input field.
my current form:
<div class='main_text' style='width:55%;padding-left:10%;padding-right:10%;'>
<label>Name:</label>
<input id="name" type="text" value='Name'/><br />
Age:
<input id="age" type="text" value='21'/><br />
Insterests:
<input id="interests" type="text" value='Socer'/><br />
Targets:
<input id="targets" type="text" value='stop smoking for at least 2 years'/><br/>
Other:
<input id="other" type="text" value='I have 3 cats'/><br />
</div>
So the question in short is:
Is there a more efficient way to group-up a label with an input field so that they become block-like?
P.S. Im using XHTML 1.0 transitional
I suggest taking a look at existing frameworks like Bootstrap or Foundation that will provide you with a good base to start writing a responsive design.
For the record, a span is an inline element hence you cannot define a width on it. Declare it as display: inline-block; and you'll notice the width property is now respected.
It's common to see radio buttons and checkboxes element tuples wrapped from the label, like this:
<label> <input /> text </label>
However you will find more and better examples on bootstrap.
First of all: use the <label>´s "for"-attribute to link the label to the input-field:
<label for="name">Name:</label>
<input id="name" type="text" value='Name'/><br />
And then, no: if you want to "group them together", in a box with borders for example, the best is to use div. That´s my opinion.
EDIT:
I´m not that good at reading the whole question before I answer.
I agree that you should take a look at a responsive framework if you want to make things easier for you when you create web pages that should look great on mobile as well as desktop.
Twitter bootstrap is one: http://twitter.github.io/bootstrap/
Foundation is another: http://foundation.zurb.com/
Find one you like and try it out. Personally, I like Bootstrap the most.
I have the following codes, its part of the application I am building for iPhone/android phones.
<li><span>X</span><input type="text" pattern="[0-9]*" id="anum" maxlength="9" placeholder="Account Number""/></li>
<li><span>X</span><input type="text" id="bname" placeholder="Beneficiary Name" /></li>
the "X" between the spans is suppose to appear when on a keyboard a button is pressed. after the "x" has appeared the user can remove the entire text in that field by pressing on the "x". when there is no element in the field at all, the "x" is not visible. But i cant make it happen.
I am using webapp-net. I would be glad if some could help me with this.
I'm not either quite familiar with WebApp.Net, but you might consider on using a form and a reset button, such as:
<input type="button" value="X" onClick="this.form.reset()" />
or something like:
<input type="reset" value="X">
inside of a <form> with the rest text inputs, and having in mind an html-like enviroment (even thought this might not clear a radio/checkbox inputs).
If I haven't got you wrong, you might also consider on looking if there is something like placeholders for textareas and/or text inputs on that framework. Good luck.