For some reason the check-boxes on this form are not clickable and are very, very, tiny using google chrome. When using firefox the checkboxes work great. I'm not exactly sure what to look for... It's really strange!!! Is there something wrong with the way I'm using <form>? When I use inspector even if I disable all css the checkboxes are still tiny. not sure what is going on. reset browser cache etc. really could use some help.
HTML: http://pastebin.com/Pt6YgGP7:
CSS: http://pastebin.com/WHap5Vmh
Screenshot:
<div class="categories">
<button class="tyl_category" id="category1">Category1</button>
</div>
<form name ="things-you-like-form" class="sub-categories" action="things-you-like">
<div class="control-group">
<div class="controls category" id="form-category1">
Select from Category 1
<input type="checkbox" name="tyl_picked1" value="c1s1">
<label for "category1-subcategory1">1.1</label>
<input type="checkbox" name="tyl_picked1" value="c12">
<label for "category1-subcategory2">1.2</label>
<input type="checkbox" name="tyl_picked1" value="c1s3">
<label for "category1-subcategory3">1.3</label>
<input type="checkbox" name="tyl_picked1" value="c1s4">
<label for "category1-subcategory4">1.1</label>
</div>
</div>
<!-- end for-each sub-categores -->
</form>
</div>
JS
<script>
$(document).ready(function() {
$('form').each(function() { this.reset() });
var progress = 0;
$categories = $('.categories');
$sub_categories = $('.sub-categories');
$(document).on('click','.tyl_category', function(e) {
$form = $('#form-'+this.id);
console.log(this.id);
$categories.hide('slide', { direction: 'left' }, 250, function() {
$sub_categories.show();
$form.show('slide', { direction: 'right' },250);
});
});
$(document).on('click','input[type="checkbox"]', function (e) {
var $this = $(this);
var $progress_bar = $('#tyl_progress_bar');
if ($this.is(':checked')) {
progress +=1;
} else {
progress -=1;
}
$progress_bar.text('Step '+progress+'/5');
$progress_bar.css({width: (progress*25)+"%"});
$form = $this.parent('div');
$form.hide('slide', { direction: 'left' }, 250, function() {
$sub_categories.show();
$categories.show('slide', { direction: 'right' },250);
});
});
});
</script>
I had this problem too and had to set the checkbox height and width:
.make-checkbox-reasonable-height {
height: 16px;
width: 16px;
}
<div class="col-sm-2">
<input asp-for="MyCheckBox" class="form-control input-control make-checkbox-reasonable-height" />
</div>
Related
i want to have multiple elements with same class that act independently, after 1 night of seeking if "forEach" has any 'forEach:active' i end up with code below, but i feel kind of little shame with 'nextSibling of parent of parent' but if is supported by atleast any modern browsers, then is better than nothing.
on codePen is working fine,as well as snippet here.
i wonder if i can find a better version in vanila js for it or if is there anything deprecated that i should change.
//get + button
const up = document.querySelectorAll('.up');
//tell to + to increase his previous frend value
[].forEach.call(up, function(element) {
element.addEventListener('click', function() {
this.previousElementSibling.value =
parseInt(this.previousElementSibling.value) + 1;
});
})
//get -
const down = document.querySelectorAll('.down');
//tell to - to decrease his next frend value && and hide
//dynamic
//input if == 0 && show firstAdd button
[].forEach.call(down, function(element) {
element.addEventListener('click', function() {
this.nextElementSibling.value =
parseInt(this.nextElementSibling.value) - 1;
if (this.nextElementSibling.value == 0) {
this.parentElement.parentElement.style.display = 'none';
this.parentElement.parentElement.nextElementSibling.style.display = 'initial';
}
});
})
//get firstAdd button
const fAdd = document.querySelectorAll('.firstAdd');
//tell to it to add dynamic input && to vanish itself after &&
//set input value = 1
[].forEach.call(fAdd, function(element) {
element.addEventListener('click', function() {
this.previousElementSibling.style.display = 'initial';
this.previousElementSibling.children[1].children[1].value = 1;
this.style.display = 'none'
});
})
.form-group {
width: 30%;
margin: 30px;
display: none;
}
.input-group {
flex-direction: row;
display: flex;
}
body {
background: #111;
}
<div class='one'>
<div class="form-group">
<label>value: </label>
<div class="input-group">
<button class="down">-</button>
<input type="text" class="myNumber" value='1'>
<button class="up">+</button>
</div>
</div>
<button class='firstAdd'>Add</button></div>
<br>
<div class='two'>
<div class="form-group">
<label>value: </label>
<div class="input-group">
<button class="down">-</button>
<input type="text" class="myNumber" value='1'>
<button class="up">+</button>
</div>
</div>
<button class='firstAdd'>Add</button></div>
Hi I am trying to hide some input fields when a checkbox is clicked.
Currently the checkbox will change color when clicked so that i know which one is active. It is not hiding the field when clicked tho.
I've tried a few methods but none seem to work so any help would be great.
My JQuery code:
$(function () {
$("#approvedToggle").buttonset(function () {
if ($('#ApproveButton').prop('checked')) {
$("#slider2").show();
} else {
$("#slider2").hide();
}
});
});
My asp.net markup
<div class="price-slider">
<h4 class="great">Do you pay an annual renewal fee?</h4>
<div class="col-sm-12">
<div>
<fieldset id="approvedToggle" class="text-center">
<input type="radio" id="ApproveButton" checked="checked" name="radio" />
<label id="ApproveButtonLabel" for="ApproveButton">Yes</label>
<input type="radio" id="RejectButton" name="radio" />
<label id="RejectButtonLabel" for="RejectButton">No</label>
</fieldset>
</div>
<p class="text-center">Percentage amount</p>
<div id="slider2"></div>
<h2 class="text-center" style="color: red"><b>OR</b></h2>
<p class="text-center">Fixed Amount</p>
<input type="text" id="fixedAnnualy" placeholder="0" class="form-control" />
<br />
</div>
</div>
My CSS
#ApproveButtonLabel.ui-state-active {
background: blue;
}
#ApproveButtonLabel.ui-state-active span.ui-button-text {
color: White;
font: bold
}
#RejectButtonLabel.ui-state-active {
background: blue;
}
#RejectButtonLabel.ui-state-active span.ui-button-text {
color: White;
font: bold
}
try like this:
you need to change event action and need to change html:
<div id="slider2"></div>
your $("#slider2") is empty.
$(function () {
$("#approvedToggle input[type='radio']").click(function () {
if ($('#ApproveButton').prop('checked')) {
$("#slider2").show();
} else {
$("#slider2").hide();
}
});
});
demo
Try something like below and take a look at Fiddle
$("#approvedToggle").click(function () {
if ($('#ApproveButton').prop('checked')) {
$("#slider2").show();
} else {
$("#slider2").hide();
}
});
Your slider2 was empty so added a simple data .
Check if this is what you want
This worked for me. Bind the event separately from invoking the buttonset
$("#approvedToggle").buttonset();
$("#approvedToggle").change(function () {
if ($('#ApproveButton').prop('checked')) {
$("#slider2").show();
} else {
$("#slider2").hide();
}
});
I used an animation which expands/collapses a form on an event. Works fine in FF, Chrome and Safari but IE10+ behaves unexpectedly and disturbs the alignment.
HTML:
<div id="w_oCExpandFormWrapper" style="position:absolute !important;">
<div class="w_oInput2" id="w_oCFirstField">
<input type="hidden" id="w_oCRecomendTxt1" />
</div>
<input id="w_oCRecommendArtficialButton" type="button" value="RECOMMEND"/>
<textarea class="w_oInput3" id="w_oCRecomendTxt2" placeholder="...?"></textarea><br/>
<div class="w_oInput2" id="w_oCThirdField">
<input type="hidden" id="w_oCRecomendTxt3" />
</div>
<input type="text" class="w_oInput2" id="w_oCRecomendTxt3" placeholder="..."/><br/>
<input id="w_oCRecommendButton" type="button" style="margin-left: 239px;" value="RECOMMEND"/>
</div>
JavaScript:
to expand/collapse
//Expand
$('#w_oHExpandFormWrapper').css({"height":"auto","overflow":"auto"})
//Collapse
$('#w_oHExpandFormWrapper').css({"height":"20px","overflow":"hidden"})
and for animation is.
$('#w_oHExpandFormWrapper').animate({"height":"20px","overflow":"hidden"},"fast");
Please help!
This animation code is based on Animate element to auto height with jQuery. Press the Trigger button to cycle through the jQuery function calls that mutate the styles in the snippet.
Your form wrapper id is different in the html and js in the question. The auto height you had wasn't working in Chrome either, but after 5 years who knows if this is still an issue, but you just edited the question to add a character...
let count = 0;
$('#trigger').on('click', function() {
if (count == 0) {
//Expand
console.log('expand');
$('#w_oHExpandFormWrapper').css({
"height": "auto",
});
} else if (count == 1) {
//Collapse
console.log('collapse');
$('#w_oHExpandFormWrapper').css({
"height": "20px",
});
} else if (count == 2) {
//Expand Animation
console.log('expand animation');
$('#w_oHExpandFormWrapper').animate({
"height": $( '#w_oHExpandFormWrapper' )[0].scrollHeight,
}, "fast");
} else if (count == 3) {
//Collapse Animation
console.log('collapse animation');
$('#w_oHExpandFormWrapper').animate({
"height": "20px",
}, "fast");
}
count = (count + 1) % 4;
});
#w_oHExpandFormWrapper {
background: red;
top: 40px;
min-width: 200px;
overflow: hidden;
height: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="trigger">Trigger</button>
<div id="w_oHExpandFormWrapper" style="position:absolute!important;">
<div class="w_oInput2" id="w_oCFirstField">
<input type="hidden" id="w_oCRecomendTxt1" />
</div>
<input id="w_oCRecommendArtficialButton" type="button" value="RECOMMEND" />
<textarea class="w_oInput3" id="w_oCRecomendTxt2" placeholder="...?"></textarea><br/>
<div class="w_oInput2" id="w_oCThirdField">
<input type="hidden" id="w_oCRecomendTxt3" />
</div>
<input type="text" class="w_oInput2" id="w_oCRecomendTxt3" placeholder="..." /><br/>
<input id="w_oCRecommendButton" type="button" style="margin-left: 239px;" value="RECOMMEND" />
</div>
I am creating an options dashboard for my wordpress theme and I managed to work almost everything but here's the thing: I added a colorpicker and worked super! If you click in the input field, a colorpicker will pop up so you can choose a color (or write the HEX instead) then if you click outside the colorpicker, it disappears.
But if I add a second one, the first input pops the colorpicker and takes the color value to BOTH inputs and after clicking outside the pop it won't disappear. Then if I click on the second input the colorpicker won't pop.
On other scenario, if I click first the second one, the colorpicker will pop but any of the inputs will take the value.
My code is this:
HTML and PHP:
case 'colorpicker':
?>
<div class="options_input options_text color-picker">
<input class="pickcolor" name="<?php echo $value['id']; ?>"
id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>"
value="<?php if ( get_option( $value['id'] ) != "") {
echo stripslashes(get_option( $value['id']) ); } else { echo $value['std']; } ?>" />
<div id="colorpicker"></div>
</div>
<?php
break;
My js:
jQuery(document).ready(function($) {
$('#colorpicker').hide();
$('#colorpicker').farbtastic('.pickcolor');
$('#color').click(function() {
$('#colorpicker').fadeIn();
});
$(document).mousedown(function() {
$('#colorpicker').each(function() {
var display = $(this).css('display');
if ( display == 'block' )
$(this).fadeOut();
});
});
});
jQuery(document).ready(function($) {
$('.pickcolor').click( function(e) {
colorPicker = jQuery(this).next('div');
input = jQuery(this).prev('input');
$(colorPicker).farbtastic(input);
colorPicker.show();
e.preventDefault();
$(document).mousedown( function() {
$(colorPicker).hide();
});
});
});
Can anyone help me tweak the js to make it work with multiple twin fields?
Not sure if this is still relevant or not... But I found this demo on HTMLDrive to do the trick.
Basically, it's already built into the farbtastic plugin... It just needs to be set up correctly, then you simply assign the picker to the required text box on some action.
var farbPicker = $.farbtastic('#colorpicker');
$('.tbColourPicker').each(function ()
{
farbPicker.linkTo(this);
})
$('.showColourPanel').click(function ()
{
var targetObject = input you want to edit;
farbPicker.linkTo(targetObject);
});
The only thing you'll need to watch for is having default colour values in the text boxes before editing with the picker.
Need some trick, but possible.
$('div.colorpicker-component').colorpicker();
var ColorPickedDom = null;
$(document).ready(function () {
// add new
$("body div#colorpicker_wrapper").on('click', 'div.colorpicker-component i.add_new_picker', function() {
var UploadTemplate = $('div#colorpicker_control_template').html();
$('div#colorpicker_wrapper').append(UploadTemplate);
});
// remove clicked
$("body div#colorpicker_wrapper").on('click', 'div.colorpicker-component i.remove_picker', function() {
$(this).parent().closest('div.colorpicker-component').remove();
});
// the trick
$('div#colorpicker_wrapper').on('click', 'div.colorpicker-component span.color_picker_trick', function(e) {
ColorPickedDom = $(this).parent();
$(ColorPickedDom).colorpicker('show');
});
});
span.color_picker_trick {
background-color: rgba(255, 0, 0, 0);
opacity: 0;
position: absolute;
width: 26px;
height: 30px;
cursor: pointer;
}
<div id="colorpicker_control_template" style="display: none">
<div class="input-append color colorpicker-component" data-color="rgba(255,146,180,1)" data-color-format="rgba">
<input type="text" class="input-medium" value="rgba(255,146,180,1)" readonly="">
<span class="color_picker_trick">a</span><span class="add-on"><i style="background-color: rgba(255,146,180,1);"></i></span>
<i class="btn add_new_picker" type="button" title="Add one more colorpicker">Add new</i>
<i class="btn remove_picker" type="button" title="Remove this colorpicker">Remove</i>
</div>
</div>
<div id="colorpicker_wrapper">
<div class="input-append color colorpicker-component" data-color="rgba(255,146,180,1)" data-color-format="rgba">
<input type="text" class="input-medium" value="rgba(255,146,180,1)" readonly="">
<span class="color_picker_trick">a</span><span class="add-on"><i style="background-color: rgba(255,146,180,1);"></i></span>
<i class="btn add_new_picker" type="button" title="Add one more colorpicker">Add new</i>
</div>
</div>
Working demo:
https://codepen.io/cosmiclaca/pen/jOyvRKO
I have a button Resend , and on click of it , the checkboxes get enable against the following:
id="AlertSent"
id="AlertNotSent"
id="AlertInProgress"
Now the DIV Code for Above mentioned DIVS is as below
<div class="span9">
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox1" name="checkbox1"/>
</div>
<div id="AlertSent" class="span12">
<label><spring:message code='alert.sent' />:</label>
</div>
</div>
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox2" name="checkbox2"/>
</div>
<div id="AlertNotSent" class="span12">
<label><spring:message code='alert.not.sent'/>:</label>
</div>
</div>
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox3" name="checkbox3" class="required" />
</div>
<div id="AlertInProgress" class="span12">
<label> <spring:message code='alert.in.progress' />:</label>
</div>
</div>
</div>
The button Code for Resend and Done is
<input type="button" value="button" id="resend"/>
<input type="button" value="button" id="done"/>
The JQuery Code is
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var resendbtn = j$('#resend');
var allChkBox = j$('input[name="enableCheckBox"]');
var verifyChecked = function() {
if ! $('#resend').click {
allChkBox.attr('disabled', 'disabled');
} else {
allChkBox.removeAttr('disabled');
}
};
verifyChecked();
resendbtn.change(verifyChecked);
});
The requirement is on click of Resend, the checkboxes appear against above DIVS (AlertSent, AlertNotSent and AlertInProgress), and the Resend button Becomes Done, and if a User unchecks all the checkboxes then the Done Button becomes Resend again.
How do I write a JQuery/JavaScript code to achieve above?
Please suggest
It's hard to know exactly what you want here, but perhaps this will get you started:
http://jsfiddle.net/ZqH7B/
to handle showing the checkboxes:
$("#resend").on( 'click', function () {
$('.enableCheckBox').css('visibility', 'inherit');
$(this).hide().next().show();
$('input:checkbox').prop('checked', true);
});
to handle uncheck behavior:
$('input[type=checkbox]').on( 'change', function() {
var num = $('input:checked').length;
if ( num == 0 ) { $('#resend').show().next().hide(); }
});
Try following code:
HTML:
<input type="checkbox" class="chk">
<input type="button" value="Resend" class="toggle">
JS:
$(document).ready(function(){
$(".chk").prop("checked","checked");
$(".chk").css('display','none');
$(".toggle").click(function(){
$(".chk").css('display','block');
$(".chk").prop("checked","checked");
$(this).val("Done");
});
$(".chk").change(function(){
var all = $(".chk").length;
var chked = $(".chk").not(":checked").length;
if(all == chked){
$(".chk").css('display','none');
$(".toggle").val("Resend");
}
})
});
JSFIDDLE DEMO