First, I would apologize for my grammar I'm french (and like I already said frenchy su** in grammar, but I'm trying to improve myself)
So, I've an table with array who is automatically generated with the upload of an excel list. The table who is generated contain checkboxes. When you click on a checkboxes you've an Div who appears. In this div you can wrote a text who is reported in the excel document and you've to submit for validation. Summary this is for a guest check-list.
The length of the table is variable and I would align the Div with the checkbox who is clicked. (You click and just to the right there is the div who appears).
I've try with a fixed position but this is not enought precise. Somebody can tell me how I can do this or where I've to search ?
<? header('Content-Type: text/html; charset=utf-8'); ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="test.css" media="all"/>
<title>Ceci est une page HTML de test</title>
</head>
<script type="text/javascript" language="JavaScript" src="find5.js">
<form action = "check.php" method="GET">
<div class="slidingDiv" style="text-align:center; float:right; width : auto;">
<input type="checkbox" name="vestiaire[]" /><label>Vestiaire</label> <input type="text" name="commentaire" /> <input type="submit" value="VALIDER" />
Cacher</div>
<ul>
<?php
error_reporting(0);
include("script.php");
$i = 1;
foreach ($invites as $invite)
{
if($invite[0] != '' && $invite[1] == '')
{
echo ' <li>
<div class="circle" style="float:left;"></div>
<h4>'.$invite[0].'</h4>
<input class="show_hide" name="checkbox[]" id="'.$i.'" value="'.$i.'" type="checkbox" style="visibility:hidden" />
<label for="'.$i.'"><i class="fa fa-check"></i></label>
</li>';
}
$i++;
}
Hum I don't know if this is more clear with the code, but the Div wich I want dynamically align is "SlidingDiv"
Thanks !
First of all, the HTML structure with some useful classes.
<form action = "check.php" method="GET">
<!-- This div will never be used directly but rather cloned-->
<div id="originalSlidingDiv" class="slidingDiv" style="text-align:center; float:right; width : auto;">
<input type="checkbox" name="vestiaire[]" />
<label>Vestiaire</label>
<input type="text" name="commentaire" /> <input type="submit" value="VALIDER" />
<!-- We add different classes to the "Cacher" button and to the checkbox as they must behave a bit differently-->
Cacher
</div>
<ul>
<li class="item">
<div class="circle"></div>
<h4 class="item-name">bla</h4>
<input class="show_hide_cb" name="checkbox[]" id="a" value="a" type="checkbox" />
<label for="a"><i class="fa fa-check"></i></label>
</li>
<li class="item">
<div class="circle"></div>
<h4 class="item-name">blo</h4>
<input class="show_hide_cb" name="checkbox[]" id="b" value="b" type="checkbox" />
<label for="b"><i class="fa fa-check"></i></label>
</li>
</ul>
</form>
Then, the jQuery to make it work properly:
$(document).ready(function(){
var originalSlidingDiv = $('#originalSlidingDiv'),
slidingDiv;
$(".slidingDiv").hide();
$(".show_hide").show();
// When clicking each item's checkbox.
$('.show_hide_cb').on('click', function() {
// Check if we appended the slidingDiv already.
slidingDiv = $(this).parent().find('.slidingDiv');
// If not, we clone it, remove its id then append it to the parent (.item).
if (slidingDiv.length === 0) {
slidingDiv = originalSlidingDiv.clone(true, true)
.attr('id', '')
.appendTo($(this).parent());
}
// Finally we toggle display.
slidingDiv.slideToggle();
});
// When clicking the hide button (Cacher).
$('.show_hide_btn').on('click', function(e) {
e.preventDefault();
// $(this).parent() is the .slidingDiv element, we toggle display.
$(this).parent().slideToggle();
// $(this).parent().siblings('.show_hide_cb') is the checkbox, we want it to be unchecked.
$(this).parent().siblings('.show_hide_cb').attr('checked', false);
});
});
You can find enough explanations in the comments. Basically this will clone the .slidingDiv when necessary, append it to the clicked item, and toggle its display, but also will hide the slidingDiv when we click the button "Cacher". It will also uncheck the checkbox to get back to the initial state.
Finally, the little CSS to make it look as you wanted:
.slidingDiv {
text-align: center;
float: left;
}
.item {
margin-top: 1em; /* add some margin as it's removed from the h4 */
}
.circle {
float: left;
}
.item-name {
display: inline-block;
margin-top: 0; /* remove the margin to allow alignment */
}
JSFiddle: https://jsfiddle.net/superbiche/fhqcvbpe/
And yeah, I'm french too :)
There's going to be a lot of different answers to this question! Here's another simple way of doing this.
The reason fixed positioning doesn't work is because fixed always aligns to the window. Meaning, adding position: relative; to its parent element doesn't bind a fixed element. So you have to work with absolutely positioned elements or with pseudo elements.
$('.radio-list a').click(function() {
$('#popup').css({top: $(this).parent().offset().top, left: $(this).parent().position().left + $(this).parent().outerWidth()});
console.log($(this).position(), $('#popup').position());
});
.radio-list {
position: relative;
height: 500px;
width: 25%;
overflow-y: scroll;
}
.radio {
height: 50px;
line-height: 50px;
border: 1px solid #1e1e1e;
}
#popup {
position: absolute;
border: 1px solid red;
width: 300px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="radio-list">
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
<div class="radio">
Click
</div>
</div>
<div id="popup">
Hi I'm the popup
</div>
Related
I have created a modal box. Within my modal box there are sub-categories named publication and food. Each sub category is linked to a checkbox that changes color on click; which also checks and unchecked the checkbox. I have also added code which allows the text within the div to be loaded onto the page after the modal box is closed.
I want to be able to only have only the checked categories to be able to load up the information within the div onto the page after the modal box is closed.
Basically, if the user chooses to check publication by clicking it which turns it red, I want only that div to be shown on page after the modal box is closed. (Vice-versa for the other category)
But if the user has checked both sub categories, I would like both the information from the divs to be shown on page after the modal box is closed.
I have tried created new unique ID for both sub categories and divs but for some reason they are not treated separately.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<style>
.onlyThese{
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label { color:blue }
input[type="checkbox"] { display: none }
input[type="checkbox"]:checked+label { color:red }
}
input:focus{
outline: none;
}
</style>
<body>
<p> <a class="btn" href="#ex5">Sectors </a> </p>
<div id="ex5"; class="modal"; style="background-color:white">
<div style="float:left;">
<p> <input type="checkbox" id="group1" class="yourCheckbox" checked="checked"> <label for="group1" class="onlyThese">Publication </label> </p>
<div id="myDiv"> blastoise </div>
<p> <input type="checkbox" id="group2" class="yourCheckboxx" checked="checked"> <label for="group2" class="onlyThese">Food </label> </p>
<div id="myDivs"> water </div>
</div>
<div>
<p style="float:right">
<b>Apply</b>
</p>
</div>
</div>
<script>
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').hide();
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function(){
if($(this).prop("checked")) {
$('#myDiv, #myDivs').show();
content = $('#myDiv, #myDivs').html();
} else {
$('#myDiv, #myDivs').hide();
content = "";
}
});
$('[rel="modal:close"]').on('click',()=>{
$('.btn').parent().append(content);
})
</script>
</body>
</html>
The code should be able to achieve the following:
-User interacts with modal box named sectors
user clicks on a sub category turning it red which also checks the
checkbox
-user clicks apply and the information from that specific category div is loaded onto the page
You can use data attributes to differentiate between the elements with same events by getting its value from $.data, consider the following:
var content = "";
$('a[href="#ex5"]').click(function(event) {
event.preventDefault();
$(this).modal({
escapeClose: false,
clickClose: false,
showClose: false,
});
$('#myDiv, #myDivs').hide();
$('input[type=checkbox]').prop('checked', false);
});
$('.yourCheckbox, .yourCheckboxx').change(function() {
if ($(this).prop("checked")) {
$("#" + $(this).data('target')).show();
content = $("#" + $(this).data('target')).html();
} else {
$("#" + $(this).data('target')).hide();
content = "";
}
});
$('[rel="modal:close"]').on('click', () => {
$('.btn').parent().append(content);
})
.onlyThese {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="checkbox"]+label {
color: blue
}
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked+label {
color: red
}
}
input:focus {
outline: none;
}
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Remember to include jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
</head>
<body>
<p>
<a class="btn" href="#ex5">Sectors </a>
</p>
<div id="ex5" ; class="modal" ; style="background-color:white">
<div style="float:left;">
<p>
<input type="checkbox" id="group1" class="yourCheckbox" data-target="myDiv" checked="checked">
<label for="group1" class="onlyThese">Publication </label>
</p>
<div id="myDiv"> blastoise </div>
<p>
<input type="checkbox" id="group2" class="yourCheckboxx" data-target="myDivs" checked="checked">
<label for="group2" class="onlyThese">Food </label>
</p>
<div id="myDivs"> water </div>
</div>
<div>
<p style="float:right">
<b>Apply</b>
</p>
</div>
</div>
</body>
I am working on a project. I want the background color to change when two checkboxes are checked. I tried the code below and it failed. I see the code working when we delete it "edit-container2" but I dont want it. I want the Javascript code to work on a different div. (Different example, CSS Body background changes color.) How can I implement the solution?
Important: The code must be JavaScript. It's possible?
$('.edit-container input[type="checkbox"]').change(function() {
var container=$(this).parent('.edit-container');
if(container.find('#a1:checked,#a2:checked').length==2)
container.css('background','red');
else
container.css('background','');
});
.edit-container2 {width:100px; height:100px; }
.edit-container { width:200px; height:200px;}
<div class="edit-container">
<div class="edit-container2">
<input type="checkbox" id="a1" />
<input type="checkbox" id="a2" />
</div>
</div>
Jsfiddle: http://jsfiddle.net/3DPLd/17/
You are looking for wrong parent. First get .edit-container2 and then .edit-container.
Check this.
$('.edit-container input[type="checkbox"]').change(function() {
var container=$(this).parent('.edit-container2').parent('.edit-container');
if(container.find('#a1:checked,#a2:checked').length==2)
container.css('background','red');
else
container.css('background','');
})
.edit-container2 {width:100px; height:100px; background:green;}
.edit-container {background:blue; width:200px; height:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit-container">
<div class="edit-container2">
<input type="checkbox" id="a1" />
<input type="checkbox" id="a2" />
</div>
</div>
Rather than chaining an arbitrary amount of .parent methods, just use .parentsUntil('.edit-container'):
$('.edit-container input[type="checkbox"]').change(function() {
var container=$(this).parentsUntil('.edit-container'); // changed this line here
if(container.find('#a1:checked,#a2:checked').length===2) { // use triple equals, not double
container.css('background','red');
} else {
container.css('background','');
}
});
.edit-container2 {width:100px; height:100px; }
.edit-container { width:200px; height:200px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit-container">
<div class="edit-container2">
<input type="checkbox" id="a1" />
<input type="checkbox" id="a2" />
</div>
</div>
I think this will solve your problem.
$('.edit-container2 input[type="checkbox"]').change(function() {
var container = $(this).parent().parent();
if ($('#a1').is(':checked') && $('#a2').is(':checked')) {
container.css('background', 'red')
} else {
container.css('background', '');
}
});
I am struggling to get this to work correctly. I want to add tick marks and custom labels to jquery mobile's slider widget (https://api.jquerymobile.com/slider/) First I would like to add tick markers at 0, 25, 50, 75, and 100. Above each tick I would like a custom string/label. Lastly I would like the labels to scale with the jquery slider as the size of the page changes. Right now I can add labels without ticks, but it only fits for one screen size.
$( ".ui-content" ).on( "slidestop", function( event, ui ) {
event.preventDefault();
event.stopImmediatePropagation();
var newState = $("#slider-0").val();
} );
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content" style="padding: 40px;">
<div role="main" class="ui-content">
<div class="labels" >
<label for="points" style="display: inline; padding: 55px;">volume off</label>
<label style="display: inline; padding: 50px;" for="points">quiet</label>
<label style="display: inline; padding: 50px;" for="points">normal</label>
<label style="display: inline; padding: 50px" for="points">loud</label>
<label style="display: inline; padding: 50px" for="points">max</label>
</div>
<input type="range" data-highlight="true" data-popup-enabled="true" name="slider-0" id="slider-0" value="50" min="0" max="100" data-theme="b" data-track-theme="a"/>
</div>
</div>
</div>
</body>
</html>
I have tried using CSS % for the padding, but that did not work as expected. I have also tried the suggestions here jQuery UI Slider Labels Under Slider, here Add tick marks to jQuery slider? and here Set font on custom span jQuery Mobile slider labels but I could not get the ticks and labels to stay lined up with the slider. I thought this would be a simple formatting issue, but I am having trouble putting everything together. Any help is greatly appreciated.
Edit
After some more research I stumbled upon this blog: https://css-tricks.com/equidistant-objects-with-css/ from that I tried the option using flex. So I added the flex styling to my labels class to get <div class="labels" style="display: flex; justify-content: space-between;">. I tested this on chrome and safari it seems to work fine. But I am still not sure how to get the ticks to work.
A while back I wrote a blog entry for customizing the jQM slider widget:
https://jqmtricks.wordpress.com/2014/04/21/fun-with-the-slider-widget/
In it is an example for adding tick marks and labels that scale with the slider. Here is the code updated to have the labels above the slider instead of below it and a demo of the code running in CodePen:
HTML
<div id="example2a" class="example" >
<label for="theSlider2a">Slider with Tick marks:</label>
<input type="range" name="theSlider2a" id="theSlider2" min="0" max="100" value="60" />
</div>
JavaScript (put your desired label text inside the spans)
var ticks = '<div class="sliderTickmarks "><span>volume off</span></div>';
ticks += '<div class="sliderTickmarks "><span>Quiet</span></div>';
ticks += '<div class="sliderTickmarks "><span>Normal</span></div>';
ticks += '<div class="sliderTickmarks "><span>Loud</span></div>';
ticks += '<div class="sliderTickmarks "><span>Max</span></div>';
$("#example2a .ui-slider-track").prepend(ticks);
CSS
.sliderTickmarks{
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 25%;
float: left;
border-right: 1px solid #888;
}
.sliderTickmarks span{
position: relative;
left: 100%; top: -135%;
margin-left: -16px;
font-size: 12px; font-weight: normal; white-space: nowrap;
}
.ui-slider-track > div.sliderTickmarks:first-child{
border-right: 0; width: 0;
}
.ui-slider-track > div.sliderTickmarks:first-child span{
margin-left: -5px;
}
.ui-slider-track > div.sliderTickmarks:last-of-type{
border-right: 0;
}
DEMO
Might sound dirty, using table to display well these labels.
<div role="main" class="ui-content">
<table class="labels">
<tr>
<td>volume off</td>
<td>quiet</td>
<td>normal</td>
<td>loud</td>
<td>max</td>
</tr>
</table>
<input type="range" data-highlight="true" data-popup-enabled="true" name="slider-0" id="slider-0" value="50" min="0" max="100" data-theme="b" data-track-theme="a"/>
</div>
Try giving this a go. I agree the flexbox approach is the best way. The answer to your tick problem could be an offset div with a black border-left.
//I didn't touch this
$( ".ui-content" ).on( "slidestop", function( event, ui ) {
event.preventDefault();
event.stopImmediatePropagation();
var newState = $("#slider-0").val();
} );
.labels {
display: flex;
justify-content: space-between;
width: 92.5%;
margin-left:7.5%
}
.verticalLine {
height:10px;
border-left: solid black;
margin-left: 50%;
}
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content" style="padding: 40px;">
<!-- Remove padding. Add tick divs -->
<div role="main" class="ui-content">
<div class="labels" >
<label for="points" style="display: inline;">volume off
<div class="verticalLine"></div>
</label>
<label style="display: inline;" for="points">quiet
<div class="verticalLine"></div>
</label>
<label style="display: inline;" for="points">normal
<div class="verticalLine"></div>
</label>
<label style="display: inline;" for="points">loud
<div class="verticalLine"></div>
</label>
<label style="display: inline;" for="points">max
<div class="verticalLine"></div>
</label>
</div>
<input type="range" data-highlight="true" data-popup-enabled="true" name="slider-0" id="slider-0" value="50" min="0" max="100" data-theme="b" data-track-theme="a"/>
</div>
</div>
</div>
</body>
</html>
PLAYGROUND HERE
I'd like to style radio buttons differently if they fit in a single row. For example:
The first container doesn't have enough space to fit all the radio buttons in a single row. Therefore, they appear vertically as normal radio buttons.
The second container has enough space. Therefore, the radio buttons appear as buttons.
Is that possible to achieve this behaviour using CSS only?
If not, Javascript "hack" is welcome.
PLAYGROUND HERE
HTML
<div class="container radio">
<div>
<input id="a1" type="radio" name="radio">
<label for="a1">Yes,</label>
</div>
<div>
<input id="a2" type="radio" name="radio">
<label for="a2">it</label>
</div>
<div>
<input id="a3" type="radio" name="radio">
<label for="a3">is</label>
</div>
<div>
<input id="a4" type="radio" name="radio">
<label for="a4">possible</label>
</div>
<div>
<input id="a5" type="radio" name="radio">
<label for="a5">to</label>
</div>
<div>
<input id="a6" type="radio" name="radio">
<label for="a6">achieve</label>
</div>
<div>
<input id="a7" type="radio" name="radio">
<label for="a7">this</label>
</div>
</div>
<div class="container buttons">
<div>
<input id="b1" type="radio" name="buttons">
<label for="b1">Yes,</label>
</div>
<div>
<input id="b2" type="radio" name="buttons">
<label for="b2">it</label>
</div>
<div>
<input id="b3" type="radio" name="buttons">
<label for="b3">is</label>
</div>
<div>
<input id="b4" type="radio" name="buttons">
<label for="b4">possible</label>
</div>
</div>
CSS (LESS)
.container {
display: flex;
width: 220px;
padding: 20px;
margin-top: 20px;
border: 1px solid black;
&.radio {
flex-direction: column;
}
&.buttons {
flex-direction: row;
> div {
input {
display: none;
&:checked + label {
background-color: #ADFFFE;
}
}
label {
padding: 5px 10px;
margin: 0 1px;
background-color: #ccc;
}
}
}
}
Not possible in CSS, but it doesn't take much JavaScript.
In CSS, add flex-shrink: 0 to > div. This will prevent .container's children from shrinking smaller than their extent.
In JavaScript:
Apply the buttons class.
Use Element.getBoundingClientRect to determine if the last child of .container is outside the extent of .container. If so, switch to the radio class. (You also need to take the right padding into account. Thanks to #Moob for pointing that out.)
Javascript
var container = document.querySelector('.container'),
lastChild= document.querySelector('.container > :last-child'),
paddingRight= parseInt(window.getComputedStyle(container, null).getPropertyValue('padding-right')),
timer;
window.onresize = function() {
clearTimeout(timer);
timer= setTimeout(function() {
container.classList.remove('radio');
container.classList.add('buttons');
if (container.getBoundingClientRect().right-paddingRight <
lastChild.getBoundingClientRect().right) {
container.classList.add('radio');
container.classList.remove('buttons');
}
});
}
Updated JSBin
I can't think of a CSS only solution but you could use JS to test if the items would fit in a row and apply the 'radio' or 'buttons' classname accordingly:
Forgive my rough JS - its inelegant and for modern browsers only but you get the idea:
var containers = document.querySelectorAll(".container"),
test = function(){
for (i = 0; i < containers.length; ++i) {
var container = containers[i],
divs = container.querySelectorAll("div"),
iw = 0;
container.classList.remove("radio");
container.classList.add("buttons");
//get the sum width of the div
for (d = 0; d < divs.length; ++d) {
iw+=divs[d].offsetWidth;
}
var style = window.getComputedStyle(container, null);
var ow = parseInt(style.getPropertyValue("width"));
if(ow<=iw){
container.classList.add("radio");
container.classList.remove("buttons");
}
}
};
window.onresize = function(event) {
test();
};
test();
http://jsbin.com/zofixakama/3/edit?html,css,js,output
(resize the window / panel to see the effect)
Update: If you add .container div {flex-shrink:0;} to the style the JS can be much simpler as we don't have to measure the combined width of the divs (thanks #rick-hitchcock). However, although the code is more elegant, it does not take the container's padding into account.
See: http://jsbin.com/zofixakama/5/edit?html,css,js,output
If I understand what you're asking correctly, you can change your flex-direction portion to row instead of column. This will cause them to align inside the box.
You'll have to do some more styling to properly get the labels to appear the way you want, but this should put them in the row for you. I've updated the playground with my changes.
Try the following example..............
------------HTML-----------
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="table-row">
<div class="col">
<input type="Radio">This
</div>
<div class="col" style="padding-top: 2px;">
<input type="Radio">Is
</div>
<div class="col">
<input type="Radio">Simply
</div>
<div class="col" style="padding-top: 2px;">
<input type="Radio">Possible
</div>
</div>
</body>
</html>
-------CSS-------------
.table-row{
display:table-row;
/* text-align: center; */
}
.col{
display:table-cell;
/* border: 1px solid #CCC; */
}
Wouldn't it work to test for width then if necessary remove the radio button icon and replace with a graphic or shape?
.checkbox {
display:none;
}
.label {
display: inline-block;
height: 20px;
background: url('picture.png');
}
It's probably not that simple but I use that for check boxes and it seems to work in that situation.
You can achieve this only by using css and no need of scripting.
HTML: You have to place the input within tag which will contain the text.
<div>
<label for="a1">
<input id="a1" type="radio" name="radio">Yes,
</label> </div>
CSS: Here in CSS we will have to hide the radio button, so that only the text will be visible. When the user clicks on the text, it actually clicks the radio button.
div lable input#a1{
display:none;
}
there is pretty solution CSS only, but you have to know maximum amount of elements in row. It is based on counter, but not on real size.
For example, if you are sure, that you can put 4 elements into a row, in any case, you may use following selector:
if amount is more less or equal 4:
div:nth-last-child(-n+5):first-child,
div:nth-last-child(-n+5):first-child ~ div {
}
if amount is more then 4:
div:nth-last-child(n+5),
div:nth-last-child(n+5) ~ div {
}
try this: http://jsbin.com/fozeromezi/2/edit (just remove/add divs)
I am using image radio buttons which are working fine. However one of the radio buttons needs to be checked by default. However when this is set, it will not display the border around the checked image as it will when you click to select.
I have tried quite a few different things such has checked via html as well as javascript onload to no avail.
(Note there is only one radio button to select, this is because currently there is no 2nd option however there will be in the near future hence why we are pre checking it)
Any ideas?
<script type="text/javascript">
$(document).ready(function() {
$("a.radio-color-picture").click(function(){
var $id = $(this).attr('id');
$("a.radio-color-picture").removeClass('radio-color-border');
$("a#" + $id).addClass('radio-color-border');
});
});
function set_radio($inputid) {
$("input#" + $inputid).click();
}
</script>
<style type="text/css">
a.radio-color-picture {
border: 2px solid transparent;
display: inline-block;
height: 160px;
margin-right: 10px;
text-decoration: none;
width: 160px;
}
a.radio-color-picture:hover {
border:2px solid #d13a7a;
}
a.radio-color-border {
border:5px solid #d13a7a;
}
a#color {
background: url("<?php echo get_bloginfo('wpurl');?>/wp-content/themes/Impreza/_customimages/thumbnail.jpg") no-repeat scroll 0 0 white;
}
.hidden {
left: -10000px;
position: absolute;
top: -1000px;
}
</style>
<input type="radio" value="CHAR" name="color" id="color" class="hidden" checked="checked" />
<a id="color" href="javascript:set_radio('color');" class="radio-color-picture"> </a>
Cheers :)
This could actually be done much simpler :
Demo
Javascript :
$(document).ready(function(){
$('a.radio-color-picture').click(function(){
$(this).prev('input.hidden').click();
return false;
});
});
HTML (make sure you use unique ids !)
<input type="radio" value="CHAR" name="color" id="color" class="hidden" />
<a data-idinput="color" id="link" class="radio-color-picture"> </a>
<input type="radio" value="CHAR2" name="color" id="color2" class="hidden" checked="checked" />
<a data-idinput="color2" id="link2" class="radio-color-picture"> </a>
<input type="radio" value="CHAR3" name="color" id="color3" class="hidden" />
<a data-idinput="color3" id="link3" class="radio-color-picture"> </a>
And this is the main trick in CSS (only for IE >= 9) :
input.hidden:checked + a {
border:5px solid #d13a7a;
}
Edit : Demo for older versions of IE compatibility
to show the css to default checked you have to add the css 'class' or 'id' by default to the pre checked radio button and its respective href tag.