Word counter for int language and in selected categories

Hello! Please notify me if such topic is already created! Thank you in advance

1. I would like to add a word or character counter to specific categories of my forum.
Is that possible? Also, the code I found here in the archive is:
(from: https://help.forumotion.com/t137033-about-word-counter?highlight=counter )

Code:


$(function() {
    $(function() {

        var MinNumberOfChars = 50;
        var ico_compl = "http://i73.servimg.com/u/f73/18/10/89/49/ok-gre10.png";
        var ico_incompl = "http://i73.servimg.com/u/f73/18/10/89/49/exclam10.png";

        if ($("#text_editor_textarea").length != 0) {
            $("input[type='submit'][name='post']").attr("disabled", true).css("opacity", "0.5");
            $(".sceditor-container").after("<br/><div id='div_minchars' align='center'><div id='div_minchars_header'> Minimum characters to send a message: " + MinNumberOfChars + " </div><div id='div_minchars_info'></div></div>");

            var sceditor = $("#text_editor_textarea").sceditor("instance");
        str = sceditor.val().replace(/\[quote.*[^]+\[\/quote\]|\[\/?[a-z][a-z0-9]*[^\[\]]*\]|(:.*?:|\W)/ig, "");
            var str_len = str.length;

            if (str_len >= MinNumberOfChars) $("input[type='submit'][name='post']").attr("disabled", false).css("opacity", "1");

            $('.sceditor-container iframe').contents().on('input', function() {
                getLen()
            });
            $('.sceditor-container textarea').on('input', function() {
                getLen()
            });
            sceditor.keyUp(function() {
                getLen()
            });
        }

        function getLen() {
        str = sceditor.val().replace(/\[quote.*[^]+\[\/quote\]|\[\/?[a-z][a-z0-9]*[^\[\]]*\]|(:.*?:|\W)/ig, "");
            str_len = str.length;
            if (str_len >= MinNumberOfChars) {
                $("#div_minchars_info").html("You've written <span style='color:green'>" + str_len + "</span> character(s). You can now send the message <img src='" + ico_compl + "' />");
                $("input[type='submit'][name='post']").attr("disabled", false).css("opacity", "1");
            } else {
                $("#div_minchars_info").html("You've written <span style='color:red'>" + str_len + "</span> character(s). You need " + (MinNumberOfChars - str_len) + " character(s) to send this message <img src='" + ico_incompl + "' />");
                $("input[type='submit'][name='post']").attr("disabled", true).css("opacity", "0.5");
            }
        }
    })
});

2. But, user, who required it, asked for only english characters to be counted. I would like to be able to count international letters as well.

3. Also, is there a big difference between word counter and character counter? Maybe one of them is easier/ works faster? Just speculating what could be better for my forum.

Up

24 hours almost passed, so I shall share my foundings.
Similar problem was solved here:
https://help.forumotion.com/t137215-word-counter-in-certain-areas-of-site?highlight=counter

Yet, is it possible to leave the quick reply?
And how should I implement the solution to my code to have all exclusions too (quotations, codes and etc.)?

EDIT:
this is how I implemented the solution, for counter only in specific topics.
Works fine, but not in the quick reply of course.
So now two problems left: quick reply and international letters.

Code:

$(function() {
    $(function() {

 var c = Number($('.nav a:eq(1)').attr('href').replace(/\/c(\d+)-.*/,'$1'));
 
  if (c == 1) {

        var MinNumberOfChars = 250;
        var ico_compl = "http://i73.servimg.com/u/f73/18/10/89/49/ok-gre10.png";
        var ico_incompl = "http://i73.servimg.com/u/f73/18/10/89/49/exclam10.png";

        if ($("#text_editor_textarea").length != 0) {
            $("input[type='submit'][name='post']").attr("disabled", true).css("opacity", "0.5");
            $(".sceditor-container").after("<br/><div id='div_minchars' align='center'><div id='div_minchars_header'> Minimum characters to send a message: " + MinNumberOfChars + " </div><div id='div_minchars_info'></div></div>");

            var sceditor = $("#text_editor_textarea").sceditor("instance");
        str = sceditor.val().replace(/\[quote.*[^]+\[\/quote\]|\[\/?[a-z][a-z0-9]*[^\[\]]*\]|(:.*?:|\W)/ig, "");
            var str_len = str.length;

            if (str_len >= MinNumberOfChars) $("input[type='submit'][name='post']").attr("disabled", false).css("opacity", "1");

            $('.sceditor-container iframe').contents().on('input', function() {
                getLen()
            });
            $('.sceditor-container textarea').on('input', function() {
                getLen()
            });
            sceditor.keyUp(function() {
                getLen()
            });
        }

        function getLen() {
        str = sceditor.val().replace(/\[quote.*[^]+\[\/quote\]|\[\/?[a-z][a-z0-9]*[^\[\]]*\]|(:.*?:|\W)/ig, "");
            str_len = str.length;
            if (str_len >= MinNumberOfChars) {
                $("#div_minchars_info").html("You've written <span style='color:green'>" + str_len + "</span> character(s). You can now send the message <img src='" + ico_compl + "' />");
                $("input[type='submit'][name='post']").attr("disabled", false).css("opacity", "1");
            } else {
                $("#div_minchars_info").html("You've written <span style='color:red'>" + str_len + "</span> character(s). You need " + (MinNumberOfChars - str_len) + " character(s) to send this message <img src='" + ico_incompl + "' />");
                $("input[type='submit'][name='post']").attr("disabled", true).css("opacity", "0.5");
            }
        }
}
    })
});

UP

Hi @Kami-sama,

I apologize for the late reply. Try replacing your script with this for the categories :

Code:

$(function() {
    $(function() {

      var categories = [1, 2, 3, 4],
          i = 0,
          j = categories.length,
          n = $('.nav a.nav:eq(1)');
 
  if (n[0]) {
    n = n.attr('href').replace(/\/c(\d+)-.*/,'$1');
    for (; i < j; i++) {
      if (categories[i] == n) {
        initCounter();
        break;
      }
    }
  }
 
  function initCounter() {

        var MinNumberOfChars = 250;
        var ico_compl = "http://i73.servimg.com/u/f73/18/10/89/49/ok-gre10.png";
        var ico_incompl = "http://i73.servimg.com/u/f73/18/10/89/49/exclam10.png";

        if ($("#text_editor_textarea").length != 0) {
            $("input[type='submit'][name='post']").attr("disabled", true).css("opacity", "0.5");
            $(".sceditor-container").after("<br/><div id='div_minchars' align='center'><div id='div_minchars_header'> Minimum characters to send a message: " + MinNumberOfChars + " </div><div id='div_minchars_info'></div></div>");

            var sceditor = $("#text_editor_textarea").sceditor("instance");
            var str = sceditor.val().replace(/\[quote.*[^]+\[\/quote\]|\[\/?[a-z][a-z0-9]*[^\[\]]*\]|(:.*?:)/ig, "");
            var str_len = str.length;

            if (str_len >= MinNumberOfChars) $("input[type='submit'][name='post']").attr("disabled", false).css("opacity", "1");

            $('.sceditor-container iframe').contents().on('input', function() {
                getLen()
            });
            $('.sceditor-container textarea').on('input', function() {
                getLen()
            });
            sceditor.keyUp(function() {
                getLen()
            });
        }

        function getLen() {
        str = sceditor.val().replace(/\[quote.*[^]+\[\/quote\]|\[\/?[a-z][a-z0-9]*[^\[\]]*\]|(:.*?:)/ig, "");
            str_len = str.length;
            if (str_len >= MinNumberOfChars) {
                $("#div_minchars_info").html("You've written <span style='color:green'>" + str_len + "</span> character(s). You can now send the message <img src='" + ico_compl + "' />");
                $("input[type='submit'][name='post']").attr("disabled", false).css("opacity", "1");
            } else {
                $("#div_minchars_info").html("You've written <span style='color:red'>" + str_len + "</span> character(s). You need " + (MinNumberOfChars - str_len) + " character(s) to send this message <img src='" + ico_incompl + "' />");
                $("input[type='submit'][name='post']").attr("disabled", true).css("opacity", "0.5");
            }
        }
};
    })
});

At the top you'll see an array like this :

Code:

var categories = [1, 2, 3, 4],

Inside it are numbers ( 1, 2, 3.. ) Each number is an id for a specific category. So, just add the ids of the categories you want this script applied to. I also fixed it to work with the quick reply and international characters.

No problem! I know you are busy )

Thank you very much, everything seams to work pretty fine. Will do some tests these days to make sure But for now, really thanks! You are such a sweet genius! ;D

You're welcome, if you run into any problems or feel everything is perfect just let me know.

Have a good weekend.

Okey, there is only one thing
I was styleizing the messages (You need to write... symbols...)
Adding something like this:

Code:

$("#div_minchars_info").html("<span class='CounterTekst'>TEXT: <span style='color:red'>" + str_len + "</span>.</span>

With the style something like this:

Code:

.CounterTest {
  background-image: url("xxxxx");
  color: rgb(42, 42, 42);
  font-size: 12px;
  padding:5px 20px 5px 20px;
  color: rgb(42, 42, 42);
  border-radius: 3em;
}

Problem is, that the line break kinda dissapears. And margin options, nor line-height, nor setting height of the field work good. Adding just br/ makes too big of an space.
Here's how it kinda looks:

Since it's a span ( inline element ) try changing its display to block. Like this :

Code:

.CounterTest {
  display:block;
  background-image: url("xxxxx");
  color: rgb(42, 42, 42);
  font-size: 12px;
  padding:5px 20px 5px 20px;
  color: rgb(42, 42, 42);
  border-radius: 3em;
}

or inline-block if you don't want it to take up the whole line.

Perfect! Absolutely forgot about that option!
Thank you again

Hello again.

So I've noticed that it does not work clicking on "quote" button, yet multi quote is fine.

@Ange Tuteur Also, I was wondering, if it is possible next to symbol count to show word count in brackets? (limit only on symbols tho).

Kami-sama wrote:Hello again.

So I've noticed that it does not work clicking on "quote" button, yet multi quote is fine.

It doesn't work on the quote page, what if you paste the same quote twice ?

Kami-sama wrote:@Ange Tuteur Also, I was wondering, if it is possible next to symbol count to show word count in brackets? (limit only on symbols tho).

Try replacing your script with this :

Code:

$(function() {
    $(function() {

      var categories = [1, 2, 3, 4],
          i = 0,
          j = categories.length,
          n = $('.nav a.nav:eq(1)');
 
  if (n[0]) {
    n = n.attr('href').replace(/\/c(\d+)-.*/,'$1');
    for (; i < j; i++) {
      if (categories[i] == n) {
        initCounter();
        break;
      }
    }
  }
 
  function initCounter() {

        var MinNumberOfChars = 250;
        var ico_compl = "http://i73.servimg.com/u/f73/18/10/89/49/ok-gre10.png";
        var ico_incompl = "http://i73.servimg.com/u/f73/18/10/89/49/exclam10.png";

        if ($("#text_editor_textarea").length != 0) {
            $("input[type='submit'][name='post']").attr("disabled", true).css("opacity", "0.5");
            $(".sceditor-container").after("<br/><div id='div_minchars' align='center'><div id='div_minchars_header'> Minimum characters to send a message: " + MinNumberOfChars + " </div><div id='div_minchars_info'></div></div>");

            var sceditor = $("#text_editor_textarea").sceditor("instance");
            var str = sceditor.val().replace(/\[quote.*[^]+\[\/quote\]|\[\/?[a-z][a-z0-9]*[^\[\]]*\]|(:.*?:)/ig, "");
            var str_len = str.length;

            if (str_len >= MinNumberOfChars) $("input[type='submit'][name='post']").attr("disabled", false).css("opacity", "1");

            $('.sceditor-container iframe').contents().on('input', function() {
                getLen()
            });
            $('.sceditor-container textarea').on('input', function() {
                getLen()
            });
            sceditor.keyUp(function() {
                getLen()
            });
        }

        function getLen() {
        str = sceditor.val().replace(/\[quote.*[^]+\[\/quote\]|\[\/?[a-z][a-z0-9]*[^\[\]]*\]|(:.*?:)/ig, "");
            str_len = str.length;
            var str_words = str.split(' ').length;
            if (str_len >= MinNumberOfChars) {
                $("#div_minchars_info").html("You've written <span style='color:green'>" + str_len + "</span> character(s) [" + str_words + " word(s)]. You can now send the message <img src='" + ico_compl + "' />");
                $("input[type='submit'][name='post']").attr("disabled", false).css("opacity", "1");
            } else {
                $("#div_minchars_info").html("You've written <span style='color:red'>" + str_len + "</span> character(s) [" + str_words + " word(s)]. You need " + (MinNumberOfChars - str_len) + " character(s) to send this message <img src='" + ico_incompl + "' />");
                $("input[type='submit'][name='post']").attr("disabled", true).css("opacity", "0.5");
            }
        }
};
    })
});

That should count the words ( or at least strings separated by a space ).