Ning 3.0 Tip: Limit post and discussion title lengths (with counter)

[SweetPotato]

Hi all,

Here's a quick and easy tip born out of a request from Kos to limit the number of characters that members can type into the title box on blog posts and forum discussions on Ning 3.0.

Kos's thinking was that Google prefers shorter titles for your content. In this example we set the character limit to 65 (this can be changed in the green instances below). I've also added a Twitter-like character countdown which wasn't in Kos's initial request but hey, slow day. :-)

There are two bits of code below, both of which can be put in your Social Site Manager > Custom Code > End of Page Code section:

BLOGS:

<!-- Character Count Limit Blog Titles www.SweetPotato.me.uk -->
<script>
x$('.entryEditPage-title.input-wide').attr( "maxlength", "65" );
x$('.entryEditPage-title.input-wide').after('<p id="SP_Char_Count"></p>');
x$('.entryEditPage-title.input-wide').keyup(function () {
    var SPleft = 65 - x$(this).val().length;
    if (SPleft < 0) {
        SPleft = 0;
    }
    x$('#SP_Char_Count').text('Characters left: ' + SPleft);
});
</script>

FORUMS:

<!-- Character Count Limit Forum Titles www.SweetPotato.me.uk -->
<script>
x$('.entryEditPage-title.input-full').attr( "maxlength", "65" );
x$('.entryEditPage-title.input-full').after('<p id="SP_Char_Count"></p>');
x$('.entryEditPage-title.input-full').keyup(function () {
    var SPleft = 65 - x$(this).val().length;
    if (SPleft < 0) {
        SPleft = 0;
    }
    x$('#SP_Char_Count').text('Characters left: ' + SPleft);
});
</script>

Notes: The selectors used for the text areas we are targeting here are .entryEditPage-title.input-full and .entryEditPage-title.input-wide which will also target other input areas like photos. The css gurus among you will be able to target sections of your site more specifically if you want to exclude photos or particularly content instances. In its rough and ready state this is a "catch all" solution.

Enjoy!

SP

[Kos]

Oh wow, how cool is that!  Thank you SP

[SweetPotato]

:-)

[TJ @ jQueryHelp]

Very nice tip!

[SweetPotato]

Thanks TJ and John.

[Fire-Tech]

Nice tip bro :)

[Kos]

ok you knew someone was going to be a pain in the arse - it may as well be me.  If you get a spare few minutes, could you adapt this for 2.0?  There are still a boatload of existing 2.0 sites which I'm sure could utilize this.  I fiddled around with .textfield but couldn't get it to work.  Yeah, I stink. *lol*  Thanks SP

[SweetPotato]

Bug me next week :-)

[Kos]

Yahoo!  I got it.  I was missing a period.  This works for both forums and blogs in 2.0.  Thanks for teaching me a little more SP.   You rock!

<script>
x$('.textfield').attr( "maxlength", "65" );
x$('.textfield').after('<p id="SP_Char_Count"></p>');
x$('.textfield').keyup(function () {
    var SPleft = 65 - x$(this).val().length;
    if (SPleft < 0) {
        SPleft = 0;
    }
    x$('#SP_Char_Count').text('Characters left: ' + SPleft);
});
</script>