By charlie_ on

Greetings,
I am desperately trying to make use of the cool nicejforms plugin. But I'm stumped as to how to get the needed classes/id's into all the Drupal forms. Would anyone knowledgeable about this type of thing please share
an example to help me get a handle on this please? I would greatly appreciate it. :)

Thank you very much in advance.

--Charlie

P.S. There is a demo here, here, and here. If that helps.

Thanks again.

⋅ Categories: Drupal 5.x

Comments

nevets’s picture

nevets commented

You will as far as I can tell need three things

  1. Override the theme function theme_form() so the class niceform to all forms (this assumes you want to apply it to all forms
  2. Code to add the appropriate css file
  3. Code to add the javascript that invokes the plugin once the document is ready

You may need the jQuery update module (you may need the dev version) depending on the which version of jQuery the module needs.

charlie_’s picture

charlie_ commented

@nevets

Thank you very much for taking the time to reply. :)

1. Override the theme function theme_form() so the class niceform to all forms (this assumes you want to apply it to all forms

Yes, that is my hope. I want it applied to all the Drupal/Theme rendered form items.
I also added the jquery_interface module.
But wasn't able to figure out where/how to load it according to the directions. The doc's indicate that
the plugin needs to make a call for it. However, there is no such call made in the nicejforms-interface.js
file that comes in nicejforms-interface.zip. The demo
that is included in the zip archive
simply called interface.js (also included in the archive). So I elected to use it instead.

2. Code to add the appropriate css file

Yes. I already added the declarations in the Themes .css file.

3. Code to add the javascript that invokes the plugin once the document is ready

Yes. I've done that also. I have confirmed that the template's page.tpl.php file loads all the required
javascript, and css.
Now, if I could only figure out how to make a form_mod. I think
that that is all I have left to accomplish. I've read, and re-read the form modification
API documentation. But can't quite wrap my mind around it. I'm probably making it
harder that it really is. But until I can do it once successfully, I just can't seem to get
it. :(

If I could finally figure it out. I'd love to create a Module. As once I am able
to figure out how to get this far, all the rest will make sense. :)

Thank you again for taking the time to reply!

Here's hoping for a little example - hint, hint :)

Take care.

--Charlie

OH! I almost forgot to mention; Yes I have a recent enough jQuery (1.23).
So that won't be an issue.

Best wishes.

nevets’s picture

nevets commented

What sort of form mod do you want to make?

charlie_’s picture

charlie_ commented

Hello again, and thanks for the reply. :)

