Create a new <td> if it exceeds a certain width? - javascript

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;
}

Related

Hide a div based on select radio button in a form

I have a form where you have to choose between two input type="radio", one says yes and the other one says no.
I want to make a div that is visible in the form disappear when you select the no option. I tried by copying some JS from other posts I read on the internet, but nothing worked for me.
Can someone tell me the code I should use? It can be JS, PHP or CSS.
Here is my code:
<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="yes" id="yes" checked value="YES">
<label for="hsi">YES</label>
<span class="check"></span>
</div>
<div class="form-radio-item">
<input type="radio" name="no" id="no" value="NO">
<label for="hno">NO</label>
<span class="check"></span>
</div>
</div>
<div id="hello">
You clicked on NO, so this div disappears.
</div>
You need to add event listeners to your inputs, as well you should change the name of both radio buttons to be the same thing. I used inputs below. I then toggle the display style on the #hello element depending on which selection was clicked.
const hello = document.getElementById('hello');
document.getElementById('yes')
.addEventListener('click', function() {
hello.style.display = null;
});
document.getElementById('no')
.addEventListener('click', function() {
hello.style.display = 'none';
});
<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="inputs" id="yes" checked value="YES">
<label for="hsi">YES</label>
<span class="check"></span>
</div>
<div class="form-radio-item">
<input type="radio" name="inputs" id="no" value="NO">
<label for="hno">NO</label>
<span class="check"></span>
</div>
</div>
<div id="hello">
You clicked on NO, so this div disappears.
</div>
You can achieve this with pure CSS. Don't know if my solution is suitable because I have no idea how the rest of your page is structured.
.form-radio {
position: relative;
padding-bottom: 2rem;
}
input#no ~ #floatingDescription {
position: absolute;
bottom: 0px;
left: 0px;
display: block;
}
input#no:checked ~ #floatingDescription {
display: none;
}
<!DOCTYPE html>
<hml>
<body>
<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="answer" id="yes" checked>
<label for="hsi">YES</label>
</div>
<div class="form-radio-item">
<input type="radio" name="answer" id="no">
<label for="hno">NO</label>
<div id="floatingDescription">You clicked on NO, so this div disappears.</div>
</div>
</div>
</body>
</html>

multiple buttons with same form at a time

I have multiple buttons that has a same class. When clicking the button, there's a form popups. how can I make it dynamic? so whenever I click a button not all form will popup.
See sample code below.
$(".plans-de-mesure-form-button").click(function(){
$(".evaluation-gratuite-form").fadeIn("slow");
});
a.plans-de-mesure-form-button {
cursor:pointer;
}
.evaluation-gratuite-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing">
<a class="plans-de-mesure-form-button">Evaluation</a>
<div class="evaluation-gratuite-form">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
</div>
<div class="listing">
<a class="plans-de-mesure-form-button">Evaluation</a>
<div class="evaluation-gratuite-form">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
</div>
up to your structure you can use $(this) and .next()
$(".plans-de-mesure-form-button").click(function(){
$(this).next(".evaluation-gratuite-form").fadeIn("slow");
});
to close the form
$('.Close_Button_Class').on('click',function(){
$(this).closest(".evaluation-gratuite-form").fadeOut("slow");
});
Try this way $(this).next(".evaluation-gratuite-form")
$(".plans-de-mesure-form-button").click(function(){
$(this).next(".evaluation-gratuite-form").fadeIn("slow");
});
a.plans-de-mesure-form-button {
cursor:pointer;
}
.evaluation-gratuite-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing">
<a class="plans-de-mesure-form-button">Evaluation</a>
<div class="evaluation-gratuite-form">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
</div>
<div class="listing">
<a class="plans-de-mesure-form-button">Evaluation</a>
<div class="evaluation-gratuite-form">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
</div>
More Elegant solution will be that which is DOM independent because there can be more elements who are siblings.
Use parents instead of parent function if a tag is present at nested levels.
So use below code:
$(".plans-de-mesure-form-button").click(function(){
$(this).parent('.listing').find(".evaluation-gratuite-form").fadeIn("slow");
});

how to really hide HTML div element using css or js

