I am exploring Float Label pattern for web page using HTML and CSS.
The code was referred from http://codepen.io/boast/pen/pLjld
<input type="text" name="title" placeholder="Title required" />
The problem is "required" property is must to have Float Label effect here. Wanted to understand how can we achieve the Float Label effect for Optional Input Fields?
The best solution is to use :placeholder-shown pseudo-class in conjunction with :focus and + adjacent selector:
https://github.com/tonystar/float-label-css
This method works in ANY browser (all non-supporting browsers will automatically fall back to the static layout w/o animation).
See demo below:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/float-label-css/v1.0.0/dist/float-label.min.css"/>
<fieldset>
<legend>Sign up</legend>
<div class="form-group has-float-label">
<input class="form-control" id="first" type="text" placeholder="First Last"/>
<label for="first">Name</label>
</div>
<div class="form-group has-float-label">
<input class="form-control" id="email" type="email" placeholder="email#example.com"/>
<label for="email">Email</label>
</div>
<div class="form-group has-float-label">
<input class="form-control" id="password" type="password" placeholder="••••••••"/>
<label for="password">Password</label>
</div>
<br/>
<button>Sign up</button>
</fieldset>
You can use optional pseudo class.
https://developer.mozilla.org/en-US/docs/Web/CSS/:optional
Look at this sample below
http://codepen.io/anon/pen/bdaHk
Click here to view Demo
Html
<form id="formID" action="demo_form.asp">
<label for="fname" id="lblfname" >First name </label><br>
<input type="text" id="fname" name="fname" placeholder="First name"><br>
<label for="lname" id="lbllname" >Last name </label><br>
<input type="text" id="lname" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
Css
label{
visibility:hidden;
z-index:1;
font-size:10px;
}
Jquery
$('#fname').focus(function () {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
alert(xPos);
alert(yPos);
var myid = this.id;
var res = $('label[for=' + myid + ']').attr('id');
var offset1 = $("#" + res + "").offset();
offset1
var xxPos = offset1.left;
var yyPos = offset1.top;
alert(xxPos);
alert(yyPos);
$("#"+ res).css({ visibility: "visible"});
$("#"+ res).css({
top: xPos + 17,
left: yPos + 80,
position: 'absolute'
});
alert(res);
});
$('#lname').focus(function () {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
// alert(xPos);uncomment and run this to get top
// alert(yPos);uncomment and run this to get left
var myid = this.id;
var res = $('label[for=' + myid + ']').attr('id');
var offset1 = $("#" + res + "").offset();
offset1
var xxPos = offset1.left;
var yyPos = offset1.top;
// alert(xxPos);uncomment and run this to get top
// alert(yyPos);uncomment and run this to get top
$("#"+ res).css({ visibility: "visible"});
$("#"+ res).css({
top: xPos + 65,
left: yPos +35,
position: 'absolute'
});
alert(res);
});
$("input").blur(function(){
$('#formID').find('label').each(function(){
$(this).css({ visibility: "hidden"});;
});
});
Related
I'm using react and want to make a slider using radio buttons make the slider automatic.
Please do answer with an explanation on how to make it automatic. Thank you so much!
JS
setInterval(function () {
document.getElementById("page" + slider).defaultChecked = true;
if (slider < 4) {
slider ++;
} else {
slider + 1;
}
}, 1000);
Input
<input
name="control"
id="page1"
type="radio"
defaultChecked
/>
<input
name="control"
id="page2"
type="radio"
/>
<input
name="control"
id="page3"
type="radio"
/>
<input
name="control"
id="page4"
type="radio"
/>```
I need some help with this code. I'm trying to get the id="address" value into the input named localizacion, I've tried several thing and still didn't find the correct answer, basically what I need is to get the value that shows <div id="address"> and get it into the input field.
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
<head>
<script>
var a = document.getElementById('address').value;
document.forms['formula'].elements['localizacion'].value = a;
</script>
</head>
<div>
<form>
<label for="localizacion"><b>Localización </b></label>
<input class="form-control" type="text" placeholder="" name="localizacion" style="height: 10px; width: 299px; margin-left: 6px;" disabled><br />
<label><b>Seleccione su localizacion: </b></label><br>
<div id="mapCanvas"></div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div id="info"></div>
<b>Closest matching address:</b>
<div id="address"></div>
</div>
<br>
</form>
</div>
Screenshot of the issue:
Try this, use
var a = document.getElementById('address').innerHTML;
to get value of address
document.getElementsByName("localizacion")[0].value = a;
to set value of localization
var a = document.getElementById('address').innerHTML;
document.getElementsByName("localizacion")[0].value = a;
<input class="form-control" type="text" placeholder="" name="localizacion" style="height: 10px; width: 299px; margin-left: 6px;" disabled>
<div id="address">Sample</div>
You can target your form-control class and set it up to be the value of the innerText of the address.
setInterval(function(){
//Update the localizacion box every 0.5 seconds
var a = document.getElementById('address').value;
document.getElementsByClassName("form-control")[0].value = a;
}, 500);
I got rid of the <i> tags. Use CSS instead for the italics. Also removed the <b> tags for the <strong> tags. Hope this helps. Fiddle
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
var a = document.getElementById('address').innerText;
document.getElementsByClassName("form-control")[0].value = a;
//document.forms['formula'].elements['localizacion'].value = a;
#markerStatus{
font-style: italic;
}
<label for="localizacion"><b>Localización </b></label>
<input class="form-control" type="text" placeholder="" name="localizacion" style="height: 10px; width: 299px; margin-left: 6px;" disabled><br>
<label><strong>Seleccione su localizacion: </strong></label><br>
<div id="mapCanvas"></div>
<div id="infoPanel">
<strong>Marker status:</strong>
<div id="markerStatus">Click and drag the marker.</div>
<strong>Current position:</strong>
<div id="info"></div>
<strong>Closest matching address:</strong>
<div id="address">Some Address</div>
</div>
<br>
I realize a form of this question has been asked before (see 28208451), however, I need to get the input value and then set it as the new value so that other input fields can access it. Here is a link to my plunk.
I can enter a new hue but it is not saved when I attempt to change the saturation or lightness. I am sure it is an easy fix (possibly a directive) but for the life of me I cannot wrap my head around it. I am still fairly new at AngularJS ... any help would be appreciated.
**controller:**
angular.module('colorChanger', [])
.controller('ColorController', [
function() {
var vm = this;
vm.hue = '194.3';
vm.saturation = '100';
vm.lightness = '50';
vm.newHue = function() {
if (vm.hue) {
less.modifyVars({
hue: vm.hue
});
}
};
vm.newSaturation = function() {
if (vm.saturation) {
less.modifyVars({
saturation: vm.saturation
});
}
};
vm.newLightness = function() {
if (vm.lightness) {
less.modifyVars({
lightness: vm.lightness
});
}
};
}
]);
**index:**
<ul>
<li class="bgc-color-base"></li>
</ul>
<form data-ng-submit="color.newHue()" data-ng-controller="ColorController as color">
<label for="hue">Hue:</label>
<input type="text" id="hue" data-ng-model="color.hue" />
<input type="submit" value="Submit" />
</form>
<form data-ng-submit="color.newSaturation()" data-ng-controller="ColorController as color">
<label for="saturation">Saturation:</label>
<input type="text" id="saturation" data-ng-model="color.saturation" />
<input type="submit" value="Submit" />
</form>
<form data-ng-submit="color.newLightness()" data-ng-controller="ColorController as color">
<label for="lightness">Lightness:</label>
<input type="text" id="lightness" data-ng-model="color.lightness" />
<input type="submit" value="Submit" />
</form>
**less:**
ul {
list-style: none;
padding: 0;
margin-bottom: 20px;
li {
height: 100px;
&.bgc-color-base {
.background-base;
}
}
}
//== color variables
#hue: 194.3; // enter optional hue variable or custom hue range 0-330
#saturation: 100; // saturation range 0-100
#lightness: 50; // lightness range 0-100 (0 = black, 100 = white)
#alpha: 1;
//== base color function
#color-base: hsla(#hue, (#saturation/100), (#lightness/100), #alpha);
//== base color mixins
.background-base(#hue: #hue, #saturation: #saturation, #lightness: #lightness, #alpha: #alpha) {
background: #color-base;
}
You should have common controller for all three inputs otherwise the scope value change in one controller will not be available for the other controller
OR
If you want stay with separate controller then you need to create service that will have value of all variable is stored in it. That will share those values across.
Create a single method for updates less variable that will do the trick for you.
Markup
<body data-ng-app="colorChanger" data-ng-controller="ColorController as color">
<ul>
<li class="bgc-color-base"></li>
</ul>
<form data-ng-submit="color.updateColor()" >
<label for="hue">Hue:</label>
<input type="text" id="hue" data-ng-model="color.hue" />
<input type="submit" value="Submit" />
</form>
<form data-ng-submit="color.updateColor()"">
<label for="saturation">Saturation:</label>
<input type="text" id="saturation" data-ng-model="color.saturation" />
<input type="submit" value="Submit" />
</form>
<form data-ng-submit="color.updateColor()">
<label for="lightness">Lightness:</label>
<input type="text" id="lightness" data-ng-model="color.lightness" />
<input type="submit" value="Submit" />
</form>
</body>
Code
vm.updateColor = function() {
less.modifyVars({
hue: vm.hue || 194.3,
saturation: vm.saturation || 100,
lightness: vm.lightness || 50
});
};
And on html instead of calling three method on ng-submit call only one method vm.updateColor that will do less.modifyVars with all three variables.
Demo Plunkr
This question already has answers here:
CSS to change the cursor style of the resize button on a textarea
(4 answers)
Closed 9 years ago.
I would like to be apply to apply a cursor style to the grip of the resize tool on a textbox. Currently when you hover over the box I have a cursor: text; property and I want to be able to change to a different cursor when hovering over the resize grip.
Here is the code, I know it doesn't matter. Just wanted it for reference.
<div id="form-box">
<form action="<?php htmlspecialchars(fonefinder.php);?>" method="post" />
<p>Enter The Number</p>
<div class="number-box">
<input type="number" pattern="[0-9]*" size="10" name="number" />
</div>
<h3 class="error"><?php echo $numberErr;?></h3>
<p>Enter Your Message</p>
<textarea name="message"></textarea>
<h3 class="error"><?php echo $messageErr;?></h3>
<div class="submit-btn">
<input type="submit" value="Send Message">
</div>
</form>
</div>
There is no such property, but you can fake it with a little bit of JavaScript and jQuery.
Live Demo
var $textareas = $('textarea');
$textareas.on('mousemove', function (event) {
var threshhold = 5;
var $container = $(event.currentTarget);
var width = $container.width();
var height = $container.height();
var x = event.offsetX;
var y = event.offsetY;
if (
width - x <= threshhold
&& height - y <= threshhold
) {
$container.addClass('resize');
} else {
$container.removeClass('resize');
}
});
$textareas.on('mouseout', function (event) {
$(event.currentTarget).removeClass('resize');
});
Then in your CSS, just set the cursor property based on the class:
.resize {
cursor: nwse-resize;
}
I create a simple dialog form with jquery UI.
Html code :
<div id="newarticle-form" title="Création nouvel article">
<p class="validateTips">Tous les champs sont requis.</p>
<form>
<fieldset>
<p><label for="validite" class="label-class">Date de validité</label>
<input type="text" name="validite" id="validite" size="10" maxlength="10" class="text input-class" /></p>
<label for="libelle" class="label-class">Libellé</label>
<input type="text" name="libelle" id="libelle" size="50" maxlength="100" class="text input-class" />
<label for="email" class="label-class">Description</label>
<input type="text" name="description" id="description" value="" size="50" maxlength="250" class="text input-class" />
<label for="pu" class="label-class">Prix unitaire</label>
<input type="text" name="pu" id="pu" value="" size="10" maxlength="10" class="text input-class" />
</fieldset>
</form>
</div>
And the javascript/jquery code :
$(function() {
$( "#newarticle-form" ).dialog({
autoOpen: false,
height: 400,
width: 800,
modal: true,
resizable:false,
buttons: {
"Ajouter l'article": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
},
"Fermer": function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
},
});
$( "#New" )
.click(function() {
$( "#newarticle-form" ).dialog( "open" );
});
});
Some usefull CSS :
.label-class {
display: block;
width: 150px;
float: left;
text-align: right;
padding-right: 10px;
}
.input-class {
float: left;
margin-bottom: 10px;
}
All works fine... but the fields are completely disorganized.
To align correctly, I must give a total size to each field the almost equal size of the width of the dialogbox ! So, a 5 chars long field must be stretched to the largest field (50 chars) : all is well aligned but it looks quite ugly !
What can I do ?
Add clear:left; to your .label-class
This will make sure that the label will align properly.