Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm following a tutorial online for creating a show/hide function in javascript to an html5 form and from what I can see everything is spot on. Dreamweaver isn't showing any syntax errors so I really don't understand why it's not working.
Here's the Javascript
function beginner(){
var showA = document.getElementById("q1a1");
var hideA = document.getElementByClassName("ab");
for (var i = 0; i != hideA.length; i++){
if(showA.clicked){
hideA[i].style.display="block";
}
else{
hideA[i].style.display = "none";
}
}/**for loop**/
}/**function**/
here's the CSS
.qbox1{
background-color:#0F9;
width:600px;
height:auto;
margin:auto;
}
.ab{
background-color:#C63;
width:600px;
height:auto;
margin:auto;
display:none;
}
.cd{
background-color:#C63;
width:600px;
height:auto;
margin:auto;
display:none;
}
.ques1{
background-color:#09F;
width:600px;
height:auto;
text-align:center;
}
.anscont{
background-color:#390;
width:500px;
height:40px;
margin:auto;
}
.left-label{
background-color:#CC9;
width:55px;
height:20px;
font-size:8pt;
text-align:center;
float:left;
position:relative;
top:10px;
left:10px;
}
.right-label{
background-color:#CC9;
width:55px;
height:20px;
font-size:8pt;
text-align:center;
float:right;
position:relative;
bottom:30px;
right: 10px;
}
.radcont{
width:340px;
height:40px;
background-color:#096;
margin:auto;
}
.radbox{
width:10%;
height:40px;
float:left;
margin:auto;
background-color:#CC9;
}
.radbox label{
text-align:center;
display:block;
}
.radbox input{
margin:auto;
width: 90%;
display:block;
Here's the html
<form>
<div class="qbox1">
<div class="ques1">
Where are you in terms of operating your Business?
</div>
<input type="radio" name="ques01" value="I just started planning everything" id="q1a1" onClick="beginner()">
<label for="q1a1">I just started planning everything.</label><br />
<input type="radio" name="ques01" value="I’ve been planning for a while and am working on getting it started once and for all." id="q1a2">
<label for="q1a2">I’ve been planning for a while and am working on getting it started once and for all.</label><br />
<input type="radio" name="ques01" value="I’m about to open soon." id="q1a3">
<label for="q1a3">I’m about to open soon.</label><br />
<input type="radio" name="ques01" value="I’m already open for Business." id="q1a4">
<label for="q1a4">I’m about to open soon.</label><br />
</div><br />
<div class="ab">
<div class="ques1">
This is where the Question will go<br />
</div>
<div class="anscont">
<div class="left-label">
Left Text
</div>
<div class="radcont">
<div class="radbox">
<label for="q2a1">1</label>
<input type="radio" name="question01" id="q2a1">
</div>
<div class="radbox">
<label for="q2a2">2</label>
<input type="radio" name="question01" id="q2a2">
</div>
<div class="radbox">
<label for="q2a3">3</label>
<input type="radio" name="question01" id="q2a3">
</div>
<div class="radbox">
<label for="q2a41">4</label>
<input type="radio" name="question01" id="q2a4">
</div>
<div class="radbox">
<label for="q2a5">5</label>
<input type="radio" name="question01" id="q2a5">
</div>
<div class="radbox">
<label for="q2a61">6</label>
<input type="radio" name="question01" id="q2a6">
</div>
<div class="radbox">
<label for="q2a7">7</label>
<input type="radio" name="question01" id="q2a7">
</div>
<div class="radbox">
<label for="q2a8">8</label>
<input type="radio" name="question01" id="q2a8">
</div>
<div class="radbox">
<label for="q2a9">9</label>
<input type="radio" name="question01" id="q2a9">
</div>
<div class="radbox">
<label for="q2a10">10</label>
<input type="radio" name="question01" id="q2a10">
</div>
</div> <!--radcont-->
<div class="right-label">
Right Text
</div>
</div><!--anscont-->
</div><!--ab--><br />
<div class="cd">
<div class="ques1">
This is where the Question will go<br />
</div>
<div class="anscont">
<div class="left-label">
Left Text
</div>
<div class="radcont">
<div class="radbox">
<label for="q2a1">1</label>
<input type="radio" name="question01" id="q2a1">
</div>
<div class="radbox">
<label for="q2a2">2</label>
<input type="radio" name="question01" id="q2a2">
</div>
<div class="radbox">
<label for="q2a3">3</label>
<input type="radio" name="question01" id="q2a3">
</div>
<div class="radbox">
<label for="q2a41">4</label>
<input type="radio" name="question01" id="q2a4">
</div>
<div class="radbox">
<label for="q2a5">5</label>
<input type="radio" name="question01" id="q2a5">
</div>
<div class="radbox">
<label for="q2a61">6</label>
<input type="radio" name="question01" id="q2a6">
</div>
<div class="radbox">
<label for="q2a7">7</label>
<input type="radio" name="question01" id="q2a7">
</div>
<div class="radbox">
<label for="q2a8">8</label>
<input type="radio" name="question01" id="q2a8">
</div>
<div class="radbox">
<label for="q2a9">9</label>
<input type="radio" name="question01" id="q2a9">
</div>
<div class="radbox">
<label for="q2a10">10</label>
<input type="radio" name="question01" id="q2a10">
</div>
</div> <!--radcont-->
<div class="right-label">
Right Text
</div>
</div><!--anscont-->
</div><!--cd--><br />
</form>
As far as I could tell, you only had three mistakes:
1) getElementByClassName should be getElementsByClassName
2) There's no .clicked but .checked
3) On your <input> tag you have onClick when it should be onclick.
function beginner(){
var showA = document.getElementById("q1a1");
var hideA = document.getElementsByClassName("ab");
for (var i = 0; i != hideA.length; i++){
if(showA.checked){
hideA[i].style.display="block";
}
else{
hideA[i].style.display = "none";
}
}/**for loop**/
}/**function**/
.qbox1{
background-color:#0F9;
width:600px;
height:auto;
margin:auto;
}
.ab{
background-color:#C63;
width:600px;
height:auto;
margin:auto;
display:none;
}
.cd{
background-color:#C63;
width:600px;
height:auto;
margin:auto;
display:none;
}
.ques1{
background-color:#09F;
width:600px;
height:auto;
text-align:center;
}
.anscont{
background-color:#390;
width:500px;
height:40px;
margin:auto;
}
.left-label{
background-color:#CC9;
width:55px;
height:20px;
font-size:8pt;
text-align:center;
float:left;
position:relative;
top:10px;
left:10px;
}
.right-label{
background-color:#CC9;
width:55px;
height:20px;
font-size:8pt;
text-align:center;
float:right;
position:relative;
bottom:30px;
right: 10px;
}
.radcont{
width:340px;
height:40px;
background-color:#096;
margin:auto;
}
.radbox{
width:10%;
height:40px;
float:left;
margin:auto;
background-color:#CC9;
}
.radbox label{
text-align:center;
display:block;
}
.radbox input{
margin:auto;
width: 90%;
display:block;
}
<form>
<div class="qbox1">
<div class="ques1">
Where are you in terms of operating your Business?
</div>
<input type="radio" name="ques01" value="I just started planning everything" id="q1a1" onchange="beginner()">
<label for="q1a1">I just started planning everything.</label><br />
<input type="radio" name="ques01" value="I’ve been planning for a while and am working on getting it started once and for all." id="q1a2" onchange="beginner()">
<label for="q1a2">I’ve been planning for a while and am working on getting it started once and for all.</label><br />
<input type="radio" name="ques01" value="I’m about to open soon." id="q1a3" onchange="beginner()">
<label for="q1a3">I’m about to open soon.</label><br />
<input type="radio" name="ques01" value="I’m already open for Business." id="q1a4" onchange="beginner()">
<label for="q1a4">I’m about to open soon.</label><br />
</div><br />
<div class="ab">
<div class="ques1">
This is where the Question will go<br />
</div>
<div class="anscont">
<div class="left-label">
Left Text
</div>
<div class="radcont">
<div class="radbox">
<label for="q2a1">1</label>
<input type="radio" name="question01" id="q2a1">
</div>
<div class="radbox">
<label for="q2a2">2</label>
<input type="radio" name="question01" id="q2a2">
</div>
<div class="radbox">
<label for="q2a3">3</label>
<input type="radio" name="question01" id="q2a3">
</div>
<div class="radbox">
<label for="q2a41">4</label>
<input type="radio" name="question01" id="q2a4">
</div>
<div class="radbox">
<label for="q2a5">5</label>
<input type="radio" name="question01" id="q2a5">
</div>
<div class="radbox">
<label for="q2a61">6</label>
<input type="radio" name="question01" id="q2a6">
</div>
<div class="radbox">
<label for="q2a7">7</label>
<input type="radio" name="question01" id="q2a7">
</div>
<div class="radbox">
<label for="q2a8">8</label>
<input type="radio" name="question01" id="q2a8">
</div>
<div class="radbox">
<label for="q2a9">9</label>
<input type="radio" name="question01" id="q2a9">
</div>
<div class="radbox">
<label for="q2a10">10</label>
<input type="radio" name="question01" id="q2a10">
</div>
</div> <!--radcont-->
<div class="right-label">
Right Text
</div>
</div><!--anscont-->
</div><!--ab--><br />
<div class="cd">
<div class="ques1">
This is where the Question will go<br />
</div>
<div class="anscont">
<div class="left-label">
Left Text
</div>
<div class="radcont">
<div class="radbox">
<label for="q2a1">1</label>
<input type="radio" name="question01" id="q2a1">
</div>
<div class="radbox">
<label for="q2a2">2</label>
<input type="radio" name="question01" id="q2a2">
</div>
<div class="radbox">
<label for="q2a3">3</label>
<input type="radio" name="question01" id="q2a3">
</div>
<div class="radbox">
<label for="q2a41">4</label>
<input type="radio" name="question01" id="q2a4">
</div>
<div class="radbox">
<label for="q2a5">5</label>
<input type="radio" name="question01" id="q2a5">
</div>
<div class="radbox">
<label for="q2a61">6</label>
<input type="radio" name="question01" id="q2a6">
</div>
<div class="radbox">
<label for="q2a7">7</label>
<input type="radio" name="question01" id="q2a7">
</div>
<div class="radbox">
<label for="q2a8">8</label>
<input type="radio" name="question01" id="q2a8">
</div>
<div class="radbox">
<label for="q2a9">9</label>
<input type="radio" name="question01" id="q2a9">
</div>
<div class="radbox">
<label for="q2a10">10</label>
<input type="radio" name="question01" id="q2a10">
</div>
</div> <!--radcont-->
<div class="right-label">
Right Text
</div>
</div><!--anscont-->
</div><!--cd--><br />
</form>
Below line check the spelling of getElementsByClassName method
var hideA = document.getElementsByClassName("ab");
Also change showA.clicked into showA.checked
onClick should be onclick
Related
How would I make it so that when the "Same as shipping address" checkbox is clicked, the billing address section will be hidden? I've been stuck on this for awhile now and decided to come here for help. Thank you very much in advance!
(posting some words here since I can't post due to having more code than text so ignore this part)
I attached a snipped below of my code so hopefully this helps:
.checkbox-custom, .radio-custom {
margin: 0 auto;
width: 40%;
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 1px solid #717171;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
<form class="form1">
<h6>Shipping Address</h6>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
<form class="form2">
<h6>Billing Address</h6>
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
I would recommend removing the div you have around the checkbox in the billing address. After this, you should be able to target .input-box when the checkbox has been checked. I have added a small example to help. You can add display: none or take the route I have depending on your accessibility needs. If you are wondering the ~ you see in the example it targets all siblings following the checkbox. I hope this helps :)
.checkbox-custom:checked ~.input-box {
visibility: hidden;
opacity: 0;
}
<form class="form2">
<h6>Billing Address</h6>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
</form>
1.the dom 'Same as shipping address' isn't inside 'form2',it should between 'form1' and 'form2',like this,'....'same as shipping adress''.otherwise ,u can not toggle show the content.
2. add onChange event on the 'same as shipping address' checkbox, if the value is checked,u can add class on the '' ,the class content is 'display:none'
I'm trying to get my slideshow to present one image at a time. At the moment it shows all the selected images at once; I want one image shown at a time, like in a traditional slideshow with prev/next buttons. I feel like this is really simple and I'm over-thinking things. I've looked at tons of examples but my issue seems to be different from most because in my case the slideshow is different each time -- the images in the slideshow are based off user selected input, therefore the next or previous slide will most likely always be unique, dependent on the topics the user selected.
Anyone have any suggestions? Here is what I have:
$(document).ready(function() {
$("#view-content").on("click", function(e) {
for (var i = 0; i < 20; i++) {
if ($('#topic' + i).prop('checked')) {
$('.topic' + i).show();
} else {
$('.topic' + i).hide();
}
}
});
});
.column {
float: left;
width: 33.33%;
}
.row:after {
content: "";
display: table;
clear: both;
}
input[type=checkbox] {}
.topic {
width: 200px;
height: 3em;
line-height: 3em;
background: #ccc;
border-radius: 50px;
text-align: center;
vertical-align: middle;
}
button {
border-radius: 50px;
border: none;
width: 10em;
height: 3em;
line-height: 3em;
}
.view {
display: block;
margin: 0 auto;
}
.selectall {
display: none;
}
.slideshow {
overflow: auto;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Topics</h1>
<h4>Or choose from popular search terms: </h4>
<div class="row">
<button type="button">term1</button>
<button type="button">term2</button>
<button type="button">term3</button>
<button type="button">term4</button>
<button type="button">term5</button>
<button type="button">term6</button>
<button type="button">term7</button>
<button type="button">term8</button>
<button type="button">term9</button>
<button type="button">term10</button>
</div>
<hr>
<div class="row">
<div class="column">
<div class="topic">
<input type="checkbox" id="topic1" />
<label for="topic1">Topic 1</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic2" />
<label for="topic2">Topic 2</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic3" />
<label for="topic3">Topic 3</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic4" />
<label for="topic4">Topic 4</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic5" />
<label for="topic5">Topic 5</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic6" />
<label for="topic6">Topic 6</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic7" />
<label for="topic7">Topic 7</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic8" />
<label for="topic8">Topic 8</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic9" />
<label for="topic9">Topic 9</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic10" />
<label for="topic10">Topic 10</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic11" />
<label for="topic11">Topic 11</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic12" />
<label for="topic12">Topic 12</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic13" />
<label for="topic13">Topic 13</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic14" />
<label for="topic14">Topic 14</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic15" />
<label for="topic15">Topic 15</label>
</div>
</div>
</div>
<br/>
<button type="button" class="view" id="view-content">View Content</button>
<div class="slideshow">
<img class="topic1 selectall" src="https://i.imgur.com/Kf2zBCB.jpg" />
<img class="topic2 selectall" src="https://i.imgur.com/Sd44gRr.jpg" />
<img class="topic3 selectall" src="https://i.imgur.com/5t6Qp5y.jpg" />
<img class="topic4 selectall" src="https://i.imgur.com/5vyPC7P.jpg" />
<img class="topic5 selectall" src="https://i.imgur.com/H400nzy.jpg" />
<img class="topic6 selectall" src="https://i.imgur.com/MXVqtDe.jpg" />
<img class="topic7 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic8 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic9 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic10 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic11 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic12 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic13 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic14 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic15 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
</div>
You have a standard slideshow, regardless of the fact that only some images are shown. The markup is still the same -- the only different is display: none is applied to some images.
Depending on the type of slideshow you want, you just need to add in some arrows for the user to click on before your first image and after your last image, possibly with pseudo-classes :before:-first-of-type and :after:last-of-type.
Alternatively, you could just usea little bit of extra JavaScript / jQuery to get things working:
$(".slideshow > img:gt(0)").hide();
setInterval(function() {
$('.slideshow > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slideshow');
}, 3000);
Which will hide all slides, then fade in the slides one after another, and can be seen in the following:
$(document).ready(function() {
$("#view-content").on("click", function(e) {
for (var i = 0; i < 20; i++) {
if ($('#topic' + i).prop('checked')) {
$('.topic' + i).show();
} else {
$('.topic' + i).hide();
}
}
$(".slideshow > img:gt(0)").hide();
setInterval(function() {
$('.slideshow > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slideshow');
}, 3000);
});
});
.column {
float: left;
width: 33.33%;
}
.row:after {
content: "";
display: table;
clear: both;
}
input[type=checkbox] {}
.topic {
width: 200px;
height: 3em;
line-height: 3em;
background: #ccc;
border-radius: 50px;
text-align: center;
vertical-align: middle;
}
button {
border-radius: 50px;
border: none;
width: 10em;
height: 3em;
line-height: 3em;
}
.view {
display: block;
margin: 0 auto;
}
.selectall {
display: none;
}
.slideshow {
overflow: auto;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Topics</h1>
<h4>Or choose from popular search terms: </h4>
<div class="row">
<button type="button">term1</button>
<button type="button">term2</button>
<button type="button">term3</button>
<button type="button">term4</button>
<button type="button">term5</button>
<button type="button">term6</button>
<button type="button">term7</button>
<button type="button">term8</button>
<button type="button">term9</button>
<button type="button">term10</button>
</div>
<hr>
<div class="row">
<div class="column">
<div class="topic">
<input type="checkbox" id="topic1" />
<label for="topic1">Topic 1</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic2" />
<label for="topic2">Topic 2</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic3" />
<label for="topic3">Topic 3</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic4" />
<label for="topic4">Topic 4</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic5" />
<label for="topic5">Topic 5</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic6" />
<label for="topic6">Topic 6</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic7" />
<label for="topic7">Topic 7</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic8" />
<label for="topic8">Topic 8</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic9" />
<label for="topic9">Topic 9</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic10" />
<label for="topic10">Topic 10</label>
</div>
</div>
<div class="column">
<div class="topic">
<input type="checkbox" id="topic11" />
<label for="topic11">Topic 11</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic12" />
<label for="topic12">Topic 12</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic13" />
<label for="topic13">Topic 13</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic14" />
<label for="topic14">Topic 14</label>
</div>
<br/>
<div class="topic">
<input type="checkbox" id="topic15" />
<label for="topic15">Topic 15</label>
</div>
</div>
</div>
<br/>
<button type="button" class="view" id="view-content">View Content</button>
<div class="slideshow">
<img class="topic1 selectall" src="https://i.imgur.com/Kf2zBCB.jpg" />
<img class="topic2 selectall" src="https://i.imgur.com/Sd44gRr.jpg" />
<img class="topic3 selectall" src="https://i.imgur.com/5t6Qp5y.jpg" />
<img class="topic4 selectall" src="https://i.imgur.com/5vyPC7P.jpg" />
<img class="topic5 selectall" src="https://i.imgur.com/H400nzy.jpg" />
<img class="topic6 selectall" src="https://i.imgur.com/MXVqtDe.jpg" />
<img class="topic7 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic8 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic9 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic10 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic11 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic12 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic13 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic14 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
<img class="topic15 selectall" src="https://i.imgur.com/OtjnTqO.jpg" />
</div>
In my MVC site, I have a these lines of code:
<h2>#Model.Question</h2>
#using (Html.BeginForm("Index", "Result", FormMethod.Post))
{
<table cellspacing="10">
<tr>
#foreach (string answer in Model.Answers)
{
<td><input type="radio" name="answer" value="#answer" /><span>#answer</span></td>
}
</tr>
</table>
<div id="footer">
<input class="btn btn-success" direction="false" type="submit" name="Back" value="Back" />
<input class="btn btn-success" type="submit" />
</div>
}
(Ignore the currently poorly implement first button in the footer)
The <input type="radio... returns the same amount of radio buttons as answers from a database. My problem is that for one question, there are a lot of answers and it starts making the page scroll sideways, as shown in the image below
What I want to happen is for the radio buttons to start on a new line, possibly in another <td>, when it starts to go too far sideways. Possibly done when it hits the border of a surrounding div I could create? Or when it exceeds a certain pixel width? I am not quite sure how to approach this at all. Thanks in advance!
Instead of using tables for your job, it is better to use DIV with fixed width (or percentage width) and floating them left so they stick together in one line. When there will be too much elements for one line, they will automatically jump to a new line. This will also work if you will change width of your browser.
CSS part:
.elements {
border: 1px solid red;
}
.elements:before,
.elements:after{
display: table;
content: " ";
}
.elements:after {
clear: both;
}
.element {
float: left;
min-height: 1px;
border: 1px solid blue;
margin: 2px;
}
HTML Part:
<div class="elements">
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
</div>
https://jsfiddle.net/4xvdcw9b/2/
If using table is not necessary you can try this approach:
<ul>
#foreach (string answer in Model.Answers)
{
<li><input type="radio" name="answer" value="#answer" /><span>#answer</span></li>
}
</ul>
with this styles:
ul
{
max-width:300px;
list-style-type: none;
}
li
{
display: inline;
}
<div id="1" style="display:block">
<div class="radio">
<label><input type="radio" name="o1"> <input type="text" class="form-control" id="opt1"></label>
</div>
<div class="radio">
<label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
<label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
<label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>
At the moment, it appears to the left of the screen. Please have a look. Thank you.
Try adding some CSS code
#mydiv{
text-align:center
}
<div id="mydiv">
<div class="radio">
<label><input type="radio" name="o1"><input type="text" class="form-control" id="opt1"></label>
</div>
<div class="radio">
<label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
<label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
<label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>
First of all, if you want to center the div with id='1', it needs a parent element
HTML
<div id='parent'>
<div id="myDiv" style="display:block">
<div class="radio">
<label>
<input type="radio" name="o1">
<input type="text" class="form-control" id="opt1">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o2">
<input type="text" class="form-control" id="opt2">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o3">
<input type="text" class="form-control" id="opt3">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o4">
<input type="text" class="form-control" id="opt4">
</label>
</div>
</div>
</div>
CSS
#parent {
display: flex;
justify-content: center;
}
jsfiddle https://jsfiddle.net/g8oLjnus/
learn more about flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
if you use one of the following you can use it to centre it 50% will put the start of text or input box. px means you have to aline manually. insert this into or the css file under #mydiv. to do this change your id to mydiv or something else.
left:50px;
left:50%
I've changed the id to myid; and added a parent div
<div class="parent">
<div id="myid" style="display:block">
<div class="radio">
<label><input type="radio" name="o1"> <input type="text" class="form- control" id="opt1"></label>
</div>
<div class="radio">
<label><input type="radio" name="o2"><input type="text" class="form-control" id="opt2"></label>
</div>
<div class="radio">
<label><input type="radio" name="o3"><input type="text" class="form-control" id="opt3"></label>
</div>
<div class="radio">
<label><input type="radio" name="o4"><input type="text" class="form-control" id="opt4"></label>
</div>
</div>
</div>
The .parent class must be:
.parent{position: relative;}
And the #myid must be
#myid{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Hope is works :)
i am new to bootstrap building a web page .my code segment of HTML page is
<form class="form-horizontal">
<div class="control-group">
<p>Create a promo code</p>
</div>
<div class="control-group">
<div> Promo description * </div>
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
<div class="control-group">
<div>Promo Type</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked></input>
Instant Discount
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"></input>
Cash back
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionRadios3" value="option3"> </input>
Other Gratification
</label>
</div>
</div>
<div class="control-group">
<div> Promo Value * </div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked></input>
Percentage
<label for="hello" class="inline">Upper Limit</label>
<input id="hello" type="text" class="inline" placeholder="Text input">
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> </input>
Fixed Amount
</label>
</div>
</div>
</form>
a screen shot of page generated by this code is
as you can see percentage radio button and Upperlimit label and text input are not inline to each other .i want to make them inline.can any one please help how to accomplish this ??
Update
i tried the suggestion in the comment this time my html segment is
<form class="form-horizontal">
<div class="control-group">
<p>Create a promo code</p>
</div>
<div class="control-group">
<div> Promo description * </div>
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
<div class="control-group">
<div>Promo Type</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked></input>
Instant Discount
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"></input>
Cash back
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionRadios3" value="option3"> </input>
Other Gratification
</label>
</div>
</div>
<div class="control-group">
<div> Promo Value * </div>
<div class="controls">
<label class="radio inline" id="label1">
<input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked></input>
Percentage
</label>
<label for="hello" class="inline" id="label2">Upper Limit
<input id="hello" type="text" class="inline" placeholder="Text input">
</label>
<label class="radio inline" id="label3" >
<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> </input>
Fixed Amount
</label>
</div>
</div>
<div class="control-group">
<div> Promo-code usage count *
</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios2" id="optionsRadios5" value="option1" checked></input>
Unlimited
<label for="hello1" class="inline">Limited
<input id="hello" type="radio" class="radio inline">
</label>
<input id="hello" type="text" class="inline">
</div>
</div>
</form>
and main.css is
#hello,#optionsRadios4#optionRadios6#label1#label2#label3 {
display: inline-block; float: left;
}
and i am getting the screen shot and it is not the expected any other suggestions ??
Does this JSBin look like what you want?