OK I've figured out that I can add:

 
$(document).ready(function() {
  $('#search-theme-form').alter_search();

to the top of nicejforms-interface.js to hook the search form. I suppose I'd need to make
more modifications. But this much is correct, right?

In answer to your question (and my goal); I'd like to find a more generic hook
that permits altering the forms globally. Is this possible? If so, how?
Is it enough to simply use: 

 
$(document).ready(function() {
  $('#theme-form').alter_form();

? Or am I dreaming. It just seems that it would be so much easier this way.
If I was able to grab all form elements as in CSS/DOM via form. Then
all the styling already declared in the nicejforms-interface.js could take care of all
the individual elements.

Not sure if this will work. But I'm going to try to post the contents of nicejforms-interface.js
so you can get an idea of what I'm working with. Here goes...

 
/**
 * @name NiceJForms
 * @description This a jQuery equivalent for Niceforms1.
 * All the forms are styled with beautiful images as backgrounds and stuff. Enjoy them!
 * @param Hash hash A hash of parameters
 * @option Integer border border width
 * @option String loaderSRC path to loading image
 * @option String closeHTML path to close overlay image
 * @option Float overlayOpacity opacity for overlay
 * @option String textImage when a galalry it is build then the iteration is displayed
 * @option String textImageFrom when a galalry it is build then the iteration is displayed
 * @option Integer fadeDuration fade duration in miliseconds
 *
 * @type jQuery
 * @cat Plugins/Interface/Forms
 * @author Lucian Lature
 */

jQuery.preloadImages = function()
{
	var imgs = new Array();
	for(var i = 0; i<arguments.length; i++)
	{
		imgs[i] = jQuery("<img>").attr("src", arguments[i]);
	}
	
	return imgs;
}

jQuery.NiceJForms = {
	options : {
		selectRightSideWidth     : 21,
		selectLeftSideWidth      : 8,
		selectAreaHeight 	     : 21,
		selectAreaOptionsOverlap : 2,
		imagesPath               : "/dcms/images/"
		// other options here
	},
	
	selectText     : 'please select',
	preloads       : new Array(),
	inputs         : new Array(),
	labels         : new Array(),
	textareas      : new Array(),
	selects        : new Array(),
	radios         : new Array(),
	checkboxes     : new Array(),
	texts          : new Array(),
	buttons        : new Array(),
	radioLabels    : new Array(),
	checkboxLabels : new Array(),
	hasImages      : true,
	
	keyPressed : function(event)
	{
		var pressedKey = event.charCode || event.keyCode || -1;
		
		switch (pressedKey)
		{
			case 40: //down
			var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");
			var linkNo = 0;
			for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}}
			++linkNo;
			if(linkNo >= selects[fieldId].options.length) {linkNo = 0;}
			selectMe(selects[fieldId].id, linkNo, fieldId);
			break;
		
		case 38: //up
			var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");
			var linkNo = 0;
			for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}}
			--linkNo;
			if(linkNo < 0) {linkNo = selects[fieldId].options.length - 1;}
			selectMe(selects[fieldId].id, linkNo, fieldId);
			break;
		default:
			break;
		}
	},
	
	build : function(options)
	{
		if (options)
			jQuery.extend(jQuery.NiceJForms.options, options);	
			
		if (window.event) {
			jQuery('body',document).bind('keyup', jQuery.NiceJForms.keyPressed);
		} else {
			jQuery(document).bind('keyup', jQuery.NiceJForms.keyPressed);
		}
			
		// test if images are disabled or not
		var testImg = document.createElement('img');
		$(testImg).attr("src", jQuery.NiceJForms.options.imagesPath + "blank.gif");
		jQuery('body').append(testImg);

		if(testImg.complete)
		{
			if(testImg.offsetWidth == '1') {jQuery.NiceJForms.hasImages = true;}
			else {jQuery.NiceJForms.hasImages = false;}
		}

		$(testImg).remove();
			
		if(jQuery.NiceJForms.hasImages)
		{
			$('form.niceform').each( function()
				{
					el 				= jQuery(this);
					jQuery.NiceJForms.preloadImages();
					jQuery.NiceJForms.getElements(el);
					jQuery.NiceJForms.replaceRadios();
					jQuery.NiceJForms.replaceCheckboxes();
					jQuery.NiceJForms.replaceSelects();
					
					if (!$.browser.safari) {
						jQuery.NiceJForms.replaceTexts();
						jQuery.NiceJForms.replaceTextareas();
						jQuery.NiceJForms.buttonHovers();
					}
				}
			);
		}	
	},
	
	preloadImages: function()
	{
		jQuery.NiceJForms.preloads = $.preloadImages(jQuery.NiceJForms.options.imagesPath + "button_left_xon.gif", jQuery.NiceJForms.options.imagesPath + "button_right_xon.gif", 
		jQuery.NiceJForms.options.imagesPath + "input_left_xon.gif", jQuery.NiceJForms.options.imagesPath + "input_right_xon.gif",
		jQuery.NiceJForms.options.imagesPath + "txtarea_bl_xon.gif", jQuery.NiceJForms.options.imagesPath + "txtarea_br_xon.gif", 
		jQuery.NiceJForms.options.imagesPath + "txtarea_cntr_xon.gif", jQuery.NiceJForms.options.imagesPath + "txtarea_l_xon.gif", jQuery.NiceJForms.options.imagesPath + "txtarea_tl_xon.gif", jQuery.NiceJForms.options.imagesPath + "txtarea_tr_xon.gif");
	},
	
	getElements: function(elm)
	{
		el = elm ? jQuery(elm) : jQuery(this);
		
		var r = 0; var c = 0; var t = 0; var rl = 0; var cl = 0; var tl = 0; var b = 0;
		//check this out
		
		jQuery.NiceJForms.inputs = $('input', el);
		jQuery.NiceJForms.labels = $('label', el);
		jQuery.NiceJForms.textareas = $('textarea', el);
		jQuery.NiceJForms.selects = $('select', el);
		jQuery.NiceJForms.radios = $('input[@type=radio]', el);
		jQuery.NiceJForms.checkboxes = $('input[@type=checkbox]', el);
		jQuery.NiceJForms.texts = $('input[@type=text]', el).add($('input[@type=password]', el));		
		jQuery.NiceJForms.buttons = $('input[@type=submit]', el).add($('input[@type=button]', el));
		
		jQuery.NiceJForms.labels.each(function(i){
			labelFor = $(jQuery.NiceJForms.labels[i]).attr("for");
			jQuery.NiceJForms.radios.each(function(q){
				if(labelFor == $(jQuery.NiceJForms.radios[q]).attr("id"))
				{
					if(jQuery.NiceJForms.radios[q].checked)
					{
						$(jQuery.NiceJForms.labels[i]).removeClass().addClass("chosen");	
					}
					
					jQuery.NiceJForms.radioLabels[rl] = jQuery.NiceJForms.labels[i];
					++rl;
				}
			})
			
			jQuery.NiceJForms.checkboxes.each(function(x){
				
				if(labelFor == $(this).attr("id"))
				{
					if(this.checked)
					{
						$(jQuery.NiceJForms.labels[i]).removeClass().addClass("chosen");	
					}
					jQuery.NiceJForms.checkboxLabels[cl] = jQuery.NiceJForms.labels[i];
					++cl;
				}
			})
		});
	},
	
	replaceRadios: function()
	{
		var self = this;
		
		jQuery.NiceJForms.radios.each(function(q){
		
			//alert(q);
			$(this).removeClass().addClass('outtaHere'); //.hide(); //.className = "outtaHere";
			
			var radioArea = document.createElement('div');
			//console.info($(radioArea));
			if(this.checked) {$(radioArea).removeClass().addClass("radioAreaChecked");} else {$(radioArea).removeClass().addClass("radioArea");};
			
			radioPos = jQuery.iUtil.getPosition(this);
			
			jQuery(radioArea)
				.attr({id: 'myRadio'+q})
				.css({left: radioPos.x + 'px', top: radioPos.y + 'px', margin : '1px'})
				.bind('click', {who: q}, function(e){self.rechangeRadios(e)})
				.insertBefore($(this));
			
			$(jQuery.NiceJForms.radioLabels[q]).bind('click', {who: q}, function(e){self.rechangeRadios(e)});
			
			if (!$.browser.msie) {
				$(this).bind('focus', function(){self.focusRadios(q)}).bind('blur', function() {self.blurRadios(q)});
			}
			
			$(this).bind('click', function(e){self.radioEvent(e)});
		});
		
		return true;
	},
	
	changeRadios: function(who) {
		
		var self = this;
		
		if(jQuery.NiceJForms.radios[who].checked) {
		
			jQuery.NiceJForms.radios.each(function(q){
				if($(this).attr("name") == $(jQuery.NiceJForms.radios[who]).attr("name"))
				{
					this.checked = false;
					$(jQuery.NiceJForms.radioLabels[q]).removeClass();	
				}
			});
			jQuery.NiceJForms.radios[who].checked = true;
			$(jQuery.NiceJForms.radioLabels[who]).addClass("chosen");
			
			self.checkRadios(who);
		}
	},
	
	rechangeRadios:function(e) 
	{
		who = e.data.who;
		
		if(!jQuery.NiceJForms.radios[who].checked) {
			for(var q = 0; q < jQuery.NiceJForms.radios.length; q++) 
			{
				if(jQuery.NiceJForms.radios[q].name == jQuery.NiceJForms.radios[who].name) 
				{
					jQuery.NiceJForms.radios[q].checked = false; 
					//console.info(q);
					jQuery.NiceJForms.radioLabels[q].className = "";
				}
			}
			$(jQuery.NiceJForms.radios[who]).attr('checked', true); 
			jQuery.NiceJForms.radioLabels[who].className = "chosen";
			jQuery.NiceJForms.checkRadios(who);
		}
	},
	
	checkRadios: function(who) {
		$('div').each(function(q){
			if($(this).is(".radioAreaChecked") && $(this).next().attr("name") == $(jQuery.NiceJForms.radios[who]).attr("name")) {$(this).removeClass().addClass("radioArea");}
		});
		$('#myRadio' + who).toggleClass("radioAreaChecked");
	},
	
	focusRadios: function(who) {
		$('#myRadio' + who).css({border: '1px dotted #333', margin: '0'}); return false;
	},
	
	blurRadios:function(who) {
		$('#myRadio' + who).css({border: 'none', margin: '1px'}); return false;
	},
	
	radioEvent: function(e) {
		var self = this;
		if (!e) var e = window.event;
		if(e.type == "click") {for (var q = 0; q < jQuery.NiceJForms.radios.length; q++) {if(this == jQuery.NiceJForms.radios[q]) {self.changeRadios(q); break;}}}
	},
	
replaceCheckboxes: function () 
	{
		var self = this;
		
		jQuery.NiceJForms.checkboxes.each(function(q){
			//move the checkboxes out of the way
			$(jQuery.NiceJForms.checkboxes[q]).removeClass().addClass('outtaHere');
			//create div
			var checkboxArea = document.createElement('div');
			
			//console.info($(radioArea));
			if(jQuery.NiceJForms.checkboxes[q].checked) {$(checkboxArea).removeClass().addClass("checkboxAreaChecked");} else {$(checkboxArea).removeClass().addClass("checkboxArea");};
			
			checkboxPos = jQuery.iUtil.getPosition(jQuery.NiceJForms.checkboxes[q]);
			
			jQuery(checkboxArea)
				.attr({id: 'myCheckbox' + q})
				.css({
				left: checkboxPos.x + 'px', 
				top: checkboxPos.y + 'px',
				margin : '1px'
			})
			.bind('click', {who: q}, function(e){self.rechangeCheckboxes(e)})
			.insertBefore($(jQuery.NiceJForms.checkboxes[q]));
			
			if(!$.browser.safari)
			{
				$(jQuery.NiceJForms.checkboxLabels[q]).bind('click', {who:q}, function(e){self.changeCheckboxes(e)})
			}
			else {
				$(jQuery.NiceJForms.checkboxLabels[q]).bind('click', {who:q}, function(e){self.rechangeCheckboxes(e)})
			}
			
			if(!$.browser.msie)
			{
				$(jQuery.NiceJForms.checkboxes[q]).bind('focus', {who:q}, function(e){self.focusCheckboxes(e)});
				$(jQuery.NiceJForms.checkboxes[q]).bind('blur', {who:q}, function(e){self.blurCheckboxes(e)});
			}	
			
			//$(jQuery.NiceJForms.checkboxes[q]).keydown(checkEvent);
		});
		return true;
	},

	rechangeCheckboxes: function(e)
	{
		who = e.data.who;
		var tester = false;
		
		if($(jQuery.NiceJForms.checkboxLabels[who]).is(".chosen")) {
			tester = false;
			$(jQuery.NiceJForms.checkboxLabels[who]).removeClass();
		}
		else if(jQuery.NiceJForms.checkboxLabels[who].className == "") {
			tester = true;
			$(jQuery.NiceJForms.checkboxLabels[who]).addClass("chosen");
		}
		jQuery.NiceJForms.checkboxes[who].checked = tester;
		jQuery.NiceJForms.checkCheckboxes(who, tester);
	},

	checkCheckboxes: function(who, action)
	{
		var what = $('#myCheckbox' + who);
		if(action == true) {$(what).removeClass().addClass("checkboxAreaChecked");}
		if(action == false) {$(what).removeClass().addClass("checkboxArea");}
	},

	focusCheckboxes: function(who) 
	{
		var what = $('#myCheckbox' + who);
		$(what).css(
					{
						border : "1px dotted #333", 
						margin : "0"
					});	
		return false;
	},

	changeCheckboxes: function(e) {
		who = e.data.who;
		//console.log('changeCheckboxes who is ' + who);
		if($(jQuery.NiceJForms.checkboxLabels[who]).is(".chosen")) {
			jQuery.NiceJForms.checkboxes[who].checked = true;
			$(jQuery.NiceJForms.checkboxLabels[who]).removeClass();
			jQuery.NiceJForms.checkCheckboxes(who, false);
		}
		else if(jQuery.NiceJForms.checkboxLabels[who].className == "") {
			jQuery.NiceJForms.checkboxes[who].checked = false;
			$(jQuery.NiceJForms.checkboxLabels[who]).toggleClass("chosen");
			jQuery.NiceJForms.checkCheckboxes(who, true);
		}
	},

	blurCheckboxes: function(who) 
	{
		var what = $('#myCheckbox' + who);
		$(what).css(
					{
						border : 'none', 
						margin : '1px'
					});	
		return false;
	},
	
	replaceSelects: function()
	{
		var self = this;
		
		jQuery.NiceJForms.selects.each(function(q){
			//create and build div structure
			var selectArea = document.createElement('div');
			var left = document.createElement('div');
			var right = document.createElement('div');
			var center = document.createElement('div');
			var button = document.createElement('a');
			var text = document.createTextNode(jQuery.NiceJForms.selectText);
			var selectWidth = parseInt(this.className.replace(/width_/g, ""));
			
			//console.log('selectWidth is ' + selectWidth);
			
			jQuery(center)
				.attr({id:'mySelectText'+q})
				.css({width: selectWidth - 10 + 'px'});
			jQuery(selectArea)
				.attr({id:'sarea'+q})
				.css({
					width: selectWidth + jQuery.NiceJForms.options.selectRightSideWidth + jQuery.NiceJForms.options.selectLeftSideWidth + 'px'
				})
				.addClass("selectArea");
				
			jQuery(button)
				.css({
				width      : selectWidth + jQuery.NiceJForms.options.selectRightSideWidth + jQuery.NiceJForms.options.selectLeftSideWidth + 'px',
				marginLeft : - selectWidth - jQuery.NiceJForms.options.selectLeftSideWidth + 'px',
				cursor: 'pointer'
				})
				.addClass("selectButton")
				.bind('click', {who:q}, function(e){self.showOptions(e)})
				.keydown(jQuery.NiceJForms.keyPressed);
			
			jQuery(left).addClass("left");	
			jQuery(right).addClass("right").append(button);	
			jQuery(center).addClass("center").append(text);	
			
			jQuery(selectArea).append(left).append(right).append(center).insertBefore(this);
			//hide the select field
			$(this).hide();
			//insert select div
			//build & place options div
			var optionsDiv = document.createElement('div');
			selectAreaPos = jQuery.iUtil.getPosition(selectArea);
			
			jQuery(optionsDiv)
				.attr({id:"optionsDiv" + q})
				.css({
					width : selectWidth + 1 + 'px', 
					left  : selectAreaPos.x + 'px', 
					top   : selectAreaPos.y + jQuery.NiceJForms.options.selectAreaHeight - jQuery.NiceJForms.options.selectAreaOptionsOverlap + 'px'
				})
				.addClass("optionsDivInvisible");
			
			//get select's options and add to options div
			$(jQuery.NiceJForms.selects[q]).children().each(function(w){
				var optionHolder = document.createElement('p');
				var optionLink = document.createElement('a');
				var optionTxt = document.createTextNode(jQuery.NiceJForms.selects[q].options[w].text);
				
				jQuery(optionLink)
					.attr({href:'#'})
					.css({cursor:'pointer'})
					.append(optionTxt)
					.bind('click', {who: q, id:jQuery.NiceJForms.selects[q].id, option:w, select:q}, function(e){self.showOptions(e);self.selectMe(jQuery.NiceJForms.selects[q].id, w, q)});
				
				jQuery(optionHolder).append(optionLink);
				jQuery(optionsDiv).append(optionHolder);//.append(optionLink);
				
				//check for pre-selected items
				if(jQuery.NiceJForms.selects[q].options[w].selected) {self.selectMe($(jQuery.NiceJForms.selects[q]).attr("id"), w, q);}
			});
			
			jQuery('body').append(optionsDiv);
		});
	},

	selectMe: function(selectFieldId, linkNo, selectNo) {
		selectField = $('#' + selectFieldId);
		sFoptions = selectField.children();
		
		selectField.children().each(function(k){
			//console.info(this);
			if(k == linkNo) {sFoptions[k].selected="selected";}
			else {sFoptions[k].selected = "";}
		});
		
		textVar = $("#mySelectText" + selectNo);
		var newText = document.createTextNode($(sFoptions[linkNo]).text());
		textVar.empty().append(newText);
	}, 

	showOptions: function(e) {
		var self = this;
		$("#optionsDiv"+e.data.who).toggleClass("optionsDivVisible").toggleClass("optionsDivInvisible").mouseout(function(e){self.hideOptions(e)});
	},
	
	hideOptions: function(e) {
		if (!e) var e = window.event;
		var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
		if(((reltg.nodeName != 'A') && (reltg.nodeName != 'DIV')) || ((reltg.nodeName == 'A') && (reltg.className=="selectButton") && (reltg.nodeName != 'DIV'))) {this.className = "optionsDivInvisible";};
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();
	},
	
	replaceTexts: function() {
		jQuery.NiceJForms.texts.each(function(q){
			$(jQuery.NiceJForms.texts[q]).css({width:this.size * 10 + 'px'});
			//console.info($(jQuery.NiceJForms.texts[q]));
			//felicia email
			var txtLeft = new Image();
			jQuery(txtLeft)
				.attr({src:jQuery.NiceJForms.options.imagesPath + "input_left.gif"})
				.addClass("inputCorner");
			
			var txtRight = new Image();
			jQuery(txtRight)
				.attr({src:jQuery.NiceJForms.options.imagesPath + "input_right.gif"})
				.addClass("inputCorner");
			
			$(jQuery.NiceJForms.texts[q]).before(txtLeft).after(txtRight).addClass("textinput");
			
			//create hovers
			$(jQuery.NiceJForms.texts[q]).focus(function(){$(this).addClass("textinputHovered");$(this).prev().attr('src', jQuery.NiceJForms.options.imagesPath + "input_left_xon.gif");$(this).next().attr('src', jQuery.NiceJForms.options.imagesPath + "input_right_xon.gif");});
			
			$(jQuery.NiceJForms.texts[q]).blur(function() {$(this).removeClass().addClass("textinput");$(this).prev().attr('src', jQuery.NiceJForms.options.imagesPath + "input_left.gif");$(this).next().attr('src', jQuery.NiceJForms.options.imagesPath + "input_right.gif");});
		});
	},
	
	replaceTextareas: function() {
		jQuery.NiceJForms.textareas.each(function(q){
			
			var where = $(this).parent();
			var where2 = $(this).prev();
			
			$(this).css({width: $(this).attr("cols") * 10 + 'px', height: $(this).attr("rows") * 10 + 'px'});
			//create divs
			var container = document.createElement('div');
			jQuery(container)
				.css({width: jQuery.NiceJForms.textareas[q].cols * 10 + 20 + 'px', height: jQuery.NiceJForms.textareas[q].rows * 10 + 20 + 'px'})
				.addClass("txtarea");
			
			var topRight = document.createElement('div');
			jQuery(topRight).addClass("tr");
			
			var topLeft = new Image();
			jQuery(topLeft).attr({src: jQuery.NiceJForms.options.imagesPath + 'txtarea_tl.gif'}).addClass("txt_corner");
			
			var centerRight = document.createElement('div');
			jQuery(centerRight).addClass("cntr");
			var centerLeft = document.createElement('div');
			jQuery(centerLeft).addClass("cntr_l");
			
			if(!$.browser.msie) {jQuery(centerLeft).height(jQuery.NiceJForms.textareas[q].rows * 10 + 10 + 'px')}
			else {jQuery(centerLeft).height(jQuery.NiceJForms.textareas[q].rows * 10 + 12 + 'px')};
			
			var bottomRight = document.createElement('div');
			jQuery(bottomRight).addClass("br");
			var bottomLeft = new Image();
			jQuery(bottomLeft).attr({src: jQuery.NiceJForms.options.imagesPath + 'txtarea_bl.gif'}).addClass('txt_corner');
			
			//assemble divs
			jQuery(topRight).append(topLeft);
			jQuery(centerRight).append(centerLeft).append(jQuery.NiceJForms.textareas[q]);
			jQuery(bottomRight).append(bottomLeft);
			jQuery(container).append(topRight).append(centerRight).append(bottomRight);
			
			jQuery(where2).before(container);
			
			//create hovers
			$(jQuery.NiceJForms.textareas[q]).focus(function(){$(this).prev().removeClass().addClass("cntr_l_xon"); $(this).parent().removeClass().addClass("cntr_xon"); $(this).parent().prev().removeClass().addClass("tr_xon"); $(this).parent().prev().children(".txt_corner").attr('src', jQuery.NiceJForms.options.imagesPath + "txtarea_tl_xon.gif"); $(this).parent().next().removeClass().addClass("br_xon"); $(this).parent().next().children(".txt_corner").attr('src', jQuery.NiceJForms.options.imagesPath + "txtarea_bl_xon.gif")});
			$(jQuery.NiceJForms.textareas[q]).blur(function(){$(this).prev().removeClass().addClass("cntr_l"); $(this).parent().removeClass().addClass("cntr"); $(this).parent().prev().removeClass().addClass("tr"); $(this).parent().prev().children(".txt_corner").attr('src', jQuery.NiceJForms.options.imagesPath + "txtarea_tl.gif"); $(this).parent().next().removeClass().addClass("br"); $(this).parent().next().children(".txt_corner").attr('src', jQuery.NiceJForms.options.imagesPath + "txtarea_bl.gif")});
		});
	},
	
	buttonHovers: function() {
		jQuery.NiceJForms.buttons.each(function(i){
			$(this).addClass("buttonSubmit");
			var buttonLeft = document.createElement('img');
			jQuery(buttonLeft).attr({src: jQuery.NiceJForms.options.imagesPath + "button_left.gif"}).addClass("buttonImg");
			
			$(this).before(buttonLeft);
			
			var buttonRight = document.createElement('img');
			jQuery(buttonRight).attr({src: jQuery.NiceJForms.options.imagesPath + "button_right.gif"}).addClass("buttonImg");
			
			if($(this).next()) {$(this).after(buttonRight)}
			else {$(this).parent().append(buttonRight)};
			
			$(this).hover(
				function(){$(this).attr("class", $(this).attr("class") + "Hovered"); $(this).prev().attr("src", jQuery.NiceJForms.options.imagesPath + "button_left_xon.gif"); $(this).next().attr("src", jQuery.NiceJForms.options.imagesPath + "button_right_xon.gif")},
				function(){$(this).attr("class", $(this).attr("class").replace(/Hovered/g, "")); $(this).prev().attr("src", jQuery.NiceJForms.options.imagesPath + "button_left.gif"); $(this).next().attr("src", jQuery.NiceJForms.options.imagesPath + "button_right.gif")}
			);
		});
	}
}

