The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Word counter for int language and in selected categories

View previous topic View next topic Go down

In progress Word counter for int language and in selected categories

Post by Kami-sama on September 28th 2015, 1:00 am

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

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: http://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.


Last edited by Kami-sama on September 30th 2015, 4:34 pm; edited 1 time in total

Kami-sama
Forumember

Female Posts : 74
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by Kami-sama on September 29th 2015, 6:28 pm

Up Smile

Kami-sama
Forumember

Female Posts : 74
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by Kami-sama on September 30th 2015, 4:33 pm

24 hours almost passed, so I shall share my foundings.
Similar problem was solved here:
http://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");
            }
        }
}
    })
});

Kami-sama
Forumember

Female Posts : 74
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by Kami-sama on October 2nd 2015, 11:06 pm

UP Smile

Kami-sama
Forumember

Female Posts : 74
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by Ange Tuteur on October 3rd 2015, 2:14 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by Kami-sama on October 3rd 2015, 4:35 pm

No problem! I know you are busy Smile)

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

Kami-sama
Forumember

Female Posts : 74
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by Ange Tuteur on October 3rd 2015, 4:43 pm

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

Have a good weekend. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by Kami-sama on October 3rd 2015, 5:32 pm

Okey, there is only one thing Very Happy
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:

Kami-sama
Forumember

Female Posts : 74
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by Ange Tuteur on October 3rd 2015, 5:52 pm

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. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by Kami-sama on October 3rd 2015, 6:36 pm

Perfect! Absolutely forgot about that option!
Thank you again Smile

Kami-sama
Forumember

Female Posts : 74
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by SLGray on October 3rd 2015, 7:41 pm

Topic solved and archived



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by SLGray on October 6th 2015, 1:07 am

Reopened by Request


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by Kami-sama on October 6th 2015, 8:36 am

Hello again.

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

Kami-sama
Forumember

Female Posts : 74
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by Kami-sama on October 8th 2015, 8:36 pm

@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
Forumember

Female Posts : 74
Reputation : 3
Language : English, Russian, German, Lithuanian

http://hogas.huhohi.com/

Back to top Go down

In progress Re: Word counter for int language and in selected categories

Post by Ange Tuteur on October 8th 2015, 9:36 pm

@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 ? blackeye

@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 ).

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2681
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum