I am using the jQuery library 'iCheck' for inputs and I am trying to set the color of the labels to green for those questions which were good answered. When I don't use iCheck everything works perfectly, but when I use that library, my script seems to have no effect. What am I doing wrong?
HTML document
<div class="radio" >
{% if answer.is_valid == True %}
<input type="radio" name="question-{{ question.id }}" id=" {{answer.text}}">
{% else %}
<input type="radio" name="question-{{ question.id }}" id="{{answer.text}}">
{% endif %}
<label><b>{{ answer.text }}</b></label>
</div>
JS
$('.check').click( function () {
var score = 0
var all = $('input[id^=" "]');
var checked = $('input:checked');
var good = $('input:checked[id^=" "]');
checked.siblings().css('color', 'red');
all.siblings().css('color', 'green');
good.each ( function(){
score += 1;
})
alert(score);
score = 0;
});
That is because icheck changes the DOM in such a way that your original input is not even visible anymore. Check the DOM browser to see that iCheck changed your
<input type="radio" name="question-{{ question.id }}" id=" {{answer.text}}">
To
<div class="iradio_flat-pink" aria-checked="false" aria-disabled="false" style="position: relative;">
<input type="radio" name="question-1" id="text" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;">
</ins>
</div>
Or something similar.
To change the color of the element you need to use the iCheck functions instead and give it a different class:
$('#input1').iCheck({
radioClass: 'radio-green' //or something you like.
});
try this!
$( document ).ready(function () {
if ($("input.flat")[0]) {
$(document).ready(function () {
$('input.flat').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
});
}
});
Related
I hide the default checkbox and use a div with custom checkbox image instead:
<aui:form>
<c:if
test="<%=company.isAutoLogin() && !PropsValues.SESSION_DISABLED%>">
<div class="rememberImage ftr" id="rememberImg">
<aui:input checked="<%=rememberMe%>" name="rememberMe" id="rememberMe"
type="checkbox" cssClass="remember"/>
</div>
</c:if>
</form>
//omiited
<aui:script use="aui-base">
function changeBG() {
if (this.checked) {
document.getElementById('rememberImg').style.backgroundImage = 'url(../img/chk_none.png)';
} else {
document.getElementById('rememberImg').style.backgroundImage = 'url(../img/chk_check.png)';
}
}
document.getElementById('_58_rememberMe').addEventListener('change', changeBG);
var password = A.one('#<portlet:namespace />password');
if (password) {
password.on(
'keypress',
function(event) {
Liferay.Util.showCapsLock(event, '<portlet:namespace />passwordCapsLockSpan');
}
);
}
</aui:script>
This does not work at all. Any suggestions?? Much appreciated!
UPDATE: add more lines of code that I think maybe have problems
I saw a proper answer already above, but to avoid intruding HTML tags with JS listeners, what considered as not the best practice, I will offer you this solution...
function changeBG() {
if (this.checked) {
document.getElementById('myElement').style.backgroundImage = 'url(.....)';
} else {
document.getElementById('myElement').style.backgroundImage = 'url(.....)';
}
}
document.getElementById('myInput').addEventListener('change', changeBG);
Hope it will help you :)
You can do it like this: Add an onclick attribute to the checkbox that triggers a toggle function. As I cant test it with your code (missing the rest) I can only provide you an enxample where the body background gets changed
<input id="check" type="checkbox" onclick="toggle();"> Click me
<script>
function toggle() {
if( document.getElementById("check").checked ) {
document.getElementsByTagName("body")[0].style.backgroundColor="red";
}
}
</script>
div{
margin: 20px 0;
}
input[type=checkbox] {
display: none
}
input[type=checkbox]+label {
background: url(http://s17.postimg.org/phsoii5vf/check.png) no-repeat;
padding-left: 30px;
padding-bottom: 5px;
padding-top: 2.5px;
height: 18px;
}
input[type=checkbox]:checked+label {
background: url(http://s2.postimg.org/zbjg138np/check_tick.jpg) no-repeat;
}
<div>
<input type="checkbox" id="chk1">
<label for="chk1">Custom Checkbox1</label>
</div>
<div>
<input type="checkbox" id="chk2">
<label for="chk2">Custom Checkbox2</label>
</div>
<div>
<input type="checkbox" id="chk3">
<label for="chk3">Custom Checkbox3</label>
</div>
<div>
<input type="checkbox" id="chk4">
<label for="chk4">Custom Checkbox4</label>
</div>
not required javascript.you can do it from css.
<div>
<input type="checkbox" id="chk">
<label for="chk">Custom Checkbox1</label>
</div>
input[type=checkbox] {
display: none
}
input[type=checkbox]+label {
background: url(../images/check.png) no-repeat;
padding-left: 30px;
padding-bottom: 5px;
padding-top: 2.5px;
height: 18px;
}
input[type=checkbox]:checked+label {
background: url(../images/check_tick.png) no-repeat;
}
you can try this one:
document.getElementById('rememberImage').style.background = 'url(../img/chk_check.png)';
function SetBackground(elm){
if($(elm).is(":checked"))
{
$("#rememberImage").css({"background-color":"gray"});
}
else
{
$("#rememberImage").css({"background-color":"white"});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rememberImage ftr" id="rememberImage">
<input checked="<%=rememberMe%>" name="rememberMe" id="rememberMe" type="checkbox" onchange="SetBackground(this)"/>
</div>
I don't know how your custom checkbox works but, you can add onchange event and check if checkbox is checked then change the background of div.
Best regards
My Classic ASP cart page uses divs for a quantity selector within a form:
<form action="/update-cart/" method="post">
<div class="quantity-selector detail-info-entry">
<div class="detail-info-entry-title">Quantity</div>
<div class="entry number-minus"> </div>
<div class="entry number">1</div>
<div class="entry number-plus"> </div>
</div>
</div>
</form>
when - or + is clicked the 1 will update as expected. the code to do this is this:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
});
What is the easiest way to post the content of the div with class "number" above when a form is submitted. Do i use:
<input type="hidden" id="Num" name="Num" value="" />
Or another way. Either way, how can this be done easily as I cannot get the variable "newVal" to populate the hidden field.
Thanks
This demo has 2 features of note.
The following are done with HTML and inline JS (e.g. onchange='...)
<input>s .number-minus and number-plus
<output> .number displays the sum of .number-minus and .number-plus
As requested, the sum of .number-minus and .number-plus is stored in a <input [hidden]> named .secret. This value was derived from <output> value by using jQuery (overkill IMO). `
$(function() {
$('#pos, #neg').on('change', function(event) {
var cnt = $('#counter').val();
$('#secret').val(cnt);
console.log('Secret: ' + secret.value);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript/jquery onChange function for div.text to update form hidden field value</title>
<meta name="description" content="SO33312004">
<style>
.detail-info-entry-title,
#pos,
#neg {
font-variant: small-caps;
}
.entry {
padding: 3px;
margin: 0 5px;
width: 48px;
line-height: 1.6;
border: 2px solid #00E;
border-radius: 8px;
display: table-cell;
}
#counter {
font-weight: 900;
margin: auto;
display: table-cell;
height: 24px;
}
#form33312004 {
color: #0CF;
background: hsla(180, 100%, 10%, 1);
width: 33%;
height: 30%;
text-align: center;
vertical-align: middle;
display: table-row;
}
.field {
width: 50px;
display: table-cell;
}
footer {
font-size: .75em;
text-align: center;
}
</style>
</head>
<!--http://stackoverflow.com/questions/33312004/javascript-jquery-onchange-function-for-div-text-to-update-form-hidden-field-val-->
<body>
<form id="form33312004" submit="return false" oninput="counter.value = parseInt(pos.value, 10) - parseInt(neg.value, 10)">
<fieldset class="quantity-selector detail-info-entry">
<legend class="detail-info-entry-title">Quantity</legend>
<div class="field">
<input type="number" id="pos" min="0" max="999" step="any" value="0" class="entry number-plus">
<label for="pos">Positive</label>
</div>
<output for='pos neg' id="counter" name="counter" class="entry number">0</output>
<div class="field">
<input type="number" id="neg" min="0" max="999" step="any" value="0" class="entry number-minus">
<label for="neg">Negative</label>
</div>
</fieldset>
<input id="secret" type="hidden">
</form>
<div class="field">
<footer>Observe the hidden input's value thru
<br/>the console. (<b>F12</b> then the <b>Console</b> tab).</footer>
<script sr="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</body>
</html>
With pure JS:
document.getElementById("Num").value = < variable name >
With jQuery(not 100% sure)
$("Num").value(< variable name>)
So I solved the problem myself.
I added the following line:
$("#Num").val(newVal);
To both the jquery functions for the + and - divs as follows:
$('.number-plus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)+1;
divUpd.text(newVal);
$("#Num").val(newVal);
});
$('.number-minus').on('click', function(){
var divUpd = $(this).parent().find('.number'), newVal = parseInt(divUpd.text(), 10)-1;
if(newVal>=1) divUpd.text(newVal);
$("#Num").val(newVal);
});
I am sure I had tried this but after thought I may have omitted the $ at the beginning. Always something simple in the end
I have a search filter that will toggle all the filters on if selected. My problem is, if you deselect all or one of the filters, the all button still stays on. How can I make it so if a filter or all the filters are deselected, the all button will automatically deslect itself.
function togglecheckboxes(master,group){
var cbarray = document.getElementsByClassName(group);
for(var i = 0; i < cbarray.length; i++){
var cb = document.getElementById(cbarray[i].id);
cb.checked = master.checked;
}
}
#search_attributes {
display: table-cell;
vertical-align: middle;
text-align: center;
padding-top: 5.5em;
padding-left: 1em;
}
input[type=checkbox] {
display:none;
}
input[type=checkbox] + label {
background: none;
height: 50px;
width: 72px;
display:inline-block;
cursor: pointer;
padding: 0 0 0 0px;
filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
-moz-filter: grayscale(1);
-webkit-filter: grayscale(1);
}
input[type=checkbox]:checked + label {
background: none;
height: 50px;
width: 72px;
display:inline-block;
cursor: pointer;
padding: 0 0 0 0px;
filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);
-moz-filter: grayscale(0);
-webkit-filter: grayscale(0);
-o-transition:.1s;
-ms-transition:.1s;
-moz-transition:.1s;
-webkit-transition:.1s;
}
<div id="search_attributes">
<section>
<input type="checkbox" id="cb1_1" class="cbgroup1" name="cbg1[]" value="1">
<label for="cb1_1">
<img src="images/oneshot_selector.png" />
</label>
<input type="checkbox" id="cb1_2" class="cbgroup1" name="cbg1[]" value="2">
<label for="cb1_2">
<img src="images/loop_selector.png" />
</label>
</section>
<section>
<input type="checkbox" id="cbgroup1_master" onchange="togglecheckboxes(this,'cbgroup1')">
<label class="all" for="cbgroup1_master">
<img src="images/all_selector.png" />
</label>
</section>
<section>
<input type="checkbox" id="cb1_3" class="cbgroup1" name="cbg1[]" value="3">
<label for="cb1_3">
<img src="images/sfx_selector.png" />
</label>
<input type="checkbox" id="cb1_4" class="cbgroup1" name="cbg1[]" value="4">
<label for="cb1_4">
<img src="images/music_selector.png" />
</label>
</section>
</div>
Simple! Your goal is to change the master based on the following...
if a checkbox is unchecked, make sure the master is unchecked too
otherwise, make sure that all checkboxes are checked before the master is checked
Translated to jQuery:
$(".cbgroup1").on("change", function () {
var $checkbox = $(this),
$checkboxes = $("#search_attributes").find(".cbgroup1"),
$master = $("#cbgroup1_master");
if (!$checkbox.is(":checked")) {
$master.prop("checked", false);
} else {
if ($checkboxes.length === $checkboxes.filter(":checked").length) {
$master.prop("checked", true);
}
}
});
JSFiddle: http://jsfiddle.net/6rc9p0qm/
Done!
I don't really see any jquery here, but since you have the tag, I shall use it!
First, we can slightly alter the html:
<input type="checkbox" id="cbgroup1_master" data-group="cbgroup1">
Then we can move the binding into the javascript (btw, i'm not proposing you put your function definition in the ready function, but just keeping the code together):
$(document).ready(function() {
function togglecheckboxes() {
var $this = $(this);
$('.'+ $this.data('group')).prop('checked', $this.is(':checked'));
}
$('#cbgroup1_master').on('change', togglecheckboxes);
});
That will set the checked status of the associated group to match the parent. Now for the children to undo the parent. We can slightly change their structure to help too:
<input type="checkbox" id="cb1_1" class="cbgroup" name="cbg1[]" value="1" data-group="1">
Then in the ready function we can bind to them with the shared class.
$('.cbgroup').on('change', function() {
var $this = $(this);
if (!$this.is(':checked')) {
$('#cbgroup'+ $this.data('group') +'_master').prop('checked', false);
}
});
This, in the case that a cbgroup changes, it will change its parent to unchecked (if it was originally checked), based on the data-group to know which parent to go to.
Since you did not have any jquery in your example, just to make sure you are informed, I'll include the following. If this is a "duh" to you, I'm sorry, :).
With jquery, in a selector (ex. $('selector') ), using $('.string') will find all elements where 'string' is a class of theirs. Using $('#string') will find the element where 'string' is the id.
I'm trying to call a function when a radio button is clicked but it's not working. I have this fiddle doing basically just what I want it to do, but it's not working in my code.
In the view..
<script>
$(document).ready(function () {
$(".radioGroup").click(function () {
alert("radio clicked");
});
$(".buttonGroup").click(function () {
alert("button clicked");
});
});
</script>
#* bunch of html *#
#* bunch of html *#
<div id="medicalRadioGroup" class="check-list clear">
<ul>
<li style="display:inline;">
#Html.RadioButtonFor(model => model.MedicalSeverity, "none", new { #id = "MedicalSeverity_None", #name = "radioGroup", #class="radioGroup", #checked = "checked" })
<label for="MedicalSeverity_None"><span>None</span></label>
</li>
<li style="display:inline;">
#Html.RadioButtonFor(model => model.MedicalSeverity, "minor", new { #id = "MedicalSeverity_Minor", #name = "radioGroup", #class = "radioGroup"})
<label for="MedicalSeverity_Minor"><span>Minor</span></label>
</li>
<li style="display:inline;">
#Html.RadioButtonFor(model => model.MedicalSeverity, "major", new { #id = "MedicalSeverity_Major", #name = "radioGroup", #class = "radioGroup"})
<label for="MedicalSeverity_Major"><span>Major</span></label>
</li>
</ul>
</div>
<div>
<button class="buttonGroup">Click me</button>
</div>
Which renders into...
<div id="medicalRadioGroup" class="check-list clear">
<ul>
<li style="display:inline;">
<div class="iradio_square-aero checked">
<input checked="checked" class="radioGroup" data-val="true" data-val-length="The field Medical Severity must be a string with a maximum length of 10." data-val-length-max="10" data-val-required="*" id="MedicalSeverity_None" name="MedicalSeverity" type="radio" value="none" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; cursor: pointer; background: rgb(255, 255, 255);"></ins>
</div>
<label for="MedicalSeverity_None">
<span>None</span>
</label>
</li>
<li>etc</li>
<li>etc</li>
</ul>
</div>
So here, if the button is clicked, the function fires the alert. If a radio button is clicked, nothing happens. In summary, what works in the fiddle doesn't seem to be working here. Thoughts? I also tried to use .change() to get the radio button event (this would also be an acceptable solution), but that didn't work either. Something to do with Razor maybe?
The hint here is in the rendered HTML tag...
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; border: 0px; opacity: 0; cursor: pointer; background: rgb(255, 255, 255);"></ins>
The inputs are being managed by the iCheck plugin, which catches the 'click' event and stops propagation. To get this event, use the iCheck methods provided. As per the API:
$(document).ready(function() {
$('.radioGroup input').on('ifClicked', function() {
alert('Radio clicked');
});
});
Please try the following instead;
$(document).on('click', '.radioGroup', function() {
alert('Radio Clicked');
});
You can try 'change' instead of click. I believe the reason it simply does not work with your project is because you are simply rendering the buttons dynamically so the dom element does not occur at first. So there are 2 possible solutions, something that will listen to the dom elements at all times or you can include the in the rendering block. Also, if your script is in the top of your _Layout.html then move it to bottom as that could help too.
i want to slide a div when user click on support button from right to left.i have tried the following code.. but its not working correctly for me...
<script type="text/javascript">
$(document).ready(function () {
$('[id$=aSupport]').live('click', function (e) {
if ($('[id$=hdfsupportcount]').val() == 1) {
$('[id$=hdfsupportcount]').val(0);
$('[id$=divSupport]').css({ 'right': '' }).animate({
'left': '0px'
});
// $('[id$=divSupport]').css('display', 'none');
} else {
$('[id$=hdfsupportcount]').val(1);
$('[id$=divSupport]').css({ 'right': '0px', 'left': '' }).animate({
'right': '30px'
});
$('[id$=divSupport]').css('display', 'block');
}
});
});
</script>
Html code is:
<div>
<asp:HiddenField ID="hdfsupportcount" runat="server" />
<div style="float: right; position: fixed; top: 35%; right: -3px;">
<a href="javascript:void(0);" class="signin" title="Support" id="aSupport">
<img src="support_button2.png" /></a>
</div>
<div id="divSupport" style="height: 500px; width: 270px; float: right; position: fixed;
top: 35%; right: 21px; display: none;">
<div id="ContactMenu">
<div id="topnav" class="topnav">
</div>
<div id="signin_menu">
<div id="signin">
<div style="width: 100%; font-weight: bold; font-size: 22px; color: Black;">
<div style="width: 27px; float: left">
</div>
<div style="float: left; margin-top: 1px">
123-456-7890</div>
</div>
<br clear="all" />
<br />
<p>
<label style="font-weight: bold; color: Black">
Contact Us</label>
</p>
<p>
<label>
Email</label>
<asp:TextBox ID="txtContactEmail" runat="server"></asp:TextBox>
</p>
<p>
<label>
Message</label>
<asp:TextBox ID="txtMessage" TextMode="MultiLine" runat="server"></asp:TextBox>
</p>
<asp:Button ID="btnContactUs" CssClass="signin_submit" runat="server" Text="Send"
ValidationGroup="ContactUS" OnClick="btnContactUs_Click" />
<asp:Button ID="btnContactUsCancel" CssClass="signin_submit" runat="server" Text="Cancel"
OnClick="btnContactUsCancel_Click" />
</div>
</div>
</div>
</div>
</div>
When we click on buttons first time.the div slides to left but when i click on button again i want to slide it to right and div will be hide. ...please help me...
I would handle it like this.
$(function(){
$(document).on('click', '[id$=aSupport]', function (e) {
var dist = 0,
count = $('[id$=hdfsupportcount]'),
support = $('[id$=divSupport]');
switch(count.val()){
case '0':
count.val(1);
dist = 30;
break;
case '1':
count.val(0);
dist = -300;
break;
}
support.stop().animate({
right: dist
}, 500);
});
});
Also, remove display:none; from <div id="divSupport"> and give it a right:-270px; so it appears off the page. It's already hidden from sliding in, so no reason to be display:none;. here's a working jsFiddle showing an example.
I have added the following code and its worked for me.. but still i want if it possible to slide.. like fade in ,fade out..
My working code is:
<script type="text/javascript">
$(document).ready(function () {
$('[id$=aSupport]').live('click', function (e) {
if ($('[id$=hdfsupportcount]').val() == 1) {
$('[id$=hdfsupportcount]').val(0);
$('[id$=divSupport]').css({ 'right': '-27%' }).animate({
'right': '-27%'
});
// $('[id$=divSupport]').css('display', 'none');
} else {
$('[id$=hdfsupportcount]').val(1);
$('[id$=divSupport]').css({ 'right': '0px', 'left': '' }).animate({
'right': '30px'
});
$('[id$=divSupport]').css('display', 'block');
}
});
});
</script>
To move the div relative to where it currently is, set the 'marginLeft' property to a value += or -= the amount to move it by. The above examples effectively work like this:
$('#example').animate({
'marginLeft' : "+=50px"
});
and
$('#example').animate({
'marginLeft' : "-=50px"
});
Here's the full code for the example above which actually calls a function to animate the div.
<script language="javascript">
function example_animate(px) {
$('#example').animate({
'marginLeft' : px
});
}
</script>
<input type="button" value="Move Left" onclick="example_animate('-=50px')" />
<input type="button" value="Move Right" onclick="example_animate('+=50px')" />
<div id="example" style="border: 1px solid black; margin: 10px 0px; padding: 10px; background-color: rgb(238, 238, 238); width: 200px; text-align: center;">This is going to move</div>
For more things to do with jquery Click here.