Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: JQuery - JNice

  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts

    JQuery - JNice

    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:

    Code:
    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.

    Code:
    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('change');
    				}
    				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');}
    	};

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Found the solution. Just to add the click trigger to the handler. See addition of $input.trigger('click'); to lines 9 and 15.

    Code:
    	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');}
    	};


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •