I'm new to CSS/Javascript and am having trouble with something that seems like it should be simple. I have a series of radio buttons and corresponding text. I'd like it all to appear as a bullet-point list, but for some reason messing with the properties of one messes up (or supersedes?) the alignment of the other.
Trying to achieve this (text adjacent to button):
How do I style this in CSS?
<form id="form1">
<input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
<div id="c0" class="choiceText">text here</div>
<input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
<div id="c1" class="choiceText">text here</div>
<input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
<div id="c2" class="choiceText">text here</div>
</form>
The thing is that the div element, by default, have its display CSS property set to block.
Quoting W3Schools, 'a block element is an element that takes up the full width available, and has a line break before and after it.' you may notice that both <div> and <p> behave like this.
You have a couple options here. You may want to use an element that have its display property already set to inline by default, like span or label. An inline element only takes up as much width as necessary, and does not force line breaks.
You may also set your DIVs to display:inline instead of the standard display:block. But then you'll probably want to break the line after the content; in that case you can use the :after selector marker, adding a line break - like this:
<style>
div.choicetext { display:inline; }
div.choicetext:after { content:"\A"; white-space:pre; }
</style>
<form id="form1">
<input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
<div id="c0" class="choiceText">text here</div>
<input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
<div id="c1" class="choiceText">text here</div>
<input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
<div id="c2" class="choiceText">text here</div>
</form>
Very simple, use the <label> tag. Doesn't require extra styling or any CSS tricks to make it work. It just works. Thats what the <label> tag was created for.
Here's the MDN.
Here's the Fiddle
<form id="form1">
<input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
<label id="c0" class="choiceText">text here</label>
<input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
<label id="c1" class="choiceText">text here</label>
<input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
<label id="c2" class="choiceText">text here</label>
</form>
Try this
<form id="form1">
<div id="c0" class="choiceText">
<input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
text here</div>
<div id="c1" class="choiceText">
<input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
text here</div>
<div id="c2" class="choiceText">
<input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
text here</div>
</form>
Related
I am trying to style some radio buttons so that when you click the div, it selects the radio button inside the div.
At the moment, when you click the third div in the list for example, it selects the first div's input. These all have the same ID as it's been written in a razor foreach loop.
here is the HTML generated
<div id="world-container" class="d-flex">
<div class="button-styles image-item">
<input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="1">
<label for="CityTypeId">Urban</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="2">
<label for="CityTypeId">Countryside</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="CityTypeId" name="CityTypeId" type="radio" value="3">
<label for="CityTypeId">Coastal</label>
</div>
</div>
This is the jquery I'm trying to use to select the closest radio button inside that div
$(".button-styles").on("click", function () {
$(this).children('#CityTypeId').prop('checked', true);
});
I can't change the way this HTML is written due to the MVC foreach loop.
Any suggestions or advice how to get around this would be great.
Many thanks in advance
An id should be unique throw a document , you did semantic error by duplicating ids ,
for your issue use classes instead : ( you've already predifined class )
$(this).find('input.city-type-radio').prop('checked', true);
See snippet below :
$(".button-styles").on("click", function () {
$(this).find('input.city-type-radio').prop('checked', true);
});
.image-item {
border:1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="world-container" class="d-flex">
<div class="button-styles image-item">
<input class="city-type-radio" id="cityTypeId1" name="CityTypeId" type="radio" value="1">
<label for="cityTypeId1">Urban</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="cityTypeId2" name="CityTypeId" type="radio" value="2">
<label for="cityTypeId2">Countryside</label>
</div>
<div class="button-styles image-item">
<input class="city-type-radio" id="cityTypeId3" name="CityTypeId" type="radio" value="3">
<label for="cityTypeId3">Coastal</label>
</div>
</div>
$(this).find('input').prop('checked', true);
ID has to be unique, that's the reason why your code don't work. Try to target input directly.
$(this).children('input').prop('checked', true);
I want to be able to enable a div if yes or no was selected from a radio button using jquery. The default is no div shows up
when the page loads. When you now select a radio button it determines which div shows up.
Here is what the html code will look like
<html>
<head>Testing</head>
<body>
<p>Are you 70 years and older? <input type="radio" value="yes" name="myradiobutton" /> Yes <input type="radio" value="no" name="myradiobutton" /> No</p>
<div style="display: none" id="yes">
<p>Yes was selected</p>
</div>
<div style="display: none" id="no">
<p>No was selected</p>
</div>
</body>
</html>
It is a long time I did jquery but was wondering how I can turn this on and off with jquery below.
How can I write this such that I will be able to control the styles on each div via jquery(turning it on and off based on the radio button selection)?
$(".myradiobutton").click(function(){
var selectedval = $("#myradiobutton input[type='radio']:checked").val();
if(selectedval == "yes"){
//show the yes div
}
if(selectedval == "no"){
//show the no div
}
});
Id must be unique .. You've to use it for only one element .. You can use same class for divs so you can hide both of them in one selection .. Also you can use the code like this instead of going with if statement .. And I prefer to use change event instead of click for radio,checkbox,select
$("[name='myradiobutton']").on('change' , function(){
var selectedval = $("input[type='radio'][name='myradiobutton']:checked").val();
$('.just_test').hide(0).filter('#'+selectedval).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Are you 70 years and older? <input type="radio" value="yes" name="myradiobutton" /> Yes <input type="radio" value="no" name="myradiobutton" /> No</p>
<div style="display: none" class="just_test" id="yes">
<p>Yes was selected</p>
</div>
<div style="display: none" class="just_test" id="no">
<p>No was selected</p>
</div>
Don't forget to add class="just_test" to the divs in html
You tried to use #myradiobutton as a query selector but the # represents the id attribute of an element which you don't have in your HTML code.
To fix it, you can't have your two <input type="radio"> elements both using the myradiobutton as id.
Instead of that, my suggestion is to use <label> to represent the <input>s.
Example below:
<input type="radio" name="age" value="yes" id="older-than-70">
<label for="older-than-70">Yes</label>
<input type="radio" name="age" value="no" id="younger-than-70">
<label for="younger-than-70">No</label>
<input> element uses attribute id to identify itself and uses attribute name="age" to group with other <input>s.
<label> element uses attribute for as a pointer to hook to the <input> with matching id.
Another day, another problem. I have something like that:
<p class="checkbox">
<input name="cgv" id="cgv" value="1" type="checkbox">
<label for="cgv">Some text.</label>
</p>
Using jquery I want to change this code to:
<p class="checkbox">
<div class="checker" id="uniform-cgv">
<span>
<input name="cgv" id="cgv" value="1" type="checkbox">
</span>
</div>
<label for="cgv">Some text.</label>
</p>
So, the input element #cgv is inside span and div elements. I want to do this by this code but without any results.
$('#submitGuestAccount').click(function () {
//True if parent is <p> element
if ($('#cgv').parent().hasClass('checkbox')) {
$('<span>').insertBefor('#cgv');
$('</span>').insertAfter('#cgv');
}
});
Is anyone can help me with my problem ?
Kind regards
The jQuery API is well documented : http://api.jquery.com/wrap/.
$("#cgv").wrap(
"<div class=\"checker\" id=\"uniform-cgv\"><span></span></div>"
);
div{border:10px solid red}
span{border:10px solid blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="checkbox">
<input name="cgv" id="cgv" value="1" type="checkbox">
<label for="cgv">Some text.</label>
</p>
I have a jQuery class that manipulates an image whenever it is applied to it, like this:
<div>
<img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="myJQclass1" />
</div>
This works perfectly on its own, however I also have 2 other jQuery classes: myJQclass2 and myJQclass3, these manipulate the image differently than myJQclass1.
What I’m trying to do is create 3 radio buttons and the user will be able to switch the class used depending on what radio button they select (this will change how the image looks).
This is my code so far:
<script>
function check(effect) {
document.getElementById("answer").value=effect;
}
</script>
<form>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass1">Change Colour<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass2">Change Brightness<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass3">Change Contrast<br>
<br>
<div>
<img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answer" />
</div>
</form>
This isn’t working, I think I’m making a basic error, but I’m not sure what it is.
I’ve never worked with radio buttons nor jQuery before, so I would really appreciate any help with this.
Thank you in advance!
Use jQuery removeClass()/addClass(). Use the overload of removeClass() which allows you to remove multiple classes. Then add the class passed into the function
function check(effect) {
$('.answer').removeClass('myJQclass1 myJQclass2 myJQclass3');
$('.answer').addClass(effect);
}
.myJQclass1{
color:yellow;
}
.myJQclass2{
color:green;
}
.myJQclass3{
color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
</script>
<form>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass1">Change Colour<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass2">Change Brightness<br>
<input type="radio" name="effect" onclick="check(this.value)" value="myJQclass3">Change Contrast<br>
<br>
<div>
<img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answer" />
</div>
</form>
You could simplify things a bit more:
$('input:radio').click(function() {
var index = $(this).index('input:radio') + 1;
$('.answer').attr('class', 'answer myJQclass' + index);
});
.myJQclass1 {
color: red;
}
.myJQclass2 {
color: blue;
}
.myJQclass3 {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="effect" />Change Colour
<br/>
<input type="radio" name="effect" />Change Brightness
<br/>
<input type="radio" name="effect" />Change Contrast
<br/>
<br/>
<div>
<img src="cat.jpg" alt="If you can see this, then Javascript may be disabled." class="answer" />
</div>
</form>
I m using the following jquery script to pick a span having a class and focus it
<script type="text/javascript">
$(document).ready(function () {
$('span').each(function () {
if ($(this).hasClass('field-validation-error')) {
$(this).focus();
$(this).addClass('hello');
}
});
});
</script>
For some reasons the focus won't scroll to the span with the class 'field-validation-error' though it does add the class hello to the element.
The section of the html where this span element reside is as belwo
<section id="orderreason">
<div class="orderrow backgrounddot">
<ul>
<li class="widenormal">Please tell us the purpose of your request <span class="asterick">*</span><br>
(this information is used for statistical purposes only)</li>
</ul>
<br>
<p>Please tick any that apply:</p>
<div class="checkboxrow">
<input type="checkbox" value="1" name="orderreason"><label>Patient care</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="2" name="orderreason"><label>Health improvement</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="3" name="orderreason"><label>Professional development</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="4" name="orderreason"><label>Personal development</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="5" name="orderreason"><label>Management/service improvement</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="6" name="orderreason"><label>Research</label>
</div>
<p>Other:</p>
<span data-valmsg-replace="true" data-valmsg-for="orderreason" class="field-validation-error">Please choose a reason or enter other text</span>
</div>
</section>
You can focus on non-input elements if you give your HTML a tabindex attribute like so:
<span tabindex="-1"></span>
The -1 value makes it so that the element can't be tabbed by the user, but you can programmatically focus it with el.focus()
Aside
In your implementation, I assume you are creating validation errors. If the validation error occurs next to the input field, why not focus the input field instead of the span? This will have the added benefit of putting the user's cursor where it needs to be to fix the validation issue and deliver an overall better UX.