Hope this helps, and thank you again very much!

--Charlie

charlie_’s picture

charlie_ commented

I'm not sure, but I can also use the following (nicejforms.js) which doesn't require the interface.js
module. I thought it might be worth noting in case it makes the process less complex. :)

[Edited to remove code; not need here and made discussion hard to follow: nevets]

Hope it helps, and thank you again!

--Charlie

nevets’s picture

nevets commented

You seem to be making it hard on yourself. The only form element you need to modify is the form tag it's self so it has the class niceform. Invoking niceform as in their example will take care of all the rest.

charlie_’s picture

charlie_ commented

Thank you again for your reply.
Well, as I understand it, the classes have already been defined in the nicejforms.js, and the
nicejforms-interface.js files. I've added those declarations to the Themes css file. But what
I'm struggling with is how to add, or inject if you will, those classes
into the Drupal/Theme's forms. Maybe my mind has just turned to mush after reading so much
code, documentation, and the API. But I can't seem to figure out how to add the .niceform
class, or any of it's descendants.

[Edited to remove css; not need here and made discussion hard to follow: nevets]

I've successfully loaded the CSS. I've gotten the JS to load. But without those classes in
the forms. Nothing happens outside the default Drupal/Theme form styling.
I must be missing something really obvious. Apologies in advance. :P

