Add Profile Field For Short Bio - Show Characters Left - The Jamroom Network

MAD
@madc
11 years ago
600 posts

Hi ,
I have added a short bio field to my Profile form designer. ( profile_shortbio )
I have it set to 87 Characters under the Field Maximum.

Is there anyway when a user is inputting it can show how many characters are left?
It makes it difficult otherwise as after saving it shows an error box. ( Which it should if you put more than 87 characters in )
But to avoid this it would be great to show the user how many characters are left then only allow 87
ie. 87 characters left when it gets to 0 it won't allow you to do anymore.

Any help?
Cheers :D

--
~ https://punkbandpromotions.com ~
Check us out for all your Punk/Alternative Music!
Check us out on Facebook:- https://facebook.com/PunkBandPromotion

updated by @madc: 02/04/14 07:05:42PM

@michael
11 years ago
7,718 posts

I think that countdown functionality is there on the activity updates.

Are you meaning adding it in as a core feature for all form designer limited fields or how to do it custom for your site?

MAD
@madc
11 years ago
600 posts

How to add it to the form designer for that field only. Maybe in options?
Not sure how to get it in there.

It would be great if this was an option anyway ( core ) as the bio section albeit you can set via the Maximum field still doesn't display characters if you have set it to say 500 characters and they aren't sure how many are left.
So it is guess work until you save it then it just tells you

Quote: You have entered an invalid value for "short bio" - value must be printable characters with the following allowed HTML tags: span,strong,em,a,b,u,i,p,div,br,img,h1,h2,h3,h4,pre,hr,ul,ol,li,iframe, with a maximum length of 86 characters

So then you need to count how many you have put in.
It should have a DISPLAYED countdown i think.
As you can see by the attached image it doesn't show you how many characters left

--
~ https://punkbandpromotions.com ~
Check us out for all your Punk/Alternative Music!
Check us out on Facebook:- https://facebook.com/PunkBandPromotion

updated by @madc: 12/12/13 10:41:48PM

@michael
11 years ago
7,718 posts

its possible to do by changing form_field_elements.tpl to this:

    {if $type == 'textarea' && !isset($theme)}
        {if $max > 0}
            <script language="JavaScript">
                $("#{$name}").charCount({ allowed: {$max}, warning: 20, mainID: '{$name}' });
            </script>
            <span class="" id="{$name}_counter">{$min}:<span id="{$name}_num">{$max}</span></span>
        {/if}
        <a onclick="var e=$(this).prev();var h=e.height() + 100;e.animate( { height: h +'px' } , 250);">{jrCore_icon icon="arrow-down" size="16"}</a>
    {/if}

and /jrAction/js/char_count.js to this:

(function($) {

	$.fn.charCount = function(options){

		// default configuration properties
		var defaults = {
			allowed: 140,
			warning: 20,
			cssWarning: 'action_warning',
			cssExceeded: 'action_exceeded',
            mainID: 'action_text'
		};
		var options = $.extend(defaults, options);

		function calculate(obj){
			var count = $(obj).val().length;
			var available = options.allowed - count;
			if (available <= options.warning && available >= 0){
				$('#'+options.mainID+'_counter').addClass(options.cssWarning);
			} else {
				$('#'+options.mainID+'_counter').removeClass(options.cssWarning);
			}
			if (available < 0){
				$('#'+options.mainID+'_counter').addClass(options.cssExceeded);
			} else {
				$('#'+options.mainID+'_counter').removeClass(options.cssExceeded);
			}
            $('#'+options.mainID+'_num').html(available);
		};
		this.each(function() {
			calculate(this);
			$(this).keyup(function(){calculate(this)});
			$(this).change(function(){calculate(this)});
		});


	};

})(jQuery);

But I'm not sure if that should go into core or not, ill ask the others. It will make having Javascript turned on necessary rather than optional for that to work.

See what they say.

MAD
@madc
11 years ago
600 posts

That worked @michael.
Although it breaks the box sizer.
When you click on the sizer , You can see it drops down but the box (text area) stays the same

EDIT
The below code worked perfectly and didn't break the sizer

{if $type == 'textarea' && !isset($theme)}
<a onclick="var e=$(this).prev();var h=e.height() + 100;e.animate( { height: h +'px' } , 250);">{jrCore_icon icon="arrow-down" size="16"}</a>
        {if $max > 0}            
            <script language="JavaScript">
                $("#{$name}").charCount({ allowed: {$max}, warning: 20, mainID: '{$name}' });
            </script>
            <br /><span class="" id="{$name}_counter"><span id="{$name}_num">{$max}</span> Characters Left</span>
        {/if}
{/if}

So now the problem is on updating I will have to put those edits in again right?
Thanks again @michael. You are a legend!

--
~ https://punkbandpromotions.com ~
Check us out for all your Punk/Alternative Music!
Check us out on Facebook:- https://facebook.com/PunkBandPromotion

updated by @madc: 12/12/13 11:28:00PM

solved Add Profile Field for Short Bio - Show Characters left

Tags