I am using Dojo for tooltip. When, user move over the icon the message should be displayed.
.claro .dijitTooltipConnector {
background-image: none;
background-repeat: no-repeat;
border: 0 none;
height: 14px;
width: 16px;
z-index: 2;
}
I want this icon next to this DataTextBox. Who to do this? Please help
<td>
<p style="padding-left: 100px;">
<label id="acid">Date for CC:</label>
<input dojoType="dijit/form/DateTextBox" name="datecc" id="datecid" style="width:200px;" maxlength="50" />
</p>
</td>
Have you tried using dijit/Tooltip?
A simplified example from the documentation:
<button id="buttonId" data-dojo-type="dijit/form/Button">Button Text</button>
<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'buttonId',position:['above']">
Tooltip Content
</div>
So in your case you probably want a dijit/Tooltip whose connectId value refers to datecid and whose position value is ['left','right'] or whatever your position preferences are. (If it can't fit on the left, it'll go right as its second-choice.)
Note that this example uses HTML ID values, but other examples can show CSS selectors. (I've made a custom subclass that supports attach-point names, but it's still very experimental and hacky.)
Try using "dijit.showTooltip()" to show the tooltip at any place instantly, without need to write any HTML code for tooltips. (similarly, "dijit.hideTooltip" for hiding the same). Let me give a small example of how you can use it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox", "dijit/Tooltip"]);
function showTooltip() {
var domNode = dijit.byId('datefld').domNode; //domNode to which the tooptip must point to
dijit.showTooltip("Enter your date of birth here!!", domNode,["above"]); // you can use "above" or "below" or "right" or "left"
}
function hideTooltip() {
var domNode = dijit.byId('datefld').domNode;
dijit.hideTooltip(domNode);
}
</script>
</head>
<body class="claro">
<label for="firstname">Name: </label>
<input type="text" name="firstname" data-dojo-type="dijit/form/ValidationTextBox" id="firstname" promptMessage="Enter your name here!"/><br/><br/>
<label for="firstname">DOB : </label>
<input type="text" name="datefld" data-dojo-type="dijit/form/DateTextBox" id="datefld" promptMessage="Enter your date of birth here!"/>
<br/><br/>
<span onmouseover="showTooltip()" onmouseout="hideTooltip()">hover here for tip!!</span>
</body>
</html>
Note: This is a bit legacy way of coding mixed with the new AMD design. But, this would be more elegant for your scenario.
Related
As in title, I would like to see what I'm writing by input text.
There is my code:
function setLogo(txtLogo){
//edit logo by textarea
var myLogo = $("#title-logo");
myLogo.text(txtLogo);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtLogo" onkeyup="setLogo(this)" value="Logo Text">
<h2 id="title-logo"></h2>
When I'm writing I can see [object HTMLInputElement] inside h2 but if I'm not writing nothing I can't see nothing on it. Any ideas?
You don't have to set the object txtLogo as text, but instead its value.
function setLogo(txtLogo){
//edit logo by textarea
var myLogo = $("#title-logo");
myLogo.text(txtLogo.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtLogo" onkeyup="setLogo(this)" value="Logo Text">
<h2 id="title-logo"></h2>
In your case, you are passing an element. But you need to pass the text value of this element. You can solve this problem in two ways.
Add the value parameter to txtLogo. It should be like this:
myLogo.text(txtLogo.value);
Or you can write the same parameter for this, in event onkeyup, inside the <input> tag. Like this:
onkeyup="setLogo(this.value)"
I am using the ng-file-upload directive to upload files. I have a scenario where the number of files to be uploaded is decided dynamically. Also I have created have a slightly deviated scenario form the standard where Upload and Submit buttons are separate and needless to say do different actions.
Now what I want to do is get the Choose File ie. <input type="file"> and Upload Button on the same line but I have not been able to do so.
My Relevant Markup:
<input type="file" ngf-select ng-model="input.value" name="{{input.name}}" ngf-model-invalid="errorFile" required>
<button type="button" ng-show="input.value !== null" ng-click="uploadFile(input.value, $index)">Upload File</button>
<span ng-show="input.value.progress >= 0">
<div class="progress" style="width:{{input.value.progress}}%" ng-bind="input.value.progress + '%'"></div>
</span>
What can I do in this case?
You can try to float-right the button (see here)
Like this:
<style type="text/css">
div.inline { float:left; }
.clearBoth { clear:both; }
</style>
and at the end clear the float with class clearBoth
Is there a way I can also set some label text for each steps in the HTML5 type=range control. Basically I have a range control <input type="range" step=1 min=0 max=4> and for each steps I want some label to be shown in the control. Is there a way to do this?
I've put together for you.
// define a lookup for what text should be displayed for each value in your range
var rangeValues =
{
"1": "You've selected option 1!",
"2": "...and now option 2!",
"3": "...stackoverflow rocks for 3!",
"4": "...and a custom label 4!"
};
$(function () {
// on page load, set the text of the label based the value of the range
$('#rangeText').text(rangeValues[$('#rangeInput').val()]);
// setup an event handler to set the text when the range value is dragged (see event for input) or changed (see event for change)
$('#rangeInput').on('input change', function () {
$('#rangeText').text(rangeValues[$(this).val()]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="rangeInput" name="rangeInput" step="1" min="1" max="4">
<label id="rangeText" />
I guess the easiest solution (plain Javascript) is:
<fieldset>
<label for="rangeVal">resolution (dpi):</label>
<input type ="range" max="1000" min="20"
oninput="document.getElementById('rangeValLabel').innerHTML = this.value;"
step="1" name="rangeVal" id="rangeVal" value="200">
</input>
<em id="rangeValLabel" style="font-style: normal;"></em>
</fieldset>
This code does not need jQuery nor CSS and should work on any browser that supports the range input type.
Here's an alternative solution, no jQuery required. Uses the HTML5 oninput event handler, and valueAsNumber property of the input element.
Works on my machine certification: Chrome v54
<form name="myform" oninput="range1value.value = range1.valueAsNumber">
<input name="range1" type="range" step="1" min="0" max="4" value="1">
<output name="range1value" for="range1" >1</output>
</form>
OP,
I put together a demo that uses a range input with corresponding <p> tags that act as both labels for the current state of the slider, as well as triggers to change the slider's value.
Plunk
http://plnkr.co/edit/ArOkBVvUVUvtng1oktZG?p=preview.
HTML Markup
<div class="rangeWrapper">
<input id="slide" type="range" min="1" max="4" step="1" value="1" />
<p class="rangeLabel selected">Label A</p>
<p class="rangeLabel">Label B</p>
<p class="rangeLabel">Label C</p>
<p class="rangeLabel">Label D</p>
</div>
Javascript
$(document).ready(function(){
$("input[type='range']").change(function() {
slider = $(this);
value = (slider.val() -1);
$('p.rangeLabel').removeClass('selected');
$('p.rangeLabel:eq(' + value + ')').addClass('selected');
});
$('p.rangeLabel').bind('click', function(){
label = $(this);
value = label.index();
$("input[type='range']").attr('value', value)
.trigger('change');
});
});
CSS
input[type="range"] {
width: 100%;
}
p.rangeLabel {
font-family: "Arial", sans-serif;
padding: 5px;
margin: 5px 0;
background: rgb(136,136,136);
font-size: 15px;
line-height 20px;
}
p.rangeLabel:hover {
background-color: rgb(3, 82, 3);
color: #fff;
cursor: pointer;
}
p.rangeLabel.selected {
background-color: rgb(8, 173, 8);
color: rgb(255,255,255);
}
Also worth nothing, if you're interested in showing the current value as a label/flag to the user, (instead of many) there's a great article by Chris Coyier on value bubbles for range sliders.
There is no native way of doing it. And as input[type=range] is very poorly supported, I will recommend using jQuery UI slider and the way of attaching labels found here in answer.
You can use jSlider. Its a jQuery slider plugin for range inputs.
https://github.com/egorkhmelev/jslider
Just check out the demos and documentation. Hope this helps.
FWIW the standard (HTML 5.1, HTML Living Standard), specifies a label attribute for options when using a datalist. Sample code here.
This isn't implemented by any browser yet.
I'm not a web guy, so this might be something really simple I'm missing, but:
Consider the following page:
http://pastehtml.com/view/1bg9qno.html
Which is basically a list of <input>s, and each input has a helper <span> with text (that will change along with the input's value on keyUp).
So when the list is long enough (like in the above HTML page), if you tab thru the inputs, you will eventually get to the input on the bottom of the page, tab again, and the browser will scroll down to the next input.
In my case, the input has the helper text which is crucial to my app.
The problem is that when the user tabs down to the input that is not visible, the browser only brings that input into the view, and not his entire parent (<div class="item">) which contains the helper text. As a result, this helper text is not visible to the user while he enters stuff in the input.
How can one tell the browser to bring the entire parent into view when focusing the out-of-view input?
Is there any elegant solution?
BTW: This doesn't happen in Chrome, since Chrome always scrolls down a part-page, but it always happens in Firefox which always scrolls as little as possible to the input.
The HTML looks like this:
<body>
<div class="item">
<input type="text" value="text" />
<br />
<span>helper text</span>
</div>
<hr />
...
<hr />
<div class="item">
<input type="text" value="text" />
<br />
<span>helper text</span>
</div>
</body>
<html>
<head>
<script>
function scrollParentIntoView(elem){
setTimeout(function(){
var children = elem.parentNode.children;
var lastChild = children[children.length - 1];
lastChild.scrollIntoView();
elem.parentNode.scrollIntoView();
//elem.ScrollIntoView();
},1);
}
</script>
</head>
<body>
...
<div>
<input onfocus="scrollParentIntoView(this);" />
...
<p>end</p>
</div>
...
</body>
</html>
I've tested on FF and Chrome and seems to do the job - you can see the input and 'end' when each '...' is replaced with a dozen tags
Here is a solution using jQuery. It's based on the height of your item container.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".item input").focus(function() {
var parent = $(this).parent();
// Check if the bottom of the item container is below the viewport
if ($(parent).position().top + $(parent).height() > $(window).scrollTop() + $(window).height())
{
// Adjust the scroll position according to the height of the item container
$(window).scrollTop($(window).scrollTop() + $(parent).height());
}
});
});
</script>
Edit
Here is a demo for you: http://pastehtml.com/view/1bnv1xb.html
This Javascript works in FF 3.6, IE 8, Safari 4, and Chrome 3.1. It doesn't require JQuery, doesn't need setTimeouts, and can be condensed to about 8 lines:
//Collect the elements
var ALL = document.getElementsByTagName("INPUT");
for(x=0;x<ALL.length;x++) {
//Add relative position style to allow offset math
ALL.style.position = 'relative';
ALL[x].onfocus = function() {
//Find scroll offset distance
var temp = this.offsetParent.offsetTop +
this.offsetParent.offsetHeight -
document.documentElement.clientHeight;
//Detect webkit browser and apply scroll offset as appropriate
window.devicePixelRatio ?
document.body.scrollTop = temp :
document.documentElement.scrollTop = temp;
}
}
Of course, the obvious solution here is to put all the important content above the input element, but it's obvious that that won't do for whatever reason, so here's another solution:
Remember that tabindex can be used to allow any element to be focused. This means that we can simply drop a tabindex on the parent of the input elements to allow the entire parent to gain focus and scroll into view.
However, this also means that tab must be tapped twice to get the input element focused. You will also need to explicitly set tabindex on the input element to have them be the next in line to gain focus.
<ol id="input">
<li tabindex="3">
<input type="text" tabindex="5" />
<p>Helper Text</p>
</li>
<li tabindex="7">
<input type="text" tabindex="10" />
<p>Helper Text</p>
</li>
</ol>
You'll also want to give the parent elements a :focus style instead of the rather ugly dotted outline.
See: http://www.jsfiddle.net/F2fwy/2
I would like to insert a descriptive text inside an input element that disappers when the user click on it.
I know it is a very common trick, but I do not know how to do that..
What is the simplest/better solution?
If you're using HTML5, you can use the placeholder attribute.
<input type="text" name="user" placeholder="Username">
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
A better example would be the SO search button! That's where I got this code from. Viewing page source is a valuable tool.
In my opinion, the best solution involves neither images nor using the input's default value. Rather, it looks something like David Dorward's solution.
It's easy to implement and degrades nicely for screen readers and users with no javascript.
Take a look at the two examples here:
http://attardi.org/labels/
I usually use the second method (labels2) on my forms.
The common approach is to use the default value as a label, and then remove it when the field gains the focus.
I really dislike this approach as it has accessibility and usability implications.
Instead, I would start by using a standard element next to the field.
Then, if JavaScript is active, set a class on an ancestor element which causes some new styles to apply that:
Relatively position a div that contains the input and label
Absolutely position the label
Absolutely position the input on top of the label
Remove the borders of the input and set its background-color to transparent
Then, and also whenever the input loses the focus, I test to see if the input has a value. If it does, ensure that an ancestor element has a class (e.g. "hide-label"), otherwise ensure that it does not have that class.
Whenever the input gains the focus, set that class.
The stylesheet would use that classname in a selector to hide the label (using text-indent: -9999px; usually).
This approach provides a decent experience for all users, including those with JS disabled and those using screen readers.
I've put together solutions proposed by
#Cory Walker with the extensions from #Rafael
and the one form #Tex witch was a bit complicated for me
and came up with a solution that is hopefully
error-proof with javascript and CSS disabled.
It manipulates with the background-color of the form field to show/hide the label.
<head>
<style type="text/css">
<!--
input {position:relative;background:transparent;}
-->
</style>
<script>
function labelPosition() {
document.getElementById("name").style.position="absolute";
// label is moved behind the textfield using the script,
// so it doesnt apply when javascript disabled
}
</script>
</head>
<body onload="labelPosition()">
<form>
<label id="name">Your name</label>
<input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>
</body>
View the script in action: http://mattr.co.uk/work/form_label.html
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">
Add an onblur event too.
When you start typing it will disappear.If empty it will appear again.
<%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc#gmail.com"%>
Simplest way...
Please use PlaceHolder.JS its works in all browsers and very easy for non html5 compliant browsers
http://jamesallardice.github.io/Placeholders.js/
One hint about HTML property placeholder and the tag textarea, please make sure there is no any space between <textarea> and </textarea>, otherwise the placeholder doesn't work, for example:
<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>
This won't work, because there is a space between...
use this
style:
<style type="text/css">
.defaultLabel_on { color:#0F0; }
.defaultLabel_off { color:#CCC; }
</style>
html:
javascript:
function defaultLabelClean() {
inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].value == inputs[i].getAttribute("innerLabel")) {
inputs[i].value = '';
}
}
}
function defaultLabelAttachEvents(element, label) {
element.setAttribute("innerLabel", label);
element.onfocus = function(e) {
if (this.value==label) {
this.className = 'defaultLabel_on';
this.value = '';
}
}
element.onblur = function(e) {
if (this.value=='') {
this.className = 'defaultLabel_off';
this.value = element.getAttribute("innerLabel");
}
}
if (element.value=='') {
element.className = 'defaultLabel_off';
element.value = element.getAttribute("innerLabel");
}
}
defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL");
Just remember to call defaultLabelClean() function before submit form.
good work
You do not need a Javascript code for that...
I think you mean the placeholder attribute. Here is the code:
<input type="text" placeholder="Your descriptive text goes here...">
The default text will be grey-ish and when clicked, it will dissapear!
I think its good to keep the Label and not to use placeholder as mentioned above. Its good for UX as explain here:
https://www.smashingmagazine.com/2018/03/ux-contact-forms-essentials-conversions/
Here example with Label inside Input fields:
codepen.io/jdax/pen/mEBJNa
Here is a simple example, all it does is overlay an image (with whatever wording you want). I saw this technique somewhere. I am using the prototype library so you would need to modify if using something else. With the image loading after window.load it fails gracefully if javascript is disabled.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;" />
<meta http-equiv="Expires" content="Fri, Jan 1 1981 08:00:00 GMT" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<style type="text/css" >
input.searcher
{
background-image: url(/images/search_back.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: center;
}
</style>
<script type="text/javascript" src="/logist/include/scripts/js/prototype.js" ></script>
</head>
<body>
<input type="text" id="q" name="q" value="" />
<script type="text/javascript" language="JavaScript" >
// <![CDATA[
function f(e){
$('q').removeClassName('searcher');
}
function b(e){
if ( $F('q') == '' )
{
$('q').addClassName('searcher');
}
}
Event.observe( 'q', 'focus', f);
Event.observe( 'q', 'blur', b);
Event.observe( window, 'load', b);
// ]]>
</script>
</body>
</html>