Question

I have following form example: LIVE DEMO

It is running on jNice(full script): uncompressed versiuon

In the project I’m currently working on – I need it’s functionality only on part of it – on other parts is no use.

Script is called by adding ‘class=”jNIce” to the form element.

I’m looking for:

• either changing its ‘start point’ to div element(not form)
• or a way to stop executing on some parts of it

Any suggestions where could I start? Any help much appreciated.

Pete

Answer 1

After checking out this plugins, I found that this plugin has easy explanations in its sourcecode. So I tested it for a couple minutes and found the answer for your questions.

First, you wanna change its start point from <form> to <div> or something else. Open the jNIce plugin code (.js) and scroll to the end of file then change this line:

/* Automatically apply to any forms with class jNice */
$(function(){$('form.jNice').jNice(); });

to:

/* Automatically apply to any forms with class jNice */
$(function(){$('div.jNice').jNice(); });

And in body of html just remove place class="jNice" in <div> which has form elements(input,select,button,etc..) in itself. The Plugin will automatic change them to its style.

Second,you said that you wanna stop some parts of from executing their changes. Go to line 27 in jNice plugin then you’ll see that:

$('input:submit, input:reset, input:button', this).each(ButtonAdd);
$('button').focus(function(){ $(this).addClass('jNiceFocus')}).blur(function(){ $(this).removeClass('jNiceFocus')});
$('input:text:visible, input:password', this).each(TextAdd);
/* If this is safari we need to add an extra class */
if (safari){$('.jNiceInputWrapper').each(function(){$(this).addClass('jNiceSafari').find('input').css('width', $(this).width()+11);});}
$('input:checkbox', this).each(CheckAdd);
$('input:radio', this).each(RadioAdd);
$('select', this).each(function(index){ SelectAdd(this, index); });

If you want jNice stop changing form elements which you don’t like, just put the comment \\ or delete its line. For example, I don’t want its select box style, I put the comment on:

\\$('select', this).each(function(index){ SelectAdd(this, index); });

Hope you found this useful 🙂