Thank you for your continued patience with me. :)

--Charlie

nevets’s picture

nevets commented

Adding the class 'niceform' to the form and calling $.NiceJForms.build(); takes care of adding the needed classes to the form elements. You can add the class to the form by placing the following in your themes template.php file

function phptemplate_form($element) {
  // Anonymous div to satisfy XHTML compliance.
  // Make sure not to overwrite classes.
  if (isset($element['#attributes']['class'])) {
    $element['#attributes']['class'] = $element['#attributes']['class'] . ' niceform';
  }
  else {
    $element['#attributes']['class'] = 'niceform';
  }
  
  $action = $element['#action'] ? 'action="'. check_url($element['#action']) .'" ' : '';
  return '<form '. $action .' accept-charset="UTF-8" method="'. $element['#method'] .'" id="'. $element['#id'] .'"'. drupal_attributes($element['#attributes']) .">\n<div>". $element['#children'] ."\n</div></form>\n";
}

You say you are already pulling in the css and js script so the only other thing you would need in page.tpl.php is

<script type="text/javascript">
$(document).ready( function() { $.NiceJForms.build(); } );
</script>

BUT that it turns out is only a starting point as nicejforms does not play nice with Drupal forms and understanding why would take some time.

charlie_’s picture

charlie_ commented

Thank you nevets. You !!!ROCK!!!
I greatly appreciate the time you were willing to spend assisting me.
This has really helped me get a better handle on adding classes to
to Drupal generated elements. Sure, I know there are already myrads of other
examples, and a wealth of documentation. But it really makes the
difference when it's specific to something your working with.
Much appreciated.

BUT that it turns out is only a starting point as nicejforms does not play nice with Drupal forms and understanding why would take some time.

Sorry to hear. I'll spend some time with it getting myself better aquainted
with the whole process. While you were doing all of this, I was getting
a better understanding of the jQuery library. I (and others) might be
better served if I simply write one from scratch specifically
for Drupal. In my initial reading, it seems as though that might not be
a very difficult task. I wrote a JavaScript OS (operating system) back in
the early '90's. I oughtta be able to write a simple class wrapper, eh? :)
On the other hand, I haven't really messed with JavaScript since the mid
'90's. So, it'll take a bit time to re acquaint myself with it. :)

I can't thank you enough nevets, for all the time you spent on this.
It made a world of difference to me. Thank you.

All the best to you nevets.

--Charlie