I have five thumbnail images in a row, below each image is a title and below the whole row is about 100 words of description text. What I intend to do is setup thumbnails to act as radio buttons to change the block of description text below the row to something relevant to that image.
So far I have setup the thumbnails with:
<div id="thumbcontainer" style="left: 60px;">
<img class="thumb"src="image1.jpg" >Title1
</div>
<div id="thumbcontainer" style="left: 160px;">
<img class="thumb"src="image2.jpg" >Title2
</div>
etc.
<p class=”descrcontainer”>Description text of 100 words</p>
I am working through information in previous questions about how to use images as radio buttons but I cannot find any information about how to change the a block of text when a radio button is clicked. Can someone help me?
Errors
#ids must be unique, there's 2 id="thumbcontainer"
Each class=”descrcontainer”is a syntax error. A smart quote ” does not work in code, use double straight quote "
Solution
Add <input id='rad*' class='rad' name='rad' type='radio' style='display:none'> in front of each <p>
Add display:none to each <p>
Make the <div class="thumbcontainer"> into <label for='chx*'>
Add The CSS etc.
Use label:focus in CSS and add tabindex='1' to each <label> to highlight buttons.
Explaination
A <label> with for attribute with a value of an #id of a form control (e.g. <input type='radio'>) are linked. If you click a <label for='rad0'>, <input id='rad0' type='radio'> is clicked as well--like a remote button.
All <input type='radio'> that share the same name attribute will toggle in sync with each other. The behavior is basically only one radio can be checked.
A radio in the checked state can influence the styles of sibling elements that are after it and elements that are its descendants. In this demo:
.rad:checked + .descrcontainer {display:block;}
Any element with the class of .rad that is checked will make the next element with the class of .descrcontainer appear.
Demo
.descrcontainer {
display: none
}
.rad:checked+.descrcontainer {
display: block;
}
label:focus {
outline: 5px ridge cyan;
box-shadow: 2px 4px 6px 8px rgba(0, 128, 200, 0.4);
}
<label for='rad0' class="thumbcontainer" style="display:inline-block;" tabindex='1'>
<img class="thumb"src="https://static-s.aa-cdn.net/img/ios/1112633650/92503d478bfa0e96f28a3fefe2edf5f1?v=1" width='128'><div style='text-align:center'>Dinosaurs</div>
</label>
<label for='rad1' class="thumbcontainer" style="display:inline-block;" tabindex='1'>
<img class="thumb"src="https://cdn-img.fimfiction.net/user/pcrx-1431833332-196431-256" width='128'><div style='text-align:center'>Demons</div>
</label>
<input id='rad0' type='radio' class='rad' name='rad' style='display:none'>
<p class="descrcontainer">Angulomastacator blikanasaurus colepiocephale didanodon leshansaurus niobrarasaurus nuoersaurus ovoraptor owenodon parksosaurus plateosauravus silvisaurus titanosaurus xenotarsosaurus yaleosaurus yamaceratops yunxiansaurus. Campylodon clepsysaurus elrhazosaurus
giraffatitan heterosaurus iguanodon magnirostris piatnitzkysaurus shanag shidaisaurus tochisaurus veterupristisaurus yimenosaurus. Airakoraptor astrodon balochisaurus brontosaurus ceratonykus elaphrosaurus fabrosaurus hadrosauravus hallopus indosuchus
khateranisaurus moshisaurus nanotyrannosaurus neovenator peltosaurus puertasaurus rebbachisaurus suchosaurus tianyuraptor umarsaurus unquillosaurus wannanosaurus xixiposaurus.</p>
<input id='rad1' type='radio' class='rad' name='rad' style='display:none'>
<p class="descrcontainer">Adramelech andromalius azazel bali raj behemoth bhuta corson dagon eurynomos foras forneus gaki malthus mastema mephistopheles moloch ninurta onoskelis oray ose samael surgat tannin ziminiar. Agares aka manah azazel barbas davy jones drekavac eligos malthus
incubus kokb'ael labal mammon marchosias naberius paimon surgat vapula. Ahriman alal azaz'el baal bael boruta cimeies crocell eblis familiars forcas jikininki labasu morax ad-dajjal medusa naberus serguthy shax shedim. Haborym alastor allocer allu ammut
andhaka asag asb'el azaz'el azi dahaka bael balam davy jones gamigin imp ipos ipes jikininki kabhanda medusa naphula orcus paimonia serguthy vephar vine.</p>
Related
I am trying to hide checkbox, but still allow it to check when a div / button is pressed.
My code for the custom buttons are
<div class="checkbox flex item center-text bg-theme"
style="border: 1px solid #e3e3e3;border-radius: 12px;">
<i class="twf twf-round-pushpin"></i>
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" >
I've tried adding visibility:none and display:none; but this just doesn't work, when i click the buttons, nothing happens.
You might try to add opacity:0; in the css.
If you do not want the box to be directly checkable, use pointer-events:none in addition to that
Add display:inline-block on the first div so it will take only the minimum place and won't leave a big blank.
Then for the checkbox, using display:none works fine, I've added an onclick callback to log the state of the checkbox on each click on the label.
Try this sample:
<div class="checkbox flex item center-text bg-theme" style="border: 1px solid #e3e3e3;border-radius: 12px; display:inline-block;">
<i class="twf twf-round-pushpin"></i>
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" style="display: none;" onclick="console.log(this.checked)">
</div>
I want to exclude materialize css for some items in my view. Eg: i dont want to display materialize styles to check box under table. It causes problems with my internal jquery library. Please check attached image. I gave below html content in my table > td. I want to display this as browser default checkbox.
In my application i am using http://materializecss.com
<div class="checkbox">
<input type="checkbox" class="filled-in dt-checkboxes">
<label></label>
</div>
To remove the Materialize styles from the checkboxes, you first need to understand how the Materialize checkboxes are created:
The "real" checkbox is removed with opacity: 0; and some positioning
A "fake" checkbox is created with the help of the pseudo elements ::before and ::after on the <span> element
So all you need to do is hide the pseudo elements and make the real checkbox visible again. I created a class .reset-checkbox to demonstrate the effect:
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<form action="#">
<div>
<label>
<input type="checkbox" class="filled-in" />
<span>Test with Materialize</span>
</label>
</div>
<div>
<label>
<input type="checkbox" class="filled-in reset-checkbox" />
<span>Test with removed styles</span>
</label>
</div>
</form>
Pay attention to a higher specificity of the selectors here, to make sure that the Materialize styles are overwritten.
I read from this question: Can the label tags for attribute be associated with a normal div? that is not possible to give a div the attribute for to be associated to the id in the input.
Normally if I give a for to label and id to input the radio button is automatically selected whenever the user clicks the text in the label.
Let's say I create a form with many radio buttons and each one of them are in a span or a div so I can dive a border that wraps both label and radio button, let's also say I give a 20px padding all directions, how can I make clickable the all area within the border so it autotomatically selects the radio button associated to the div?
I wrote this below but just found out div doesn't recognize for attribute:
HTML
<div class="radio-btn" for="rdBanana"><input type="radio" name="fruit" value="banana" id="rdBanana"><label>Banana</label></div>
<div class="radio-btn" for="rdOrange"><input type="radio" name="fruit" value="orange" id="rdOrange"><label>Orange</label></div>
<div class="radio-btn" for="rdKiwi"><input type="radio" name="fruit" value="kiwi" id="rdKiwi"><label>Kiwi</label></div>
CSS
.radio-btn {
display: inline-block;
border: 1px solid black;
padding: 20px;
}
How can i make all the padding clickable to automatically select radio button?
Place the button inside the <label>.
Instead of <input type="radio"><label>Banana</label>, use <label><input type="radio">Banana</label>.
Everything inside <label> will become clickable and toggle the button.
((I'm a beginner so this probably has a simple solution, but I've searched with all the keywords I can think of and can't find what I'm looking for. I appreciate any help — clearly I am in over my head.))
I'm trying to give the first radio button within a paragraph a different margin than the rest of the radio buttons. This is what I have:
p.question:first-child input[type=radio] {
margin: 5px;
}
<p class="question">
<input type="radio" name="sample1" /> Yes
<input type="radio" name="sample1" /> No
<input type="radio" name="sample1" /> Maybe-So
</p>
Shouldn't this target the first radio button within a paragraph? Please be gentle.
You're putting the first-child on the <p>, not the radio button.
Try this.
p.question input[type=radio]:first-child {
margin: 5px;
}
Here's a jsfiddle.
I'd like to ensure that there's never a line break between a radio button and the start of its adjacent label. However, I want text within the label to be allowed to wrap. Is this possible? You can see my failed attempts by rendering the following HTML:
<html>
<head>
<style type="text/css">
.box {
border: solid gray 2px;
width: 200px;
margin: 5px;
}
.chopped {
overflow: hidden;
}
</style>
</head>
<body>
The boxes need to be fixed-width, so long content needs to be wrapped, as seen in the first box below. And if someone tries to post a ridiculously long string without any spaces, we need it to be truncated, rather than extend beyond the edge of the box -- the problem is visible in the second box:
<div class="box">
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</div>
<div class="box">
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</div>
<hr/>
So I add "overflow: hidden", and things are somewhat better, but I still don't like how the second box has a line break between the radio button and its label:
<div class="chopped box">
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</div>
<div class="chopped box">
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</div>
<hr/>
If I add <nobr>, the radio buttons are next to their labels, and so the unspaced string now looks perfect. However, this breaks the first string (the one with spaces), since it no longer wraps:
<div class="chopped box">
<nobr>
<input type="radio"/>
<label>This is a really long string with no spaces</label>
</nobr>
</div>
<div class="chopped box">
<nobr>
<input type="radio"/>
<label>This_is_a_really_long_string_with_no_spaces</label>
</nobr>
</div>
</body>
</html>
First, move the radio buttons inside your labels. This adds the nice feature that you can select the radio buttons by clicking the text. Then add a span around the text.
<div class="chopped box">
<label>
<input type="radio"/>
<span class="wrappable">This is a really long string with no spaces</span>
</label>
</div>
<div class="chopped box">
<label>
<input type="radio"/>
<span class="wrappable">This_is_a_really_long_string_with_no_spaces</span>
</label>
</div>
Second, add the following style to your css:
label {
white-space:nowrap;
}
.wrappable {
white-space:normal;
}
The white-space style on the label prevents the linebreak between the radio button and the text, and the span around the text allows it to wrap just within the text.
have you tried white-space:nowrap; inside your .chopped definition?
If you don't mind the less-neat markup, you can get what you want by simply eliminating the white space between the <input> and <label> text.
<div class="chopped box">
<label><input type="radio"/>This is a really long string with no spaces</label>
</div>
<div class="chopped box">
<label><input type="radio"/>This_is_a_really_long_string_with_no_spaces</label>
</div>
(<label>s placed around <input>s per JacobM's suggestion.)
If you want a bit of room between the <input> and the first character of the label, use a non-breaking space ( ) entity.
The solution provided by JacobM is for this special case ofcourse the best solution. But this problem goes beyond just some radio buttons with their labels. My solution in general:
In line text blabla <span style="white-space: normal;"><element /></span> blabla
Thus as a solution for this specific case, the result would be:
<label>
<span style="white-space: normal;">
<input type="radio" />
</span>
This_is_a_really_long_string_with_no_spaces
</label>
PS: My situation was an <input /> element inline in wrapping text. The problem was that it would break the line after the element instead of the text at the end of the line. It was really hard to search for this problem using a searchengine, I hope this helps others out.
Sometimes you can't move the tags around because the output is generated beyond your control. So if you can't move the checkbox / radio button into the label you might want to go with:
.box {
white-space: nowrap;
}
.box label {
white-space: normal;
}