So I'm having an issue. I have to design a css button that can be customized by a user on the fly, with a few customization options. They have to be able to add text, change the button colour, change the button size and change how round the borders are. The thing is, my javascript functions to change the borders and the size of the button aren't working. They also make the other functions not work, oddly enough.
I was told to avoid using jQuery.
The Javascript for the size changing function:
function aBc()
{
var a = document.getElementById("buttontest");
if(document.getElementById("smallS").checked)
{
a.style.width = 100px;
}
else if(document.getElementById("mediumS").checked)
{
a.style.width = 150px;
}
else if(document.getElementById("largeS").checked)
{
a.style.width = 200px;
}
else if(document.getElementById("hugeS").checked)
{
a.style.width = 300px;
}
}
The Javascript for the border changing function:
function changeCorners()
{
var bordertest;
bordertest = document.getElementById("buttontest");
if (document.getElementById("none").checked)
{
bordertest.style.borderRadius = 0px;
}
else if (document.getElementById("small").checked)
{
bordertest.style.borderRadius = 10px;
}
else if (document.getElementById("medium").checked)
{
bordertest.style.borderRadius = 20px;
}
else if (document.getElementById("large").checked)
{
bordertest.style.borderRadius = 30px;
}
else if (document.getElementById("total").checked)
{
bordertest.style.borderRadius = 40px;
}
}
The HTML for everything:
Button Text: <input type="text" onkeydown="changeText(event)" id="bText"><br />
Text Color: <input type="color" id="tColor" name="tColor" value="#3e3e3e" oninput="changeTextColor(tColor.value)"><br />
How Round: <input type="radio" name="roundness" id="none" checked="checked" onchange=changeCorners()>
<label for="none">Square</label>
<input type="radio" name="roundness" id="small" onchange=changeCorners()>
<label for="small">Small Roundness</label>
<input type="radio" name="roundness" id="medium" onchange=changeCorners()>
<label for="medium">Medium Roundness</label>
<input type="radio" name="roundness" id="large" onchange=changeCorners()>
<label for="large">Large Roundness</label>
<input type="radio" name="roundness" id="total" onchange=changeCorners()>
<label for="total">Completely Round</label><br />
Background Color: <input type="color" id="backColor" name="backColor" value="#dddddd" oninput="changeBgColor(backColor.value)"><br />
Shadow Color: <input type="color" id="shadColor" name="shadColor" value="#888888" oninput="changeShadColor(shadColor.value)"><br />
Button Size: <input type="radio" name="size" id="smallS" checked="checked" onchange=aBc()>
<label for="smallS">Small</label>
<input type="radio" name="size" id="mediumS" onchange=aBc()>
<label for="mediumS">Medium</label>
<input type="radio" name="size" id="largeS" onchange=aBc()>
<label for="largeS">Large</label>
<input type="radio" name="size" id="hugeS" onchange=aBc()>
<label for="hugeS">Extra Large</label><br />
<p><input type="button" value="" class="test1" id="buttontest"></p>
You need to quote your property values.
Things like a.style.width = 100px; should be a.style.width = "100px";
Related
I have a survey page where users can click buttons on a scale from 1-5 to say how their experience was. Currently, clicking one button (say 3 out of 5) will change the background color of that one button to indicate it was clicked. What is the best way to approach this if I want to have all buttons have the updated background color up to whatever was clicked? Example: If they click "3" out of 5 then it would highlight buttons 1, 2, and 3.
Any help appreciated.
HTML:
<section class="l-reviews pt-30 pb-15">
<div class="contain">
<div class="row">
<div class="col-md-12">
<div class="reviews-wrapper">
<div class="reviews-top-header">
<p id="">Thank you for taking part. Please complete this survey to let us know how we’re
doing.</p>
<p>Please rate the following on a 1-5 scale (1 = Least, 5 = Most)</p>
</div>
<div class="reviews-body">
<form method='post' name='front_end' action="">
<div class="form-control">
<p>1. Were the payroll process and benefits options explained to you fully?</p>
<div class="input-holder">
<input type='hidden' name='title' value='' />
<input type='hidden' name='email' value='' />
<input type="radio" data='Unsatisfied' name='satisfaction' value='20' id='sat-1' /><label for="sat-1"></label>
<input type="radio" data='Not Very Satisfied' name='satisfaction' value='40' id='sat-2' /><label for="sat-2"></label>
<input type="radio" data='Neutral' name='satisfaction' value='60' id='sat-3' /><label for="sat-3"></label>
<input type="radio" data='Satisfied' name='satisfaction' value='80' id='sat-4' /><label for="sat-4"></label>
<input type="radio" data='Highly Satisfied' name='satisfaction' value='100' id='sat-5' /><label for="sat-5"></label>
</div>
</div>
<button type="button" class="send-btn">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
Javascript:
$('.send-btn').click(function(e) {
e.preventDefault();
let checkOne = false;
let checkTwo = false;
let checkThree = false;
let checkFour = false;
let checkFive = false;
CSS:
#wr-1:checked+label,
#application-rating-1:checked+label,
#goals-rating-1:checked+label,
#refer-rating-1:checked+label,
#sat-1:checked+label {
background: url('/wp-content/themes/theme52950/images/reviews-faces/1-hover.png');
height: 55px;
width: 109px;
display: inline-block;
padding: 0 0 0 0px;
background-repeat: no-repeat;
}
Native checkboxes can't be styled, so you can't easily add a checked appearance to an unchecked checkbox. You can however hide the native appearance, and do some CSS trickery to show a checkbox with round border.
With this you can use jQuery (or native JS) to add a checked appearance to round borders, here to all checkboxes preceding the current one:
$(function() {
$('.form-control input[type="radio"]').click(function(e) {
let $el = $(this);
console.log('clear all highlights');
$el.parent().find('input[type="radio"]').css({ backgroundColor: '#FF572233' });
let id = $el.attr('id');
do {
if(id) {
console.log('highlight', id);
$el.css({ backgroundColor: '#993333' });
}
$el = $el.prev().prev();
id = $el.attr('id');
} while(id);
});
});
.form-control input[type="radio"] {
height: 0.9rem;
width: 0.9rem;
margin-right: 0.5rem;
/* The native appearance is hidden */
appearance: none;
-webkit-appearance: none;
/* For a circular appearance we need a border-radius. */
border-radius: 50%;
/* The background will be the radio dot's color. */
background: #FF572233;
/* The border will be the spacing between the dot and the outer circle */
border: 3px solid #FFF;
/* And by creating a box-shadow with no offset and no blur, we have an outer circle */
box-shadow: 0 0 0 1px #FF5722;
}
.form-control input[type="radio"]:checked {
background: #993333;
}
.send-btn {
margin-top: 15px;
}
.as-console-wrapper { max-height: 85px !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="l-reviews pt-30 pb-15"> <div class="contain"> <div class="row"> <div class="col-md-12"> <div class="reviews-wrapper"> <div class="reviews-body"> <form method='post' name='front_end' action=""> <div class="form-control"> <p>1. Were the payroll process and benefits options explained to you fully?</p> <div class="input-holder"> <input type='hidden' name='title' value='' /> <input type='hidden' name='email' value='' /> <input type="radio" data='Unsatisfied' name='satisfaction' value='20' id='sat-1' /><label for="sat-1"></label> <input type="radio" data='Not Very Satisfied' name='satisfaction' value='40' id='sat-2' /><label for="sat-2"></label> <input type="radio" data='Neutral' name='satisfaction' value='60' id='sat-3' /><label for="sat-3"></label> <input type="radio" data='Satisfied' name='satisfaction' value='80' id='sat-4' /><label for="sat-4"></label> <input type="radio" data='Highly Satisfied' name='satisfaction' value='100' id='sat-5' /><label for="sat-5"></label> </div> </div> <button type="button" class="send-btn">Submit</button> </form> </div> </div> </div> </div> </div> </section>
I am trying to make a quiz app with many questions and Yes or No answers.
So I made a design to make a radio button look like a button and for it to be checked if selected.
I also used javascript to make a slider for that questions.
So the problem is the checked design worked with the first question in the slider but would not work for the rest of the questions.
Here is my code, I don't think that the error in JS but I included it anyways.
const myslide = document.querySelectorAll('.myslide'),
dot = document.querySelectorAll('.dot');
let counter = 1;
slidefun(counter);
let timer = setInterval(autoSlide, 8000);
function plusSlides(n) {
counter += n;
slidefun(counter);
resetTimer();
}
function currentSlide(n) {
counter = n;
slidefun(counter);
resetTimer();
}
function resetTimer() {
clearInterval(timer);
timer = setInterval(autoSlide, 8000);
}
function slidefun(n) {
let i;
for(i = 0;i<myslide.length;i++){
myslide[i].style.display = "none";
}
for(i = 0;i<dot.length;i++) {
dot[i].className = dot[i].className.replace(' active', '');
}
if(n > myslide.length){
counter = 1;
}
if(n < 1){
counter = myslide.length;
}
myslide[counter - 1].style.display = "block";
dot[counter - 1].className += " active";
}
.txt input[type="radio"] {
opacity:0.011;
z-index:100;
}
.txt label {
padding:5px;
border:1px solid #000;
border-radius:10px;
cursor:pointer;
}
.txt label:hover {
background: rgb(238, 255, 5);
}
input[type="radio"]:checked + label {
background:yellow;
}
<div class="myslide fade">
<div class="txt">
<p>What is the question two ?</p>
<input id="yes" type='radio' name="result" value="yes">
<label for="yes">Yes</label>
<br>
<input id="no" type='radio' name="result" value="no">
<label for="no">No</label>
<br>
</div>
<img src="{% static 'img/img1.jpg'%}" style="width: 100%; height: 100%;">
</div>
<div class="myslide fade">
<div class="txt">
<p>What is the question one ?</p>
<input id="yes" type='radio' name="Question1" value="yes">
<label for="yes">Yes</label>
<br>
<input id="no" type='radio' name="Question1" value="no">
<label for="no">No</label>
<br>
</div>
<img src="{% static 'img/img1.jpg'%}" style="width: 100%; height: 100%;">
</div>
Thanks in advance
The problem is that your radio inputs can't have the same ids and have the labels target those same ids. Ids are supposed to be a unique occurrence in the DOM, and the labels are also supposed to reference those unique occurrences. So you need to change the id of the inputs and the for of the labels to correlate to each other specifically.
For example, changing them to "yes1 & no1, and yes2 & no2". This should solve your issue:
<p>What is the question one ?</p>
<input id="yes1" type='radio' name="Question1" value="yes">
<label for="yes1">Yes</label>
<br>
<input id="no1" type='radio' name="Question1" value="no">
<label for="no1">No</label>
and
<p>What is the question two ?</p>
<input id="yes2" type='radio' name="result" value="yes">
<label for="yes2">Yes</label>
<br>
<input id="no2" type='radio' name="result" value="no">
<label for="no2">No</label>
I have this progress bar working. The only thing I am having issues with is changing the color when as many of the check boxes are checked...
0-3 background = red
4-7 = yellow
8-10 = Green
My CSS
.progress-bar-wrapper .progress-bar-filling {
height: 100%;
color: #fff;
text-align: right;
width: 0;
background-color: #39b54a;
border-radius:20px;
}
.progress-bar-wrapper .progress-bar-percent {
font-weight: 400;
font-family: sans-serif;
color: #626162;
padding-top: 6px;
display: block;
}
My HTML / Javascript
<div id="yyy">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<div>
<script>
window.onload = xxx;
function xxx()
{
var zzz = $(".check_id:checked").length;
document.getElementById("insert").innerHTML = zzz
$(document).ready(function(){
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('.progress-bar-filling').animate({ width: progressBarWidth }, 300)
The jFiddle is here Jfiddle
Thanks
You can just check the no. of checked checkboxes via $(".check_id:checked").length and change just the background-color css property.
<div id="yyy">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<div>
<script>
window.onload = xxx;
function xxx()
{
var zzz = $(".check_id:checked").length;
document.getElementById("insert").innerHTML = zzz
$(document).ready(function(){
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('.progress-bar-filling').animate({ width: progressBarWidth }, 300)
//.html(percent + "% ");
$('.progress-bar-percent').html( percent + "% " );
// calculate color
if($(".check_id:checked").length <= 3)
{
$("#progress-bar-filling").css("background-color","red");
}
else if($(".check_id:checked").length >= 4 && $(".check_id:checked").length <= 7 )
{
$("#progress-bar-filling").css("background-color","yellow");
}
else if($(".check_id:checked").length >= 8 && $(".check_id:checked").length <= 10 )
{
$("#progress-bar-filling").css("background-color","green");
}
}
var complete = zzz+'0';
progress(complete, $('#progress-bar'));
})
}
</script>
<p id="insert"></p>
<div class="progress-bar-wrapper">
<div id="progress-bar">
<div id="progress-bar-filling" class="progress-bar-filling"></div>
</div>
<div class="progress-bar-percent"></div>
</div>
Example : https://jsfiddle.net/tLq07L77/1/
Since you already know the number of :checked checkboxers you can add 3 new classes (in your css) to set the background-color of your progress-bar:
.progress-bar-wrapper .progress-bar-filling.fill0 {
background-color: red;
}
.progress-bar-wrapper .progress-bar-filling.fill1 {
background-color: yellow;
}
.progress-bar-wrapper .progress-bar-filling.fill2 {
background-color: #39b54a;
}
Inside your javascript code - first - remove all the fill0,fill1,fill2 classes, and then - based on the number you have - add only the relevant class:
$('.progress-bar-filling').removeClass('fill0 fill1 fill2');
if (zzz <= 3) {
$('.progress-bar-filling').addClass('fill0')
} else if (zzz <= 7) {
$('.progress-bar-filling').addClass('fill1')
} else {
$('.progress-bar-filling').addClass('fill2')
}
Here is a working example:
https://jsfiddle.net/g4Lhvawq/
Im sorry to open a question, which I am sure many will consider very basic but I don't really know javascript and am learning as my application grows
I have the following
When radio button is clicked I would like the div with class="teams" to change border colour to red.
I came up with this code
<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
<label><input type="radio" onclick=" return border()" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="three" value="draw"><span>Draw</span></label><br />
</center>';
function border(){
if(document.getElementById("one").checked){
document.getElementById("teams").style.borderColor="red"
}
else if( document.getElementById("two").checked){
document.getElementById("teams").style.borderColor="red"
}
}
echo'<div class="teams">';
echo'<img src="images/teams/'.$src1.'.png" id="t1" />';
echo'<img src="images/teams/'.$src2.'.png" id="t2" />';
echo'</div>';
Clearly I am doing something wrong. Any help will be greatly appreciated
Following is the error thrown.
teams is a class attribute and not ID.
Change getElementById("teams") to getElementsByClassName("teams")
Note that getElementsByClassName("teams") returns an array of matched elements; so use a loop to set the value of each or just use getElementsByClassName("teams")[0].style.borderColor
function border() {
var el = document.getElementsByClassName("teams")[0];
if (document.getElementById("one").checked || document.getElementById("two").checked) {
el.style.borderColor = "red";
el.style.borderStyle = "solid";
}
}
Try onclick="border(this.id)"
<labe><input type="radio" onclick="border(this.id)" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
<label><input type="radio" onclick=" border(this.id)" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
function border(id){
if(document.getElementById(id).checked){
document.getElementsByClassName('teams')[0].style.borderColor="red"
}
}
Working demo
In your code teams is a class name and not id.
echo'<div class="teams">';
Either you change it to id:
echo'<div id="teams">';
Or use getElementsByClassName("teams"), it will give you NodeList
document.getElementsByClassName("teams")[0].style.borderColor="red";
Apart from this, you could possibly try this solution just using css pseudo:
input[type=radio].check {
display: none;
}
input[type=radio].check + label.check {
border: 1px solid grey;
padding: 5px 7px;
cursor: pointer;
width: 150px;
display: block;
text-align: center;
margin-bottom: 2px;
}
input[type=radio].check:checked + label.check {
background: red;
}
<input type='radio' name='team' value='Team 1' class='check' id='check1' />
<label for='check1' class='check'>Team 1</label>
<input type='radio' name='team' value='Team2' class='check' id='check2' />
<label for='check2' class='check'>Team 2</label>
<input type='radio' name='team' value='Draw' class='check' id='check3' />
<label for='check3' class='check'>Draw</label>
Just a little tip I would try and get away from using the onclick events and move towards external javascript.
I've created an example of something you could try.
$(':radio').change(function ()
{
if ($(this).val() == "team1")
{
$(".row").css("border-color", "blue");
}
else if ($(this).val() == "team2")
{
$(".row").css("border-color", "red");
}
});
div.row {
border: 2px solid black;
height: 200px;
width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
</div>
<label for="team1">1</label>
<input id="team1" type="radio" name="team1" value="team1">
<label for="team2">2</label>
<input id="team2" type="radio" name="team2" value="team2">
I have been trying to create a HTML form consisting of checkboxes in a dropdown. I have been able to do this part. But when you click on a particular dropdown, the remaining dropdown shift down. on the second click th dropdown collapses and they return to their original place. Please help me to correct this problem. I am trying to keep the position of the dropdown constant, if or not the checkboxes are visible.
What I am trying to achieve is something like the filters on the left hand side at http://www.luxuryretreats.com/. Would be thankful for any advise!
Here is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display = "block";
} else {
document.getElementById('ScrollCountry').style.display = 'none';
}
}
function ExposeList2() {
var showstatus = document.getElementById('Scrollguests').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollguests').style.display = "block";
} else {
document.getElementById('Scrollguests').style.display = 'none';
}
}
function ExposeList3() {
var showstatus = document.getElementById('Scrollminprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollminprice').style.display = "block";
} else {
document.getElementById('Scrollminprice').style.display = 'none';
}
}
function ExposeList4() {
var showstatus = document.getElementById('Scrollmaxprice').style.display;
if (showstatus == 'none') {
document.getElementById('Scrollmaxprice').style.display = "block";
} else {
document.getElementById('Scrollmaxprice').style.display = 'none';
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div>
<div id="ScrollCountry"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5"
value="Turks & Caicos">Turks & Caicos<br>
<br />
</div>
</div>
<img src="original2.png" onmouseover="this.src='onhover2.png'"
onmouseout="this.src='original2.png'" onclick="ExposeList2()">
<div>
<div id="Scrollguests"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="n1" name="n1" value="4">2 - 4<br>
<input type="checkbox" id="n2" name="n2" value="6">4 - 6<br>
<input type="checkbox" id="n3" name="n3" value="8">6 - 8<br>
<input type="checkbox" id="n4" name="n4" value="10">8 -
10<br> <input type="checkbox" id="n5" name="n5" value="30">10+<br>
<br />
</div>
</div>
<img src="original3.png" onmouseover="this.src='onhover3.png'"
onmouseout="this.src='original3.png'" onclick="ExposeList3()">
<div>
<div id="Scrollminprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mn1" name="mn1" value="200">200<br>
<input type="checkbox" id="mn2" name="mn2" value="300">300<br>
<input type="checkbox" id="mn3" name="mn3" value="400">400<br>
<input type="checkbox" id="mn4" name="mn4" value="500">500<br>
<input type="checkbox" id="mn5" name="mn5" value="600">600<br>
<br />
</div>
</div>
<img src="original4.png" onmouseover="this.src='onhover4.png'"
onmouseout="this.src='original4.png'" onclick="ExposeList4()">
<div>
<div id="Scrollmaxprice"
style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none">
<input type="checkbox" id="mx1" name="mx1" value="600">600<br>
<input type="checkbox" id="mx2" name="mx2" value="700">700<br>
<input type="checkbox" id="mx3" name="mx3" value="800">800<br>
<input type="checkbox" id="mx4" name="mx4" value="900">900<br>
<input type="checkbox" id="mx5" name="mx5" value="1000">1000<br>
</div>
</div>
<input type="submit" />
</form>
</body>
</html>
You should put a position: absolute on your dropdown list. That way the other dropdown will not be impacted by the fact that you have open / close the other one.
Instead of using the display attribute, use the visibility attribute (visibility = visible | hidden). That would reserve the space required for the DIV irrespective whether is displayed or not.
Modified version here at jsfiddle.