Jquery.slide Help

[herghost]

Good afternoon guru's

 

I was wondering if anyone would be able to help me with this excellent plugin for jquery, I cant find any contact details for the developer or I would ask them.

 

Basically the plugin means you have to slide a bar across the screen before you can submit a form, kind of a replacement for captcha.

 

It all works as the developer states, however I would like to change one small piece of it, on screen you have the words 'locked' and 'unlocked', which change colour (using css) depending on if the form is unlocked or locked.

 

What I would like to do, is only display the word unlocked when the form is actually unlocked?

 

I am a php nut, and know very little js, apart from what I remember from my C days

 

Thanks to anyone that can help

// slideLock JQuery Plugin
/*

slideLock adds a JQuery UI slider along with 'lock' and 
'unlock' labels. Be sure to upload the default arrow icon 
or change the path in the options. 

The purpose of this plugin is to provide an alternative to
traditional CAPTCHA. The user simply slides the lock open
and the plugin sets a value for the server to check. 

You still need to check on the server side the value of the 
inserted hidden field with the name and id of 'inputID'.
You can set these values in the options and must be integers.

*** REQUIRES >= jQuery 1.4 					***
*** REQUIRES jQuery UI >= 1.7 slider plugin ***

Version: 2.0
	- Fixed a bug that causes the plugin to fail when the ID of
	  the inputs are changed -- thanks to Steve Kruse <steve@wnywebsites.com>
	  
	- Includes revised PHP code to allow for Javascript being disabled

*/
(function($) {
	  
$.fn.slideLock = function(options) {

	// set defaults
	var defaults = {

		// style these options with css to fit your application
		labelText: "Slide to Unlock:",
		noteText: "Proves you're human ",
		lockText: "Locked",
		unlockText: "Unlocked",
		iconURL: "../arrow_right.png",
		inputID: "sliderInput",
		onCSS: "#333",
		offCSS: "#aaa",
		inputValue: 1,
		saltValue: 9,
		checkValue: 10,
		js_check: "js_check",
		submitID: "#submit"

	};

	var opts = $.extend(defaults, options);

	// remove hidden form field to allow for server side validation
	$("#" + opts.js_check).remove();

	// insert ui function
	function insertLocker() {

		var uiHTML = '<p class="slider"><label for="slider">' + opts.labelText + '<br/><span class="quiet">' + opts.noteText + '</span></label>';
		uiHTML += '<div id="slider" title="Slide to unlock this form"></div></p>';
		uiHTML += '<p class="quiet"><span id="locked">' + opts.lockText + '</span><img src="' + opts.iconURL + '" alt="Slide to the right" /><span id="unlocked">' + opts.unlockText + '</span></p>';
		uiHTML += '<input type="hidden" name="' + opts.inputID + '" value="" id="' + opts.inputID + '" />';

		return uiHTML;

	}

	return this.each(function() {

		var obj = $(this);

		// insert ui elements before the form's submit button
		var submitButton = $(opts.submitID);	
		submitButton.before(insertLocker());

		// disable submit button
		$(submitButton).css('margin-top', '15px').attr('disabled', 'disabled');

		// slider functionality
		$("#slider", obj).slider({

			animate: true,
			value: 0,
			min: 0,
			max: opts.inputValue,
			step: opts.inputValue,
			stop: function(event, ui) {

				// set value of usercheck
				$("#" + opts.inputID, obj).val(ui.value + opts.saltValue);

				// enable submit button
				if($("#" + opts.inputID, obj).val() == opts.checkValue) {

					// change color of labels
					$("#locked", obj).css({'color': opts.offCSS, 'font-weight': 'normal'});
					$("#unlocked", obj).css({'color': opts.onCSS, 'font-weight': 'bold'});

					// enable
					$(submitButton).attr('disabled', ''); 

				}else{

					// change color of labels
					$("#locked", obj).css({'color': opts.onCSS, 'font-weight': 'bold'});
					$("#unlocked", obj).css({'color': opts.offCSS, 'font-weight': 'normal'});

					// disable
					$(submitButton).attr('disabled', 'disabled');

				}

			}

		});
							  
	});

};
	  
})(jQuery);			

 

[RichardRotterdam]

What I would like to do, is only display the word unlocked when the form is actually unlocked?

So what you're saying is that you don't want any text when the status is locked correct?

 

 

Looking at the defaults that shouldn't be much of a problem:

var defaults = {

		// style these options with css to fit your application
		labelText: "Slide to Unlock:",
		noteText: "Proves you're human ",
		lockText: "Locked",
		unlockText: "Unlocked",
		iconURL: "../arrow_right.png",
		inputID: "sliderInput",
		onCSS: "#333",
		offCSS: "#aaa",
		inputValue: 1,
		saltValue: 9,
		checkValue: 10,
		js_check: "js_check",
		submitID: "#submit"

	};

notice the  unlockText : "Unlocked" and lockText : "Locked"

My guess is you do something like this (untested):

$(document).ready(function() {
    $.slideLock({lockText:''});
});

 

[herghost]

Hi,

 

Thanks for the reply,

 

Actually, I trying to replace the unlocked text with the actual submit button, so I only want it to appear when the form is unlocked, I tried your suggestion and it just removes the whole element from my form (nothing displays)

[codingPhoenix]

heya,

 

Not sure if you solved this but i just ran into the same problem. After looking at the code the docs show the wrong var. To change the unlock text use this:

 

txtUnlock:'Slide me'

 

You need to capitalize the U in txtUnlock. Hope that solves it!!

 

Cheers!!!