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"
/>```
Related
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 want to give my upper label a background if the radio button is checked.
I do not want to give the span a background, because the background needs to include the radio button.
<label>
<input type="radio" checked="checked">
<span>text</span>
</label>
See my complete code here: https://jsfiddle.net/kL2h46x5/
How can I fix that?
There is no way to select the parent of the input element. But you could rearrange your markup to achieve the desired effect:
HTML:
<input class="radio-gender bestelling-type" type="radio" checked="checked" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck">
<label class="type-bestelling" for="noCheck">
<span class="type-bestelling-particulier">Particulier</span>
</label>
<input class="radio-gender bestelling-type" type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck">
<label class="type-bestelling" for="yesCheck">
<span class="type-bestelling-zakelijk">Zakelijk</span>
</label>
CSS:
label.type-bestelling {background-color: #f1f1f1; margin-right:10px;}
input:checked+label {
background:red;
}
https://jsfiddle.net/kL2h46x5/9/
https://jsfiddle.net/kL2h46x5/6/
Use
:checked + span {
background-color: #f10;
}
So i'm using a checkbox hack in order to change 3 buttons on click, when someone clicks one it changes to a selected button image, then someone clicks on another button it changes the other button back to the original image and the new other clicked button goes to select. The problem is I can't figure out how to have 3 different selected states. One for each color. Right now it just uses the greenbtn-selected obviously, how would I add more than one so that each button had it's own selected state?
Also for some reason content:url isn't working on Firefox? Is there another way to do it, I tried background:url and that doesn't work in Chrome! ugh.
Thanks so much!!!
The selected button images..
http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png
http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png
http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png
The Buttons..
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png">
</label>
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png">
</label>
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png">
</label>
The CSS...
label > input + img {
cursor: pointer;
}
label > input {
position: absolute;
visibility: hidden;
width: 130px;
}
label > input:checked + img {
content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
}
label > input + img {
cursor: pointer;
}
label > input {
position: absolute;
visibility: hidden;
width: 130px;
}
label > input: checked + img {
content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
}
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png">
</label>
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/orangebtn-select.png">
</label>
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<img src="http://www.morecleanenergy.com/graphics/mass/images/bluebtn-select.png">
</label>
dont use image use a <div> or span
JS Fiddle
give a background image and use pseudo before changing the image
html
<label>
<input id="ctl00_generalContentPlaceHolder_rbPackage1" type="radio" value="rbPackage1" name="ctl00$generalContentPlaceHolder$product">
<span class="check-green"></span>
</label>
css
.check-green {
background:url(http://www.morecleanenergy.com/graphics/mass/images/greenbtn-select.png);
width:124px;
height:30px;
}
label > input:checked + span:before {
content: url("http://www.morecleanenergy.com/graphics/mass/images/orangebtn-selected.png");
display:block;
}
You can use Javascript and register a click event for each of the buttons. Something like this;
Jquery
$('button1').click(function(){
//do necessary changes
});
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"});;
});
});
My navbar has dropdown "fieldsets" for login and search like this:
<div class="nav-button" id="nav-box">
<a class="inside-link">
<span id="inside-text">Sign in</span>
</a>
<fieldset id="menu-box" class="menu-box">
<form method="post" id="forms" class="forms" action="checklogin.php">
<label for="username">Username or email</label>
<input type="text" id="username" name="username" value="" title="username" tabindex="4">
<label for="password">Password</label>
<input type="password" id="password" name="password" value="" title="password" tabindex="5">
<input type="submit" id="small-btn" value="Sign in" tabindex="6">
<input type="checkbox" id="remember" name="remember_me" value="1" tabindex="7">
<label for="remember">Remember me</label>
<br />
Forgot your password?
<a id='forgot_username_link' title="If you remember your password, try logging in with your email" href="#">Forgot your username?</a>
</form>
</fieldset>
</div>
I have a fiddle here: http://jsfiddle.net/WBrns/5/
While input boxes like "search" "username" and "password" are focused, I'd like the associated dropdown to not disappear so users don't have to keep their mouse within the dropdown while typing.
Line 288 in the CSS was our first attempt which obviously doesn't work. My site already includes jQuery so any js/jquery solution is acceptable (since I think it's not possible with pure css)
Thanks!
On your hover style, make sure the attributes have the !important command and then use the code below while remembering to substitute the id's and classes to what you need:
$("input").focus(function () { that=this;
$(this).parent(".drop").css("display", "block");
$(this).blur(function() {
$(that).parent(".drop").css("display", "none");
});
})
You can take a look at an example here: http://jsfiddle.net/WBrns/12/
If a user begins to type, the drop down should not disappear even if they move their mouse away. However, if they click outside of the drop down, it will be hidden.
To improve upon Shaz's answer, you can name the blur event to prevent multiple blur events from being attached to the same input. I also recommend using a class name and CSS to show and hide the drop down so that you can take advantage of CSS transitions.
JS
$('input').focus(function () {
var $this = $(this);
var $drop = $this.parents('.drop');
$drop.addClass('open');
$this.bind('blur.closeDrop', function () {
$drop.removeClass('open');
$this.unbind('blur.closeDrop');
});
});
CSS
.drop {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.drop.open {
opacity: 1;
pointer-events: auto;
}