I want to hide div element located in bootstraps radio or checkbox container,
this is how it look using jquery:
I can't post image, so prev is here: http://prntscr.com/6wrk2m
<style>
.my-radio{
border: 1px solid #F0F;
}
</style>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x1" onClick="$('#qq').toggleClass('hide')" />1
</label>
</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x2" onClick="$('#qq').toggleClass('hide')" />2
</label>
</div>
<div id="qq">8-bit pork belly Echo Park scenester</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x3" onClick="$('#qq').toggleClass('hide')" />3
</label>
</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x2" onClick="$('#qq').toggleClass('hide')" />2
</label>
</div>
display:none doesn't work too ...
You have multiple ways. You can do this by
.hide {
display: none;
}
or even by this class:
.hide {
border: 0 none;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
UPDATE:
Check this example: JSFiddle
This would work, note the addition of classes and the use of an event handler instead of the inline javascript:
$(function() {
$('.hideOnClick').click(function(){
$('#qq').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.my-radio{
border: 1px solid #F0F;
}
</style>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x1" class="hideOnClick" />1
</label>
</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x2" class="hideOnClick" />2
</label>
</div>
<div id="qq">8-bit pork belly Echo Park scenester</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x3" class="hideOnClick" />3
</label>
</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x2" class="hideOnClick" />2
</label>
</div>
This is how i just did using jquery:
$('#qq').hide();
Hope it helps...
in CSS you can hide an element simply by changing it's css display property to none. simply use display:none and there you go :)
as for jquery solution you can use hide() method. here is a full example :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
update:
i personally prefer just overriding css using a java code.wrap this code in a function and add onclick to your button or your checkbox with the refrece of function you just made
document.getElementById("qq").setAttribute("style", "display:none");

jquery 'change' event not firing on Image-click for buttonset in form

Here is an example : http://jsfiddle.net/c8uywnpa/21/ which works on other browsers but IE (10).
The issue comes when a the buttonset is wrapped within a 'form' element. Please see example included.
<b> Form - Click on image does not work, must click on number </b>
<form>
<div id="myRadio">
<input id="rf1" type="radio" name="myRadio" value="1" />
<label for="rf1">1 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
<input id="rf2" type="radio" name="myRadio" value="2" />
<label for="rf2">2 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
</div>
</form>
<hr>
<h3> No Form - Click on image works </h3>
<div id="myRadioNoForm">
<input id="r1" type="radio" name="myRadioNoForm" value="1" />
<label for="r1">1 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
<input id="r2" type="radio" name="myRadioNoForm" value="2" />
<label for="r2">2 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
</div>
$("#myRadio").buttonset().on('change', function(event) {
alert($(this).find(":checked").val());
});
$("#myRadioNoForm").buttonset().on('change', function(event) {
alert($(this).find(":checked").val());
});
Clicking on the numbers in the label fires the change event but does not if you click on the Image in the label. Any help is much appreciated.
I had the same problem. I'm not using jQuery. I had the image wrapped with the span, so I tried to add an :after pseudoelement to it. It covers the image, so when clicking, you click on the pseudoelement rather than on the image. And it helped for me. ie9-11
.image { position: relative; display: block;}
.image:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%;}
<label for="answ">
<span class="image"><img src="image.jpg"></span>
</label>

Multiple radio buttons to show/hide div

I have 4 radio buttons and I need to show a specific div based on which is clicked and make sure the other 3 remain hidden, etc for all 4. I can only find code to make 2 work but not 4.
Does anyone have an example how to do this?
Just as a test I have
<div id=onestyle=display:none> 1 </div>
<div id=two style=display:none> 2 </div>
<div id=three style=display:none> 3 </div>
<div id=four style=display:none> 4 </div>
but cannot find something to sort out doing it with all of them.
Buttons are just basic in place to test right now:
<div data-biller="standard" class="membership-plan ">
<label for="option_2624" id="tt-2624">
<input value="12" id="option_2624" name="signup[optionid]" type="radio" checked="checked">
<span class="duration" style="float:left; "><var class="" ref=""> 12<br></span></label>
</div>
<div data-biller="standard" class="membership-plan ">
<label for="option_2429" id="tt-2429">
<input value="6" id="option_2429" name="signup[optionid]" type="radio">
<span class="duration" style="float:left; "><var class="" ref=""> 6 <br></span></label>
</div>
<div data-biller="standard" class="membership-plan ">
<label for="option_1554" id="tt-1554">
<input value="3" id="option_1554" name="signup[optionid]" type="radio" >
<span class="duration" style="float:left; "><var class="" ref=""> 3 <br></span></label>
</div>
<div data-biller="standard" class="membership-plan ">
<label for="option_1697" id="tt-1697">
<input value="1" id="option_1697" name="signup[optionid]" type="radio">
<span class="duration" style="float:left; "><var class="" ref=""> 1<br></span></label>
</div>
You can do this by jQuery like the following
I added a custom attribute to the radio that is connected to the div and this will only show one div per click
HTML Code
<div class="my-div me_1" data-target="1">1</div>
<div class="my-div me_2" data-target="2">2</div>
<div class="my-div me_3" data-target="3">3</div>
<div class="my-div me_4" data-target="4">4</div>
<div class="my-div me_5" data-target="5">5</div>
<input type="radio" data-target-id="1" name="radio" class="radioBtn">
<input type="radio" data-target-id="2" name="radio" class="radioBtn">
<input type="radio" data-target-id="3" name="radio" class="radioBtn">
<input type="radio" data-target-id="4" name="radio" class="radioBtn">
<input type="radio" data-target-id="5" name="radio" class="radioBtn">
JS Code
$(document).ready(function(){
$('.radioBtn').click(function(){
var target = $(this).data('target-id');
$('.my-div').hide();
$('.my-div[data-target="'+target+'"]').show();
});
});
And here is a working example
http://jsfiddle.net/JU7Nw/70
Here's a sample code that does what you want. I am not using any javascript library but plain old javascript.
<html>
<head>
<script type="text/javascript">
function showDiv (divId)
{
var div = document.getElementById (divId);
var divs = document.getElementsByTagName('div');
for (var i in divs)
{
divs [i].className = "hidden";
}
div.className = "shown";
}
</script>
<style>
.hidden
{
display:none;
}
.shown
{
display:block;
}
</style>
</head>
<body>
<input type="radio" onclick="showDiv ('1')" name="selectme">1</input>
<input type="radio" onclick="showDiv ('2')" name="selectme">2</input>
<input type="radio" onclick="showDiv ('3')" name="selectme">3</input>
<input type="radio" onclick="showDiv ('4')" name="selectme">4</input>
<div id="1" class="hidden">Hey, its me, 1</div>
<div id="2" class="hidden">Hey, its me, 2</div>
<div id="3" class="hidden">Hey, its me, 3</div>
<div id="4" class="hidden">Hey, its me, 4</div>
</body>
</html>

Categories

Resources