I am working on a web project and I am trying to create a dynamic form with radio buttons that updates an animated progress-bar.
This is what I have so far: JSFiddle
I have multiple groups of radio buttons that should update the progress-bar onclick and it is working, but the CSS is using set widths rather than just changing it by a certain %, therefore when I click radios from other groups it doesnt animate to-or-from the current %.
For example, if I click option 2a then click option 2b it resets first then goes to the %, and if I click 2b first then click 2a I'd expect the progress-bar to maybe go up by a small %.
You can see when you click option 2a then 1a, its good but its not compatible with multiple groups of radios.
So how can I get it to sum up % amounts rather then it going to-and-from set width amounts?
Also, How do I get the onclick events to work multiple times rather than just once per page refresh?
document.addEventListener('click', option_1_default);
function option_1_default() {
$(document).ready(function() {
$("#js1").click(function() {
$(".progress-value").addClass("progress-value-2a");
});
})
};
document.addEventListener('click', option_2_up);
function option_2_up() {
$(document).ready(function() {
$("#js2").click(function() {
$(".progress-value").addClass("progress-value-1a");
});
})
};
document.addEventListener('click', option_1b_default);
function option_1b_default() {
$(document).ready(function() {
$("#js3").click(function() {
$(".progress-value").addClass("progress-value-1b");
});
})
};
document.addEventListener('click', option_2b_up);
function option_2b_up() {
$(document).ready(function() {
$("#js4").click(function() {
$(".progress-value").addClass("progress-value-2b");
});
})
};
body{
padding:12px;
}
.col-6 label{
border:1px solid #333;
}
.col-6 input[type=radio]:checked + label{
border:2px solid blue;
}
.progress {
background: rgba(255,255,255,0.1);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
display: flex;
height: 10px;
width: 100%;
margin-bottom:10px;
}
.progress-value {
animation: load_speed_default 2s normal forwards;
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: #0d6efd;
height: 30px;
width: 0;
}
#keyframes load_speed_default {
0%{width:0;}
100%{width:50%;}
}
.progress-value-1a {
animation: load_speed_1a 1s normal forwards;
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: #0d6efd;
height: 30px;
width: 0;
}
#keyframes load_speed_1a {
0%{
width:50%;
}
100%{
width:75%;
}
}
.progress-value-2a {
animation: load_speed_2a 1s normal forwards;
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: #0d6efd;
height: 30px;
width: 0;
}
#keyframes load_speed_2a {
0%{
width:75%;
}
100%{
width:50%;
}
}
.progress-value-1b {
animation: load_speed_1b 1s normal forwards;
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: #0d6efd;
height: 30px;
width: 0;
}
#keyframes load_speed_1b {
0%{
width:50%;
}
100%{
width:50%;
}
}
.progress-value-2b {
animation: load_speed_2b 1s normal forwards;
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: #0d6efd;
height: 30px;
width: 0;
}
#keyframes load_speed_2b {
0%{
width:50%;
}
100%{
width:90%;
}
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div class="wrapp">
Speed
<div class="progress">
<div class="progress-value"></div>
</div>
</div>
<div class="row">
<label>Group 1</label>
<div class="col-6">
<input type="radio" style="display:none;" id="js1" data-price="146.99" value="option1a" name="ONE">
<label for="js1" onclick="option_1_default()">
Option 1a (Default 50%)
</label>
</div>
<div class="col-6">
<input type="radio" style="display:none;" id="js2" data-price="123.99" value="option2a" name="ONE">
<label for="js2" onclick="option_2_up()">
Option 2a (75%)
</label>
</div>
<hr style="margin-top:24px;">
<label>Group 2</label>
<div class="col-6">
<input type="radio" style="display:none;" id="js3" data-price="116.99" value="option1b" name="TWO">
<label for="js3" onclick="option_1b_default()">
Option 1b (Default 50%, but if option 2a selected then stay 75%)
</label>
</div>
<div class="col-6">
<input type="radio" style="display:none;" id="js4" data-price="93.99" value="option2b" name="TWO">
<label for="js4" onclick="option_2b_up()">
Option 2b (Should increase from group 1 selection)
</label>
</div>
</div>
</body>
This much simpler then you are making it. First just use a CSS Transition for the animation (you only need one class). Adjust your inputs by adding data-progress="X" where X is the amount of progress contributed by each selection. Your script just needs to listen for the change event and sum all the checked items' data-progress values and use that to set the width.
$(document).ready(function() {
const $radios = $('input[type="radio"]')
$radios.change(function() {
let progress_value = 0
$('input[type="radio"]:checked').each(function() {
progress_value += Number($(this).data('progress'))
})
console.log(progress_value)
$(".progress-value").width(progress_value + '%')
});
// trigger change on one to register any pre-checked values
$($radios[0]).change()
})
body {
padding: 12px;
}
.col-6 label {
border: 1px solid #333;
}
.col-6 input[type=radio]:checked+label {
border: 2px solid blue;
}
.progress {
background: rgba(255, 255, 255, 0.1);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
display: flex;
height: 10px;
width: 100%;
margin-bottom: 10px;
}
.progress-value {
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: #0d6efd;
height: 30px;
width: 0;
transition: width 2s;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div class="wrappy">
Speed
<div class="progress">
<div class="progress-value"></div>
</div>
</div>
<div class="row">
<label>Group 1</label>
<div class="col-6">
<input type="radio" style="display:none;" id="js1" data-price="146.99" value="option1a" name="ONE" data-progress="50" checked>
<label for="js1" onclick="">
Option 1a (Default 50%)
</label>
</div>
<div class="col-6">
<input type="radio" style="display:none;" id="js2" data-price="123.99" value="option2a" name="ONE" data-progress="75">
<label for="js2" onclick="">
Option 2a (75%)
</label>
</div>
<hr style="margin-top:24px;">
<label>Group 2</label>
<div class="col-6">
<input type="radio" style="display:none;" id="js3" data-price="116.99" value="option1b" name="TWO" data-progress="0">
<label for="js3" onclick="">
Option 1b (Default 50%, but if option 2a selected then stay 75%)
</label>
</div>
<div class="col-6">
<input type="radio" style="display:none;" id="js4" data-price="93.99" value="option2b" name="TWO" data-progress="10">
<label for="js4" onclick="">
Option 2b (Should increase from group 1 selection)
</label>
</div>
</div>
<!-- bootstrap.bundle.min.js belongs down here after all the content, just before the closing body tag -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
Consider the following example.
Fiddle: https://jsfiddle.net/Twisty/2ud0h9Lq/37/
javaScript
$(function() {
function updateProgress(perc) {
$(".progress-value").data("percentage", perc).animate({
width: perc + '%'
});
}
updateProgress(50);
$("input[type='radio']").change(function() {
switch ($(this).attr("id")) {
case "js1":
updateProgress(50);
break;
case "js2":
updateProgress(75);
break;
case "js3":
updateProgress(50);
if ($("#js2").is(":checked")) {
updateProgress(75);
}
break;
case "js4":
updateProgress(80);
break;
}
});
});
This makes use of jQuery Animate to show the changes to the progress bar. The overall Logic is not clear, yet this gives you conditional options depending on the other radio buttons.
switch() is similar to if() yet gives you a multitude of conditions. See more:
https://api.jquery.com/animate/
There's several things which need to be addressed in your code.
Firstly your event handlers are using an odd mix of plain JS and jQuery. Stick with one or the other. As you've already included jQuery.js in the page you may as well stick with that. In addition you're using both and unobtrusive event handlers and inline event handlers. Avoid the latter as they are outdated and not good practice.
In addition jQuery 1.4.4 is 12.5 years old at this point and should not be used. The latest version is 3.6.0. Use that instead.
Next, you can massively simplify the animation by using transition on the width of the progress bar value instead of having to build a #keyframe animation in CSS for every possibly width combination. The transition will then be applied to any width value you set the progress bar to.
Similarly, you can use a single event handler for all the checkboxes, again simplifying the logic and DRYing it up.
With that said, here's a working example. Note that due to the repeated use of the 75% width, not all radios will appear to change the progress bar.
let $progressValue = $('.progress-value');
let $js1 = $('#js1');
let $js2 = $('#js2');
let $js3 = $('#js3');
let $js4 = $('#js4');
$('.radio').on('change', () => {
var widthPercent = 0;
if ($js1.prop('checked') || $js3.prop('checked'))
widthPercent = 50;
if (($js1.prop('checked') && $js3.prop('checked')) || $js2.prop('checked'))
widthPercent = 75;
if ($js4.prop('checked'))
widthPercent = 80; // logic isn't clear here, update as necessary
$progressValue.css('width', widthPercent + '%');
});
body {
padding: 12px;
}
.col-6 label {
border: 1px solid #333;
}
.col-6 input[type=radio]:checked+label {
border: 2px solid blue;
}
hr {
margin-top: 24px;
}
input[type="radio"] {
display: none;
}
.progress {
background: rgba(255, 255, 255, 0.1);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
display: flex;
height: 10px;
width: 100%;
margin-bottom: 10px;
}
.progress-value {
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: #0d6efd;
height: 30px;
width: 0;
transition: width 2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="wrapp">
Speed
<div class="progress">
<div class="progress-value"></div>
</div>
</div>
<div class="row">
<label>Group 1</label>
<div class="col-6">
<input type="radio" class="radio" id="js1" data-price="146.99" value="option1a" name="ONE" />
<label for="js1">Option 1a (Default 50%)</label>
</div>
<div class="col-6">
<input type="radio" class="radio" id="js2" data-price="123.99" value="option2a" name="ONE" />
<label for="js2">Option 2a (75%)</label>
</div>
<hr />
<label>Group 2</label>
<div class="col-6">
<input type="radio" class="radio" id="js3" data-price="116.99" value="option1b" name="TWO" />
<label for="js3">Option 1b (Default 50%, but if option 2a selected then stay 75%)</label>
</div>
<div class="col-6">
<input type="radio" class="radio" id="js4" data-price="93.99" value="option2b" name="TWO" />
<label for="js4">Option 2b (Should increase from group 1 selection)</label>
</div>
</div>
Related
I want to make a board consisting of tiles but I do not know how to fill up the entire board area. I have only gotten up to 1 column of the board, as shown in the image. How can I fill this board so that each tile can be changed if clicked on or such?
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
hr {
width: 500px;
}
#board {
width: 1000px;
height: 1000px;
float: center;
display: grid;
background-color: rgb(126, 124, 122);
border: 6px solid rgb(0, 0, 0);
}
.tile {
width: 200px;
height: 200px;
border: 5px solid bisque;
border-radius: 10%;
font-size: 40px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.picker {
width: 100px;
height: 100px;
border: 5px solid bisque;
margin: 0 auto;
border-radius: 10%;
align-content: left;
align-self: left;
}
.tile {
background-color: rgb(255, 255, 255);
color: black;
}
.float-child {
width: 10%;
padding: 10px;
border: 2px solid rgb(0, 0, 0);
vertical-align: left;
}
<body>
<h1>Play-Color</h1>
<hr>
<div class="game">
<div class="float-child">
<button class="picker" style="background-color: red"></button>
<h4>count = 0</h4>
<br>
<button class="picker" style="background-color: blue"></button>
<h4>count = 0</h4>
<br>
<button class="picker" style="background-color: green"></button>
<h4>count = 0</h4>
<br>
<button class="picker" style="background-color: yellow"></button>
<h4>count = 0</h4>
<br>
<button class="picker" style="background-color: grey"></button>
<h4>count = 0</h4>
<br>
<button class="picker"></button>
<br>
</div>
<div id="board" class="float-child" style="position:relative; left:900px; top:-1000px" >
<button class="tile"></button>
<button class="tile"></button>
<button class="tile"></button>
<button class="tile"></button>
<button class="tile"></button>
</div>
</div>
</div>
</body>
[2]UpdatedImage
........................................................................................................................................................................................
There are many steps to achieve the wanted result. Normally I wouldn't code this on SO. I just did it because I had fun it it. For the feature dont expect others to code a whole game for you for free!
See the comments within HTML, CSS and JS for furtehr info.
You have to create your color to pick from. The smartest solution IMHO is the use of radio-buttons. The Radio button will even without a script only allow the selection of one choice:
<input type="radio" name="color" value="color-name" id="color-name">
To not break the game you should always have one color selected. To ensure that on start one color is already selected you add the checked-attribtue to one color such as:
<input type="radio" ... checked>
Next you have to hide the checkboxes to be invisible and not cunsumign any space which you do through CSS:
input { display: none; }
Then you have to add the color as visual box by adding a <label>. That has the advantage that you can click on the label and it will select the correct radio button:
<label for="color-name">
After that you color the label with the color you want. While you do that, you can also set a CSS-Class to the same color in the same instance to allow the painting with that color:
label[for=color-name],
.color-name {
background-color: color-name;
}
Finally you have to create a grid. You can do that easily through JS or hardcode it to HTML. Sicne I dont want to explain you on how to do it correctly through JS (which would cost me another 30 minutes of my lifetime) I will hardcode it through HTML. In my case I used a grid-container: <div class="game-board">. Then I added 25x child elements: <div class="card"></div>. To make the grid 5x5 dimensions I used CSS on the Grid-Container to create 5 columns:
.game-board {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
As said already in the comments, you don't need buttons to be clickable for JS. The label of the radio buttons are clickable already (as they are labels). You can run a script even when not being clickable by simply usign the EventListener to check for a click-event by using JS:
element.addEventListener('click', e => {
// statements
});
To only select the grid-cards and not the container itself or possibel other content you can check if the element that was clicked on contains a specific class:
if (e.target.classList.contains('card')) {
// statements
}
In case that grid-card already has a color as CSS-Class applied to, we have to remove all potencial classes that would prevent the CSS to work correctly (it would only show the color of the class that is listed last in CSS):
e.target.className = ''
Unfortunatly the last step also removed the card class and as such we have to re-add this class:
e.target.classList.add('card');
Once we did that, we use a switch-case-statement which is cleaner then writing tons of if/else-statements. You can google guides and tutorials on your own. That switch-statement now checks what radio-button is checked and applies a class to the element you clicked on that adds the background-color:
e.target.classList.add('color-name');
EDIT
To include a counter you can use the JS lenght-statement:
document.querySelectorAll('.game-board .color-name').length. this statement will count the number of elements that contain a specific class.
Then simply use innerHTML-statement to display the count:
element.innerHTML = document.querySelectorAll('.game-board .color-name').length
var board = document.querySelector('.game-board')
// eventListener to listen to click events on the game board
board.addEventListener('click', e => {
console.clear();
// checks if a card and not the agme baord itself was clicked on
if (e.target.classList.contains('card')) {
const card = e.target.classList;
// checks which color has been selected
var color = document.querySelector('.color-picker input:checked').value;
// removes all classes from the clicked on element to allow re-painting
e.target.className = '';
// re-adds the "card" class to the clicked element
card.add('card');
// switch statement to add the class with the selected color to paint the grid-card
switch (color) {
case "red":
card.add('red');
break;
case "blue":
card.add('blue');
break;
case "green":
card.add('green');
break;
case "yellow":
card.add('yellow');
break;
case "gray":
card.add('gray');
break;
}
// color-counter
var countRed = document.querySelectorAll('.game-board .red').length,
countBlue = document.querySelectorAll('.game-board .blue').length,
countGreen = document.querySelectorAll('.game-board .green').length,
countYellow = document.querySelectorAll('.game-board .yellow').length,
countGray = document.querySelectorAll('.game-board .gray').length;
// displaying the counter
var labelRed = document.querySelector('#count-red span'),
labelBlue = document.querySelector('#count-blue span'),
labelGreen = document.querySelector('#count-green span'),
labelYellow = document.querySelector('#count-yellow span'),
labelGray = document.querySelector('#count-gray span');
labelRed.innerHTML = countRed;
labelBlue.innerHTML = countBlue;
labelGreen.innerHTML = countGreen;
labelYellow.innerHTML = countYellow;
labelGray.innerHTML = countGray;
}
});
/* aligning the color picker and game board next to each other */
body {
margin: 0;
padding: 10px;
box-sizing: border-box;
display: flex;
gap: 10px;
min-height: 100vh;
}
/* box for the color */
.color-picker {
border: 1px solid black;
display: flex;
flex-direction: column;
padding: 5px 30px;
gap: 10px;
}
/* hides the radio button */
.color-picker > input {
display: none;
}
/* creatign a visual border to see what color has been selected */
input:checked + label {
border: 3px solid black;
}
/* setting a "color-box" to the radio-button */
.color-picker > label {
display: block;
box-sizing: border-box;
aspect-ratio: 1 / 1;
min-width: 50px;
}
/* settign the color of the color picker and classes for painting */
label[for=red],
.red {
background-color: red;
}
label[for=blue],
.blue {
background-color: blue;
}
label[for=green],
.green {
background-color: green;
}
label[for=yellow],
.yellow {
background-color: yellow;
}
label[for=gray],
.gray {
background-color: gray;
}
/* game board that creates a board of 5x5 with equal dimensions */
.game-board {
flex-grow: 1;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 5px;
}
/* Setting the grid-cards to be squares */
.game-board > .card {
aspect-ratio: 1 / 1;
border: 1px solid red;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
/* To make the grid-cards and label appear like buttons on hover */
.color-picker > label:hover,
.card:hover {
cursor: pointer;
}
<!-- Letting you select the color -->
<div class="color-picker">
<input type="radio" name="color" value="red" id="red" checked>
<label for="red"></label>
<div id="count-red">Count: <span>0</span></div>
<input type="radio" name="color" value="blue" id="blue">
<label for="blue"></label>
<div id="count-blue">Count: <span>0</span></div>
<input type="radio" name="color" value="green" id="green">
<label for="green"></label>
<div id="count-green">Count: <span>0</span></div>
<input type="radio" name="color" value="yellow" id="yellow">
<label for="yellow"></label>
<div id="count-yellow">Count: <span>0</span></div>
<input type="radio" name="color" value="gray" id="gray">
<label for="gray"></label>
<div id="count-gray">Count: <span>0</span></div>
</div>
<!-- The game board as a grid -->
<div class="game-board">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<label for="seeker" class="checkbox">
I am a Job Seeker
<input type="radio" id="seeker" name="designation">
</label>
<label for="employer" class="checkbox">
I am an Employer
<input type="radio" id="employer" name="designation">
</label>
I have multiple HTML radio inputs which are wrapped around labels (https://i.imgur.com/GLdqodq.png) when a radio is selected for say input name "designation" I'd like to add a border color to the label of the radio button that was selected and remove the border from the other labels (https://i.imgur.com/LOMlBUP.png), here's the the JS code I tried using but for some reason when a radio button is unchecked JS can't seem to detect the event.
const radios = document.querySelectorAll('.checkbox input')
radios.forEach((radio) => {
radio.addEventListener('change', e => {
if (e.target.checked) {
// logic to add label border
} else {
// logic to remove label border
}
})
})
I know this can be done using the CSS plus (+) operator but seems like that would require the label to preceded the input, something I wouldn't want to do. However I'm open to using a CSS method as long as the markup wouldn't have to be changed.
const inputs= document.body.querySelectorAll("input")
document.addEventListener("change", (e)=>{
inputs.forEach(input=>{
if(input.checked){
input.labels[0].style="border-style: solid; padding: 10px;"
}
if(!input.checked){
input.labels[0].style=""
}
})
})
here is the js logic
You can also try this code snippet. I have also provided the required styling if you want.
document.querySelector(".first-checkbox").addEventListener('click', function(){
document.querySelector(".first-checkbox").classList.add("active");
document.querySelector(".second-checkbox").classList.remove("active");
})
document.querySelector(".second-checkbox").addEventListener('click', function(){
document.querySelector(".second-checkbox").classList.add("active");
document.querySelector(".first-checkbox").classList.remove("active");
})
.first-checkbox,.second-checkbox{
border:1px solid #D3D3D3;
border-radius:5px;
padding:5px;
}
.checkbox-container{
width:80%;
display:flex;
justify-content:space-around;
padding:20px;
border:1px solid #C0C0C0;
border-radius:5px;
}
.active{
border:1px solid black;
border-radius:5px;
padding:5px;
}
<div class="checkbox-container">
<label for="seeker" class="first-checkbox">
I am a Job Seeker
<input type="radio" id="seeker" name="designation">
</label>
<label for="employer" class="second-checkbox">
I am an Employer
<input type="radio" id="employer" name="designation">
</label>
</div>
You can simply do it css using input:checked selector
Take an example from below code and codepen link https://codepen.io/naren-irain/pen/XWXWWqq
.radiobox {
display: inline-block;
cursor: pointer;
user-select: none;
}
.radiobox input {
position: absolute;
opacity: 0;
}
.radiobox .check {
background: #fff;
border: 1px solid #979797;
border-radius: 50%;
display: inline-block;
width: 16px;
height: 16px;
position: relative;
top: 1px;
margin-right: 5px;
vertical-align: top;
}
.radiobox span, .radioTab span, .checkbox span {
display: inline-block;
vertical-align: top;
}
.radiobox .check i,
.radioTab .check i {
background: #0db837;
border-radius: 50%;
display: block;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
opacity: 0;
transform: scale(0.75);
transition: all 0.3s;
}
.radiobox input:checked+.check,
.radioTab input:checked+ span .check {
border-color: #5cb85c;
}
.radiobox input:checked+.check i,
.radioTab input:checked+ span .check i {
opacity: 1;
transform: scale(1);
}
<h4>Select any one option</h4>
<label class="radiobox" for="one">
<input type="radio" id="one" name="designation" value="one" />
<span class="check"><i></i></span>
<span>This is one option</span>
</label>
<br/>
<br/>
<label class="radiobox" for="two">
<input type="radio" id="two" name="designation" value="two" />
<span class="check"><i></i></span>
<span>Never think this is an option</span>
</label>
I'm trying to create a timepicker, with the following elements:
Up buttons for the hour and time;
Two displays for next time, one for the next hour and the other for next minutes;
Two displays for current time, one for the current hour and the other for current minutes;
Two displays for the previous time, one for the previous hour and one for the previous minutes;
Down buttons for the hour and time.
I'm trying to create the idea of movement when you press any of the buttons.
This is the visual aspect I've achieved so far:
What I could not do:
To present the upper part of the numbers, on the previous time displays.
What am I doing wrong, and how can I fix it, using javascript, css, jquery and html?
To create the visual look of my timepicker, I used the following code:
$(document).ready(function() {
$("#th31").html("01");
$("#tm31").html("01");
$("#th3").html("00");
$("#tm3").html("00");
$("#th32").html("23");
$("#tm32").html("59");
} );
.modal-pop-up-time{
background-color: WhiteSmoke ;
cursor:pointer;
display:block;
width: 200px;
height: 150px;
position: absolute;
left: 52%;
z-index:10001;
}
.flex-container{
position: relative;
/* Other styling stuff */
width: 50px;
height: 25px;
background-color: #3498db;
}
.flex-container1{
position: relative;
display: inline-block;
/* Other styling stuff */
width: 50px;
height: 10px;
background-color: red;
}
.spinner {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.spinner-input-wrapper {
display: flex;
}
.spinner-input {
margin: 0 3px;
}
.inner-element{
position: absolute;
left: 50%;
top: 50%;
width: 80%;
height: 100%;
transform: translate(-50%,-50%);
/* or 3d alternative if you will add animations (smoother transitions) */
transform: translate3d(-50%,-50%,0);
}
.triangle-up,
.triangle-down {
width: 0;
height: 0;
border: 4px solid transparent;
}
.triangle-up {
border-bottom-width: 8px;
border-bottom-color: #555;
}
.triangle-down {
border-top-width: 8px;
border-top-color: #555;
}
.div-overflow-hide{
overflow: hidden;
}
.input-line-height{
line-height: 10% !important;
}
.input-text-center{
text-align: center !important;
}
.input-background-color{
background-color: DeepSkyBlue ;
}
.input-background-color-white{
background-color: white ;
}
.input-text-color{
color: White;
}
.div-center-element{
margin:auto;
}
.div-ml-40{
margin-left: 40% !important;
}
.div-mlr-5{
margin-right: 5% !important;
margin-left: 5% !important;
}
.div-ml-10{
margin-left: 10% !important;
}
.div-ml-5{
margin-left: 20% !important;
}
.div-tiangles-background-color{
background-color: yellow;
}
<link href="lib/noty.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div tabindex="-1" class = "modal-pop-up-time" id = "popupreg">
<div class="spinner-input-wrapper div-ml-10">
<div class="spinner div-mt-5">
<label class="div-ml-5">HH</label>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-up div-ml-40" id="up4"></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th31" ></div>
</div>
<div class= "flex-container " tabindex="2" >
<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "th3" ></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "th32" ></div>
</div>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-down div-ml-40" id="down4"></div>
</div>
</div>
<div class= "spinner div-mt-5">
<label class="div-mlr-5" >:</label>
</div>
<div class="spinner divmarginhor div-mt-5" >
<label class="div-ml-5" >MM</label>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-up div-ml-40" id="up5"></div>
</div>
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height inner-element div-overflow-hide input-background-color-white" id = "tm31" ></div>
</div>
<div class= "flex-container" tabindex="2">
<div tabindex="2" class = "input-text-center input-background-color input-text-color inner-element" id = "tm3" ></div>
</div >
<div class= "flex-container1" tabindex="1">
<div tabindex="1" class = "input-text-center input-line-height input-background-color-white inner-element div-overflow-hide" id = "tm32" ></div>
</div>
<div class="div-tiangles-background-color" tabindex="2">
<div class="triangle-down div-ml-40" id="down5"></div>
</div>
</div>
</div>
</div>
You can achieve what you want using some absolute positioning and line-height:
.timebox {
display: inline-block;
line-height: 2em;
height: 4em; /* only wants to be double the line-height */
overflow: hidden;
position: relative;
width: 2em; /* can be what you want */
}
.inner {
height: 6em; /* timebox line-height multiplied by 3 (number of numbers */
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.number {
width: 2em;
text-align: center;
}
<div class="timebox">
<div class="inner">
<div class="number">
1
</div>
<div class="number">
2
</div>
<div class="number">
3
</div>
</div>
</div>
<div class="timebox">
<div class="inner">
<div class="number">
21
</div>
<div class="number">
22
</div>
<div class="number">
23
</div>
</div>
</div>
i had created a layout in which i have a form with multiple inputs and a block element (Div) which has already created. Now i want give value (as in px) in input fields and block should be recreated for e.g if the block has 30px width and 30px height initially now i want to change it through inputs when i submit the form the block should be recreated. i think this is to be done in javascript or jquery. Please help me out of this situation your will will be appericiated. here is code below
This is the Fiddle https://jsfiddle.net/gr0q5ea0/
Html
<div class="form-container">
<form action="" id="myForm" name="myForm">
<div class="recreateBox"></div>
<div class="form-row">
<div class="leftSetction">
<div class="input-container">
<label for="name" class="form-label">Height:</label>
<input type="text" class="form-input inputbox" name="height">
</div>
</div>
<div class="leftSetction">
<div class="input-container">
<label for="name" class="form-label">Width:</label>
<input type="text" class="form-input inputbox" name="width">
</div>
</div>
</div>
<div class="form-row">
<div class="leftSetction">
<div class="input-container">
<label for="name" class="form-label">Border Width:</label>
<input type="text" class="form-input inputbox" name="Borderwidth">
</div>
</div>
<div class="leftSetction">
<div class="input-container">
<label for="name" class="form-label">Border Radius:</label>
<input type="text" class="form-input inputbox" name="Borderradius">
</div>
</div>
</div>
<div class="form-row">
<div class="input-container">
<button type="submit" class="btnSubmit" >Submit</button>
</div>
</div>
</form>
</div>
css
.form-container{
position: relative;
width: 100%;
padding: 8px;
box-sizing: border-box;
background: rgba(40, 91, 255, 0.24);
margin: auto auto 35px auto;
max-width: 50%;
top: 17px;
}
.input-container{
width: 100%;
height:auto;
padding-bottom: 12px;
}
.form-label{
font-weight: bold;
margin-bottom: 10px;
font-size: 15px;
display: block;
color:#000;
}
.form-input{
display: block;
width: 50%;
height: 35px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.form-row{
position: relative;
width: 100%;
padding: 14px;
display: inline-block;
box-sizing: border-box;
}
.btnSubmit{
padding: 10px 40px;
position: relative;
background: #31708f;
border-radius: 5px;
outline: none;
box-shadow: none;
color: white;
border:none;
}
.leftSetction ,.rightSection{
width: 49%;
padding-top: 12px;
box-sizing: border-box;
padding-right: 30px;
position: relative;
float: left;
}
.inputbox{
width: 100%;
}
.recreateBox{
width:150px;
height:150px;
position: relative;
margin: 0 auto;
padding: 15px;
background: #5cb85c;
}
With jQuery you can solve it like this (demo here https://codepen.io/8odoros/pen/rmOyEN)
$('.btnSubmit').click(function(){
//Get the given values
var h = $('input[name=height]').val();
var w = $('input[name=width]').val();
var bw = $('input[name=Borderwidth]').val();
var br = $('input[name=Borderradius]').val();
//Set the values
$('.recreateBox').css('height',h);
$('.recreateBox').css('width',w);
$('.recreateBox').css('border-width',bw);
$('.recreateBox').css('border-radius',br+'px');//Needs that 'px' to work
});
There's no need to use form submit for this, so I also changed the button type from submit to button
Try using jQuery to solve it. Whenever the form is submitted just give the box a new CSS-attribute:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
// Hook onto the form's submittion-event
$('#myForm').submit( function( event ) {
// Cancel the original submitting-event
event.preventDefault();
// Retrieve the values from the inputfields
var height = $('#myForm input[name="height"]').val();
var width = $('#myForm input[name="width"]').val();
var borderWidth = $('#myForm input[name="Borderwidth"]').val();
var borderRadius = $('#myForm input[name="Borderradius"]').val();
// Retrieve field (best practice for jQuery)
$recreateBox = $('.recreateBox');
// Set CSS-attributes of the box
$recreateBox.css('height', height);
$recreateBox.css('width', width);
$recreateBox.css('border-width', borderWidth);
$recreateBox.css('border-radius', borderRadius + 'px');
});
</script>
Just copy & paste this at the bottom of your file.
Updated JSFiddle: https://jsfiddle.net/gr0q5ea0/5/
Best of luck!
Take value for input height and width and use jquery for modifying the width and height of the box.
var height= $("input[name=height]").val();
$(".recreateBox").css("height", height);
if you know this can be done through jquery what you have tried ?
you can get the value of the input boxes using class selector something like this -
var a = $('.input').val()
and then use that value to set the css od that div -
$(".yourDiv").css({"height": a });
you can do all this on the click event of the button.
In my website i want to add one feature to disable other image when user select 2 images.
In my website, i have 5 images. Form this 5 image user select max 2 no. of images.
When user select 2 images other 3 images are disable automatically.
See my demo on snippet.This is your answer, Hopefully it sends you in the right direction. Change js according to your need.Here I set length maximum 2.
if (+$("input[name=ItemGrp2]:checked").length > 2)
Use this code.
$( ".two" ).on( "change", function() {
if (+$("input[name=ItemGrp2]:checked").length > 2)
{
this.checked=false;
}
});
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
}
label:before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked + label {
border-color: #ddd;
}
:checked + label:before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked + label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul>
<li><input class="two" name="ItemGrp2" type="checkbox" id="cb1" />
<label for="cb1"><img src="http://lorempixel.com/100/100" /></label>
</li>
<li><input class="two" name="ItemGrp2" type="checkbox" id="cb2" />
<label for="cb2"><img src="http://lorempixel.com/101/101" /></label>
</li>
<li><input class="two" name="ItemGrp2" type="checkbox" id="cb3" />
<label for="cb3"><img src="http://lorempixel.com/102/102" /></label>
</li>
<li><input class="two" name="ItemGrp2" type="checkbox" id="cb4" />
<label for="cb4"><img src="http://lorempixel.com/103/103" /></label>
</li>
</ul>
var $form = $('.form');
var $imgInputs = $form.find('.img-cb');
$imgInputs.on('change', function () {
var isMaxSelected = ($imgInputs.filter(':checked').length >= 2);
$imgInputs.not(':checked').prop('disabled', isMaxSelected);
});
.img-cb {
display: block;
position: absolute;
opacity: 0;
}
.img-cb:disabled + img {
opacity: 0.3;
}
.img-cb:checked + img {
outline: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form action="" class="form">
<label>
<input class="img-cb" type="checkbox">
<img src="http://placehold.it/150" alt="">
</label>
<label>
<input class="img-cb" type="checkbox">
<img src="http://placehold.it/150" alt="">
</label>
<label>
<input class="img-cb" type="checkbox">
<img src="http://placehold.it/150" alt="">
</label>
<label>
<input class="img-cb" type="checkbox">
<img src="http://placehold.it/150" alt="">
</label>
<label>
<input class="img-cb" type="checkbox">
<img src="http://placehold.it/150" alt="">
</label>
</form>
</body>
</html>
Create an event listener which increments a counter initialized to zero upon clicking an image, but only if the counter is not >=2. Also push the ids of the photos clicked (the object is passed along the event anyway)
If counter reaches 2, use jQuery/ native Javascript to hide the photos not in the id list. (This would require a continuous sequence of ids to be given to the photos and also knowledge of # of photos, which in this case is assumed to be 5 and never change dynamically)