I have two custom styled radio buttons that look like below [just an example]
li {
width: 100px;
border: 1px solid black;
display: inline-block;
}
<ul>
<li>
<input type="radio" name="radio-test" id="radio1">
<div>
<label for="radio1">Radio One</label>
</div>
</li>
<li>
<input type="radio" name="radio-test" id="radio2">
<div>
<label for="radio2">Radio Two</label>
</div>
</li>
</ul>
Once this has been made to look prettier, I would ideally want that clicking anywhere inside the box enclosing a radio button should trigger activation of that choice.
My team mates have used custom styles and images to show selection and hence I do not want to modify CSS.
I was trying to think of a way to implement mentioned functionality with Javascript.
Attack a click event-handler on the li and trigger a click on the underlying input but that causes an infinite recursion of event triggers.
This raised 2 questions in my mind:
Is there a way to stop the the click recursion? I tried preventDefault and stopPropagation on the JS triggered click but
they do not seem to accomplish what I want.
Can we user JavaScript(or jQuery if needed) to differentiate between a real mouse click and a JS triggered click event?
You were on the right track. You just need to stop the propagation from the input back up to the list item:
$('li').click(function() {
$(this).find('input').click()
})
$('input').click(function(e) {
e.stopPropagation();
})
li {
width: 100px;
border: 1px solid black;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<input type="radio" name="radio-test" id="radio1">
<div>
<label for="radio1">Radio One</label>
</div>
</li>
<li>
<input type="radio" name="radio-test" id="radio2">
<div>
<label for="radio2">Radio Two</label>
</div>
</li>
</ul>
Related
Ive been thinking about this for days... seems simple but I can't wrap my head around it!
We want to make a simple booking form, where people chose a day and then see two columns of available time slots. I already generate a lost of these.
Now I need to display this in buttons, so they can be pressed and only 1 is selected. So if they choose 2pm Wednesday, and then another, the first goes back to the standard color...
This value needs to be loaded in a hidden field to pass on to the next page.
Having searched it seems like the colors are best done in jquery and the hidden field can be populated easily with vanilla js, that part I have working... Help, how add the color change?
ps this is on a bootstrap 3.4 template, not that that should matter but maybe
<input type="button" id = "booktime" onclick="change(this)" class="btn btn-default" value=" & thishour & ">
function change(bookingtime) {
document.getElementById("myInput").value= bookingtime.value;
}
var links = $('#booktime');
links.click(function() {
links.css('background-color', 'white');
$(this).css('background-color', 'purple');
});
Consider the following HTML and jQuery example.
$(function() {
$(".booking label").click(function() {
var $self = $(this).parent();
$("input", $self).trigger("click");
$(".checked").removeClass("checked");
$self.addClass("checked");
});
$("form").submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
for (var pair of formData.entries()) {
console.log(pair[0] + ', ' + pair[1]);
}
});
});
.booking ul {
list-style: none;
padding: 0;
width: 100px;
}
.booking li {
border: 1px outset rgb(224, 224, 224);
border-radius: 6px;
background: #eee;
padding: 7px;
text-align: center;
margin-bottom: 3px;
font-family: Arial, sans-serif;
}
.booking li.checked {
background: #aaf;
}
.booking li:hover {
background: #ccc;
}
.booking li input {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="booking">
<ul>
<li>
<input type="radio" id="time-0000" name="time" value="12:00">
<label for="time-0000">12:00 AM</label>
</li>
<li>
<input type="radio" id="time-0100" name="time" value="01:00">
<label for="time-0100">1:00 AM</label>
</li>
<li>
<input type="radio" id="time-0200" name="time" value="02:00">
<label for="time-0200">2:00 AM</label>
</li>
<li>
<input type="radio" id="time-0300" name="time" value="03:00">
<label for="time-0300">3:00 AM</label>
</li>
<li>
<input type="radio" id="time-0400" name="time" value="04:00">
<label for="time-0400">4:00 AM</label>
</li>
</ul>
</div>
<button type="submit">Save</button>
</form>
Most of the User Interface is all CSS. You can make it a bit mo9re custom and include a better look and feel with additional JavaScript. The default function of the Radio Button will help.
Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.
This will help each button retain a State, either Checked or Unchecked. only one can be checked at a time, so we can simple clear the Styling from any other and apply it to the one clicked upon.
I am building a quiz that is going to generate a set of 10 questions of out a pool of 40.
My idea is to use a generated array of 10 numbers and hide them using JQuery. The JQuery would .hide() the questions that aren't needed and the would be displayed in the default format.
I need the divs of the questions that are selected to take up the spaces left by the hidden divs. Since the pool is massive, is there a practical way to do this?
Note: I don't have the JQuery done at the moment.
/* Quiz Styling */
.quiz-wrapper{
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
}
.header{
margin-top: 50px;
height: 150px;
text-align: center;
background-color: red;
width: 100%;
}
.question{
margin-top: 10px;
}
ul{
margin-left: 10px;
list-style-type: none;
}
#qu1{
visibility: hidden;
}
<div class="header">
<h1> You have made it into the quiz!</h1>
<br>
<p>You are about to go through a series of 10 MCQs. <br>
At the end of the questions, you will obtain your marks!<br>
Good Luck and Have Fun! <br>
Once ready, press the button below!</p>
</div>
<div class="quiz-wrapper">
<button id="quiz_start" class="quiz_start">Click me to start!</button>
<div class="quiz">
<div class="question" id="qu1"><span class="qu_no"></span>A game where player fight in an arena-style environment is referred as __________?
<ul>
<li>
<input type="radio" id="one_a" name="gametype" value="one_a" required>
<label for="one_a">MMO</label>
</li>
<li>
<input type="radio" id="one_b" name="gametype" value="one_b" required>
<label for="one_b">RPG</label>
</li>
<li>
<input type="radio" id="one_c" name="gametype" value="one_c" required>
<label for="one_c">Open World</label>
</li>
<li>
<input type="radio" id="one_d" name="gametype" value="one_d" required>
<label for="one_d">FPS</label>
</li>
</ul>
</div>
<div class="question" id="qu2"><span class="qu_no"></span>What is the name of the most recent graphics card series released by nVidia?
<ul>
<li>
<input type="radio" id="two_a" name="gpucards" value="two_a" required>
<label for="two_a">RTX 3000 Series</label>
</li>
<li>
<input type="radio" id="two_b" name="gpucards" value="two_b" required>
<label for="two_b">Intel i5</label>
</li>
<li>
<input type="radio" id="two_c" name="gpucards" value="two_c" required>
<label for="two_c">Jolt Series</label>
</li>
<li>
<input type="radio" id="two_d" name="gpucards" value="two_d" required>
<label for="two_d">GTX 1000 Series</label>
</li>
</ul>
</div>
I think that if any element have been hidden by JQuery .hide(), the element has display: none style, so nothing in this element cannot be displayed.
Simply have a set size for the whole div.
The hidden questions will have display:none and will therefore not take up any space, you can give all questions something like height: 100%; and they will always fill out the big div, or if they also have a set size (as in set by pixels, or vh etc.) the questions will just keep appearing as in a list.
Not sure if this answers your question or if there is something else you are trying to do, do you mean that you always want the next question on top? In that case I would not have the questions as a part of the div from the beginning, but rather have them in an array in JavaScript and then use the jquery function .prepend() to add them as the first element to the div.
I'm creating my own star-rating system for my website. The user can select anywhere between 1-5 stars.
The idea is that the user has to click on a star to select a rating, and all stars left on the one clicked get highlighted, including the star clicked.
Behind the scenes, I have a radio button for each star. The radio button gets selected when a user clicks on a star.
However, I want to have the stars highlight on mouseenter and if the user doesn't click, on mouseout the stars should reset to the default value represented by the radio button.
Fiddly fiddle
I'm not sure of how to best achieve this, and my current code does also give a Maximum call stack size exceeded error. No idea why. I can't find any infinite loops.
HTML
<div class="starrating-container">
<div class="star"><input type="radio" name="star-radio" value="1" hidden></div>
<div class="star"><input type="radio" name="star-radio" value="2" hidden></div>
<div class="star"><input type="radio" name="star-radio" value="3" hidden></div>
<div class="star"><input type="radio" name="star-radio" value="4" hidden></div>
<div class="star"><input type="radio" name="star-radio" value="5" hidden></div>
</div>
CSS
.starrating-container {
display: inline-block;
}
.star {
float: right;
display: inline-block;
width: 24px;
height: 24px;
background-image: url('http://www.timelinecoverbanner.com/cliparts/wp-content/digital-scrapbooking/lemon-star-md1.png');
background-size: cover;
-webkit-filter: saturate(0);
}
JS
$('.star').on({
'mouseenter': function() {
$(this).nextAll().andSelf().css('-webkit-filter', 'saturate(1)');
$(this).prevAll().css('-webkit-filter', 'saturate(0)');
},
'mouseleave': function() {
$(this).siblings().find(':radio').each(function() {
if($(this).val() > $('.star input[name=radioName]:checked').val()) {
$(this).nextAll().andSelf().css('-webkit-filter', 'saturate(1)');
$(this).prevAll().css('-webkit-filter', 'saturate(0)');
}
});
},
'click': function() {
$(this).children(':radio').click();
}
});
Here's great solution:
Accessible star rating widget with pure CSS
you have to stop the radio button from triggering the click on the parent element too:
http://jsfiddle.net/pz2dey7u/4/
(added some background color to see the effect)
$(this).children('radio').prop('checked', true);
Edit to answer: OK, so it seems this problem has come up before. The key seems to be in the return false; statement in the js prepareList function. I commented it out and now the code works fine. For more information and a more complete answer, here is the previous version of the question.
EDIT: Here's a jsfiddle that reproduces the error.
I'm trying to make a form using the expandable list code found here, and my checkboxes and radio buttons are either unresponsive or glitchy. They both know they're being pressed, they change to the depressed image when I click on them, but they don't update their value. For radio buttons, I can click one and it works, but then the others in that group become unresponsive. I have a dummy php page to just print out the results of the form, but it doesn't appear to be receiving any data. NOTE: This is my first website project, there may be something completely obvious that I'm just missing.
Here's a sample of the HTML:
<div id="listContainer">
<div class="listControl">
<a id="expandList">Expand All</a>
<a id="collapseList">Collapse All</a>
</div>
<form id="ColForm" action="Table.php" method="post"> <!--Organized list of collumns and filter options-->
<ul id="expList">
<li>Section heading
<ul>
<li><input type="checkbox" name="ColSelect" value="Name" form="ColForm"> <!--If checked, collumn will be included in final table--> Name
<ul>
<li>
<input type="text" name="Name" form="ColForm"><br> <!--filter parameter input-->
</li>
</ul>
</li>
<li><input type="checkbox" name="ColSelect" value="RA,Dec" form="ColForm">Another collumn
<ul>
<li>
<input type="radio" name="PoSearch" value="Range" form="ColForm">Radio button to select form type for this section<br>
<i>I have an option here
<input type="radio" name="Degs" value="Dec" form="ColForm">Option 1
<input type="radio" name="Degs" value="Hex" form="ColForm">Option 2</i><br>
Text input 1<br>
<input type="text" name="RA" form="ColForm">deg<br>
Text input 2<br>
<input type="text" name="Dec" form="ColForm">deg<br>
<input type="radio" name="PoSearch" value="Area" form="ColForm">Second form option<br>
<i>Text input A</i><br>
<input type="text" name="Area" form="ColForm"><br>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<input type="submit" value="submit" form="ColForm">
</form>
</div>
And here's the javascript for the list function:
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button functionality
$('#expandList')
.unbind('click')
.click( function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click( function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
$(document).ready( function() {
prepareList()
});
And the relevant CSS:
#listContainer{
margin-top:15px;
}
#expList ul, li {
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
#expList p {
margin:0;
display:block;
}
#expList p:hover {
background-color:#121212;
}
#expList li {
line-height:140%;
text-indent:0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
/* Collapsed state for list element */
#expList .collapsed {
background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
background-image: url(../img/expanded.png);
}
#expList {
clear: both;
}
The issue here is with event.preventDefault() in your code. It's keeping the checkboxes / radio buttons from performing their default behavior. Removing that entry will allow the input tags to function normally. But they will no longer trigger the expand and collapse functionality you're looking for.
You'll need to modify your JS to also listen for the click on the checkboxes. Here are some similar situations that may help you:
making on-click events work with checkboxes
clicking on a div to check / uncheck a checkbox
I am trying to make a page in wordpress (it is built within wordpress custom page tool in admin interface).
What i want is 3 radio buttons. 2 visable 1 hidden.
The hidden one should be auto checked so it displays the correct div. (Maybe not needed when i use z-index in css?)
When a user click one of the checkboxes it should hide the another 2 divs and display the correct div (notice they are on the same place on the page).
For some reson i cant get this to work in wordpress. Or if there would be another way of doing the same way i am open for it as well.
CSS:
#apDiv3 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:12;
background-color: #000;
color: #F00;
}
#apDiv10 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:11;
background-color: #000;
color: #F00;
}
#apDiv11 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:11;
background-color: #000;
color: #F00;
}
<script>
$(document).ready(function(){
$("input[name='payway']").click(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
</script>
HTML/PHP:
<p>
<input type="radio" name="payway" value="apDiv10" />
pay2
<input type="radio" name="payway" value="apDiv3" checked="checked" style="display:none;">
</p>
<p>
<input type="radio" name="payway" value="apDiv11" />
Pay1
</p>
<div id="apDiv3" class="desc">
This is the standard div that should be visable
</div>
<div id="apDiv10" class="desc">
Shows this div when user click on checkbox pay2
</div>
<div id="apDiv11" class="desc">
Shows when user click checkbox pay1
</div>
It seems when i looked at the head.php file there was a script that dident work which made my script not to work at all.
Once i removed the script from the head it worked.
Thank you all!