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.
Related
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 have a form there are 4 options (they may be checkbox or radio).
I want to select multiple options but one is compulsory.
I know it is possible in JS/jQuery but I want a HTML/CSS based solution.
To be able to check multiple inputs, they must be checkboxes. (They could be radio buttons with different names, but you wouldn't be able to uncheck them once checked.)
So use checkboxes, and show the Submit button only if any are checked, using the general sibling selector (~):
input[type="Submit"] {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit">
If you want the appearance of a disabled submit button, add a second button that is disabled.
When no input is clicked, show the disabled submit button only. When one or more inputs are clicked, show the enabled submit button only:
input[type="Submit"]:not([disabled]) {
display: none;
}
input:checked ~ input[type="Submit"]:not([disabled]) {
display: inline;
}
input:checked ~ input[disabled] {
display: none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit" disabled>
<input type="Submit">
Further to the answer of #Rick Hitchcock, I think that you will want to show to the user the button submit but it will disabled until one of the checkboxes will be checked.
If so, you can use pointer-events (in all modern browsers: http://caniuse.com/#feat=pointer-events) like this:
input[type="Submit"] {
opacity:0.5;
pointer-events:none;
/* animation added for fancy ;) */
transition:all .2s ease;
}
input:checked ~ .button-wrapper input[type="Submit"] {
opacity:1;
pointer-events:all;
}
.button-wrapper {
position:relative;
display:inline-block;
}
.button-wrapper:before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
input:checked ~ .button-wrapper:before {
display:none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<div class="button-wrapper">
<input type="Submit" tabindex="-1">
</div>
Edit I was added a "mask" in .button-wrapper:before so it will work in the old browsers.
You can do this in html5 using the required attribute
Like
<input type="checkbox" required name="your_checkbox_name">
This tells the browser that the form should not be to submitted without the checkbox being checked.Although i recommend java-script since not all browsers will be able to recognize this.
Or
If you want to detect if at least one check box is selected as suggested by #RickHitchcock in the comments,You could use
span {
display: inline;
color: red;
}
input[type="Submit"],
input:checked ~ span {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<form action="#" method="post">
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="submit" value="Submit" /><span>! Please check at least one checkbox</span>
</form>
You can use the following for which one is compulsory.
<input type="radio" name="name" required>
Which one without required will not be tested if it is ticked or not.
Try This:
<input id="c3" type="checkbox" required><label for="c3">Third</label><br>
<input id="c4" type="checkbox" required><label for="c4">Fourth</label><br>
Or you can try this using jquery to validate a html checkbox:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" always required. Nothing and blanks are invalid. </title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required: </label>
<input type="text" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/additional- methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true
}
}
});
</script>
</body>
</html>
required is the way html validates things
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
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"});;
});
});
This tutorial teaches how to create modal windows in CSS3. It works perfectly on Chrome and Firefox. However, Internet Explorer doesn't load any of the links containing hashtags.
Tutorial
Demo
The first link has the source code but I'll post a copy below for future reference.
HTML
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>CSS3 Modal Popups | Script Tutorials</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/modal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h2>CSS3 Modal Popups</h2>
Back to original tutorial on <span>Script Tutorials</span>
</header>
<!-- panel with buttons -->
<div class="main">
<div class="panel">
Log In
Sign Up
</div>
</div>
<!-- popup form #1 -->
<div class="popup">
<h2>Welcome Guest!</h2>
<p>Please enter your login and password here</p>
<div>
<label for="login">Login</label>
<input type="text" id="login" value="" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" value="" />
</div>
<input type="button" value="Log In" />
<a class="close" href="#close"></a>
</div>
<!-- popup form #2 -->
<div class="popup">
<h2>Sign Up</h2>
<p>Please enter your details here</p>
<div>
<label for="email">Login (Email)</label>
<input type="text" id="email" value="" />
</div>
<div>
<label for="pass">Password</label>
<input type="password" id="pass" value="" />
</div>
<div>
<label for="firstname">First name</label>
<input type="text" id="firstname" value="" />
</div>
<div>
<label for="lastname">Last name</label>
<input type="text" id="lastname" value="" />
</div>
<input type="button" value="Sign Up" /> or Log In
<a class="close" href="#close"></a>
</div>
</body>
</html>
CSS
.main {
background: #aaa url(../images/bg.jpg) no-repeat;
width: 800px;
height: 600px;
margin: 50px auto;
}
.panel {
background-color: #444;
height: 34px;
padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
border: 2px solid #aaa;
color: #fff;
display: block;
float: right;
margin-right: 10px;
padding: 5px 10px;
text-decoration: none;
text-shadow: 1px 1px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
border-color: #eee;
}
.overlay {
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
background-color: #fff;
border: 3px solid #fff;
display: inline-block;
left: 50%;
opacity: 0;
padding: 15px;
position: fixed;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
top: 50%;
opacity: 1;
visibility: visible;
}
.close {
background-color: rgba(0, 0, 0, 0.8);
height: 30px;
line-height: 30px;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
top: -15px;
width: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
font-size: 24px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
background-color: rgba(64, 128, 128, 0.8);
}
.popup p, .popup div {
margin-bottom: 10px;
}
.popup label {
display: inline-block;
text-align: left;
width: 120px;
}
.popup input[type="text"], .popup input[type="password"] {
border: 1px solid;
border-color: #999 #ccc #ccc;
margin: 0;
padding: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
border-color: #555 #888 #888;
}
I've run into this problem before with hashchange events in internet explorer, so I wrote this code (Guaranteed by me down to IE7):
Add class hash-modifier to every element that you have that modifies
the url hash.
JavaScript:
$(function () {
var hashchangeHandler = function () {
switch (location.hash.replace(/^.*#/, '')) {
case 'sign-up':
alert('signing up/opening sign-up modal');
break;
case 'login':
alert('logging in/showing login modal');
break;
default:
// do default something
}
}
BindHashChangeEventListener(hashchangeHandler);
// Run the initial hashHandler function on document ready
hashchangeHandler();
});
function BindHashChangeEventListener(hashHandler) {
if (("onhashchange" in window) && !($.browser.msie)) {
// Use built-in jQuery hashchange event
$(window).bind('hashchange', hashHandler);
} else {
//IE and browsers that don't support hashchange
$('.hash-modifier').on('click', function () {
setTimeout(hashHandler, 50);
});
}
}
HTML:
sign up
login