...

View Full Version : JQuery - JNice



htcilt
08-17-2010, 09:42 AM
Hi,

I'm using JNice to style my form elements:
http://plugins.jquery.com/project/jNice

Demo:
http://www.whitespace-creative.com/jquery/jNice/

I've run into a problem. For checkboxes, the click event is not fired when the user clicks on the jNice replacement gif. This means the onclick() function I have on the checkbox is not carried out, though it is if the label is clicked on rather than the gif.

In the js code, the lines hadling checkboxes are 78-102:


var CheckAdd = function(){
var $input = $(this).addClass('jNiceHidden').wrap('<span class="jNiceWrapper"></span>');
var $wrapper = $input.parent().append('<span class="jNiceCheckbox"></span>');
/* Click Handler */
var $a = $wrapper.find('.jNiceCheckbox').click(function(){
var $a = $(this);
var input = $a.siblings('input')[0];
if (input.checked===true){
input.checked = false;
$a.removeClass('jNiceChecked');
}
else {
input.checked = true;
$a.addClass('jNiceChecked');
}
return false;
});
$input.click(function(){
if(this.checked){ $a.addClass('jNiceChecked'); }
else { $a.removeClass('jNiceChecked'); }
}).focus(function(){ $a.addClass('jNiceFocus'); }).blur(function(){ $a.removeClass('jNiceFocus'); });

/* set the default state */
if (this.checked){$('.jNiceCheckbox', $wrapper).addClass('jNiceChecked');}
};

Can anyone help me insert the click event? I tried adding .siblings('input').attr('checked',true).trigger('click').trigger('change') to lines 10 and 14 which works for the initial click (onclick() function is fired) but it fails when unticking the checkbox.


var CheckAdd = function(){
var $input = $(this).addClass('jNiceHidden').wrap('<span class="jNiceWrapper"></span>');
var $wrapper = $input.parent().append('<span class="jNiceCheckbox"></span>');
/* Click Handler */
var $a = $wrapper.find('.jNiceCheckbox').click(function(){
var $a = $(this);
var input = $a.siblings('input')[0];
if (input.checked===true){
input.checked = false;
$a.removeClass('jNiceChecked').siblings('input').attr('checked',false).trigger('click').trigger('cha nge');
}
else {
input.checked = true;
$a.addClass('jNiceChecked').siblings('input').attr('checked',true).trigger('click').trigger('change' );
}
return false;
});
$input.click(function(){
if(this.checked){ $a.addClass('jNiceChecked'); }
else { $a.removeClass('jNiceChecked'); }
}).focus(function(){ $a.addClass('jNiceFocus'); }).blur(function(){ $a.removeClass('jNiceFocus'); });

/* set the default state */
if (this.checked){$('.jNiceCheckbox', $wrapper).addClass('jNiceChecked');}
};

htcilt
08-18-2010, 03:42 PM
Found the solution. Just to add the click trigger to the handler. See addition of $input.trigger('click'); to lines 9 and 15.


var CheckAdd = function(){
var $input = $(this).addClass('jNiceHidden').wrap('<span class="jNiceWrapper"></span>');
var $wrapper = $input.parent().append('<span class="jNiceCheckbox"></span>');
/* Click Handler */
var $a = $wrapper.find('.jNiceCheckbox').click(function(){
var $a = $(this);
var input = $a.siblings('input')[0];
if (input.checked===true){
$input.trigger('click');
input.checked = false;
$a.removeClass('jNiceChecked');

}
else {
$input.trigger('click');
input.checked = true;
$a.addClass('jNiceChecked');
}
return false;
});
$input.click(function(){
if(this.checked){ $a.addClass('jNiceChecked'); }
else { $a.removeClass('jNiceChecked'); }
}).focus(function(){ $a.addClass('jNiceFocus'); }).blur(function(){ $a.removeClass('jNiceFocus'); });

/* set the default state */
if (this.checked){$('.jNiceCheckbox', $wrapper).addClass('jNiceChecked');}
};



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum