Here's the, stripped down, code:
$(document).ready(function()
{
var $input = $('input[type="checkbox"]');
$input.wrap('<div class="stylecheck-container" style="display: inline" />').addClass('stylecheck').hide();
$container = $input.parent('div.stylecheck-container');
if ($container.parent('label').length > 0)
{
$container.append($container.parent('label').text() + ' ');
$container.parent('label').replaceWith($container);
}
$input.change(function()
{
alert(1);
});
$container.click(function()
{
if ($input.is(':checkbox'))
{
if ($input.is(':checked'))
$input.attr('checked', true);
else
$input.attr('checked', false);
}
});
});
The problem I'm having is that when I try and remove the parent label, the change no longer gets detected.
If I comment out the line 6 if statement, it works fine.
What's the deal?
Worth a shot but have you tried replacing $input.attr('checked', false); with $input.removeAttr('checked'); ? Because you're still setting it.
Though I'm very sleepy so I haven't properly parsed all the code, but I see this little thing.. off to sleep.
Related
I am trying to trigger the unchecked checkbox, so I tried lot with help of Google, still I can't find a solution,
Attempt 1:
jQuery(".checkbox").attr("checked", false).trigger("click");
When using attempt 1, no changes in my OP,
Attempt 2:
jQuery(".checkbox:checkbox").each(function() {
var code = jQuery(this).val();
var all_list = jQuery("#all_listings").val().split(",");
if (jQuery.inArray(code,all_list) >= 0) {
return false;
}
else {
jQuery(this).trigger("click");
}
});
using attempt 2 returns a error too much recursion
So how to avoid this error? or how to trigger the unchecked checkbox?
Thanks!
Solved:
problem solved with help of #praveen kumar and attempt 2 I changed the if else, now too much recursion solved.
jQuery(".checkbox:checkbox").each(function() {
var code = jQuery(this).val();
var all_list = jQuery("#all_listings").val().split(",");
if(jQuery.inArray(code,all_list) == -1){
jQuery(this).trigger("click");
}
}
You can completely change your Second Attempt to this way:
jQuery(".checkbox:checkbox:not(:checked)").trigger("click");
Hope this helps!
You need to use this way:
jQuery(".checkbox").filter(function () {
return (jQuery(this).prop("checked") == false);
}).trigger("click");
Or you can use:
jQuery(".checkbox").filter(function () {
return (this.checked == false);
}).trigger("click");
Or much simpler:
$('.checkbox:not(:checked)').trigger("click");
I've been working on this jQuery effect heres the fiddle:
http://jsfiddle.net/abtPH/26/
Everything's pretty good so far, however when I click on the elements too fast it seems to get buggy and get weird behavior. If you take your time and click on the elements it works fine.
I've tried using :animate
stuff to make sure the animation ends before the user can click on the next one. I do not like this approach though because from a end user it seems like the effects are laggy. I want the user to be able to click on the elements fast and have the desired effect.
Here's my jQuery so far:
$('li').on('click', function (e) {
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').fadeIn('medium', function () {
active.toggleClass('active', 400).find('.outer').fadeOut('medium');
});
} else {
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
}
} else {
$(this).find('.outer').slideToggle();
}
$(this).toggleClass('active', 400);
});
$('.outer').on('click', function (e) {
return false;
});
Use .finish() complete all the queued animation before beginning a new one
$('li').on('click', function(e){
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').finish().fadeIn('medium', function(){
active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium');
});
} else {
$(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle();
$(this).find('.outer').finish().slideToggle();
}
} else {
$(this).find('.outer').finish().slideToggle();
}
$(this).finish().toggleClass('active', 400);
});
$('.outer').on('click', function(e){
return false;
});
Demo: Fiddle
I have a selected box with 5 values. I'm trying to fadeIn inputs of what is selected in the box. For example: If input1 is selected, fade in input1 on click.
Here is what I'm trying to do:
$(document).ready(function(){
$('.btn').click(function() {
if($("#selectbox").value == 'Input1') {
$(".input1").show();
} else if($("#selectbox").value == 'Input2') {
$(".input2").show();
} else if($("#selectbox").value == 'Input3') {
$(".input3").show();
} else if($("#selectbox").value == 'Input4') {
$(".input4").show();
} else if($("#selectbox").value == 'Input5') {
$(".input5").show();
}
}
});
And here is a NOT working fiddle:
http://jsfiddle.net/rzMHJ/
Your code have two errors and that's why its not working.
$("#selectbox").value should be $("#selectbox").val()
you have not closed your click event with );
Also its much better to use switch case in this example.
Working Demo: http://jsfiddle.net/naveen/Zn2yy/
Update (based on Nick Cravers comment)
For this particular scenario you could simplify code a lot like this.
Demo: http://jsfiddle.net/nick_craver/BWacA/
There are two problems with your code that is causing it to fail.
First, replace .value with the jQuery function val().
Second, add ); to the second to last } at the end.
Here is working refactored code:
$(document).ready(function() {
$('.btn').click(function() {
var show = "." + $("#selectbox").val().toLowerCase();
$(show).fadeIn();
});
});
I am trying to debug this (incomplete) script, but it is behaving inconsistently. The main problem is when I click off of an item, sometimes the $(editObj).removeAttr('style'); runs and sometimes not. Through the Chrome inspector I can see that the editObj variable in each case is properly defined, but it isn't always getting its inline style attribute removed. Sometimes, and sometimes not. Cannot determine the reason.
I'm a bit out of my element with this code. Maybe something about it is obvious; Regardless I'd appreciate some ideas on why this sort of unpredictable might be occuring!
var editObj = null;
var inputType = 'text';
var input = '#textEdit';
var formId = '#form_undefined'
$(function() {
$("#textEdit").click(function(event) {
event.stopPropagation();
});
$('body').click(function(event) {
if (editObj){
//textedit contents to editobj and
if (inputType == 'text'){
$(editObj).text($("#textEdit").val());
}
$("#textEdit").removeAttr('style').hide();
$(editObj).removeAttr('style');
var previewId = $(editObj).attr('id');
var formId = previewId.replace('bzm', 'form');
$("#" + formId).val($("#textEdit").val());
//ajax modify database
editObj = null;
}
});
$(".editable").not("video, img, textarea")
.click(function(event) {
event.stopPropagation();
loadEditor($(this));
});
});
function loadEditor(element){
$("#textEdit")
.copyCSS(element)
.offset($(element).offset())
.css("display", "block")
.val($(element).text())
.select();
$(element).css("color", "transparent");
editObj = element;
}
I've had trouble in the past with .removeAttr('style'); not actually removing all the inline styles.
Use
$(editObj).attr('style', '');
instead of
$(editObj).removeAttr('style');
I dint see any code that initializes e editobj variable.. May be Im missing Anthony.. Anyways what are the chances of the edit obj being null.. Just put a log statement in the click function to always log ur editobj and see if it is null smtimes
This is driving me crazy - basically this if statement is not working. The code keeps jumping into the else statement, I have hovered over the buttonText and everything seems alrite until it hits the conditions.
function DesignCodeViewClick(el) {
$("div.divdesigncodeviewbuttonsselected").attr("class", "divdesigncodeviewbuttons");
$(el).attr("class", "divdesigncodeviewbuttonsselected");
var buttonText = el.innerText;
if (buttonText.toLowerCase() == "design") {
$("#iframecms").css("display", "none");
$("textarea.divhtmleditor").css("display", "none");
}
else if (buttonText.toLowerCase() == "browse") {
$("#iframecms").css("display", "block");
$("textarea.divhtmleditor").css("display", "none");
}
else {
$("textarea.divhtmleditor").css("display", "block");
$("#iframecms").css("display", "none");
WebForm_DoCallback('SEOCMSControl1', 'getcode~http://www.triksportfolio.com', GetCodeServerResponse, null, null, true);
}
}
textContent is the standard property. innerText is a Internet Explorer thing I believe. They are almost the same, but not quite.
If you did want to do it that way, I'd suggest this...
var text;
if ('textContent' in el) {
text = el.textContent;
} else {
text = el.innerText;
}
But, you are using jQuery, however, so just use text() method.
To ensure there is no leading or trailing whitespace, you can use jQuery's trim() utility function.
In addition, you are doing a few things jQuery can help you with. Look at addClass() and hide().