Character Counter not adding to actual editor

Technical Details

Forum version : #PunBB
Position : Founder
Concerned browser(s) : Mozilla Firefox
Who the problem concerns : All members
When the problem appeared : Anytime I try to add the code AND when I tick "In all the pages"
Forum link : http://astariel.userboard.net

Description of problem

Ok. So, I found the code to add a character counter (not words but single characters) to my site. But it only adds to the quick reply and not the actual reply editor. I'm trying to get it to work on both but it's just not working. Any help would be soooo appreciated x,x

Code:


$(function() {
  if (!document.getElementById('text_editor_textarea')) return; // no textarea ? better not continue :(
 
  // define global data to be cached and reused
  window.$fa_char = {
    area : document.getElementById('text_editor_textarea'), // message textarea
    current : 0, // current characters typed
    maximum : /page_profil=signature/.test(window.location.search) ? 1000 : 60000, // maximum characters allowed
    used : null, // node cache for used characters
    remain : null, // node cache for remaining characters
    instance : null, // sceditor instance
 
    // calculate the characters used and remaining
    calculate : function() {
      $fa_char.current = ($fa_char.instance ? $fa_char.instance.val() : $fa_char.area.value).length; // get the message length
      $fa_char.used.innerHTML = $fa_char.current; // update the current count
      $fa_char.remain.innerHTML = '<span ' + ($fa_char.current >= $fa_char.maximum ? 'style="color:#F00"' : '') + '>' + ($fa_char.maximum - $fa_char.current) + '</span>'; // update the remaining characters
    }
  };
 
  var node = document.createElement('DIV'); // container for the chararacter data
 
  node.id = 'faCharCounter'; // the id is mostly used for user defined styles
  node.innerHTML = '<span id="faCharUsed">0</span> characters used out of ' + $fa_char.maximum + ' (<span id="faCharRemain" style="color:#090">' + $fa_char.maximum + '</span> remaining)'; // define our character data
  $fa_char.area.parentNode.insertBefore(node, $fa_char.area); // insert the container before the textarea
 
  // update the node caches so we don't have to keep getting these elements
  $fa_char.used = document.getElementById('faCharUsed');
  $fa_char.remain = document.getElementById('faCharRemain');
 
  // execute another doc ready to match up with the sceditor
  $(function() {
 
    // depending if the sceditor is present, one of these events will be attached
    if ($.sceditor) {
      var container = $('.sceditor-container');
      $fa_char.instance = $($fa_char.area).sceditor('instance');
      $('textarea', container)[0].oninput = $fa_char.calculate; // source
      $('iframe', container).contents()[0].body.oninput = $fa_char.calculate; // wysiwyg
    } else $fa_char.area.oninput = $fa_char.calculate;
 
    $fa_char.calculate(); // get the current character count on page load
  });
});


This is the code I'm using right now that seems to only add it to the quick reply and ONLY when I dont hit "in all the pages" and only click "in sub forums" and "in the topics"

Hi @Enalahs89,

That script should work in the full editor. You did choose "in all the pages" as the script's placement, correct ?

Yes, but as I stated, when I do tick In all pages, it disappears from the quick editor and still wont show in the full editor. The only way I can get it to show at all is when I hit "in topics" but then it only shows in the quick reply.

EDIT: Or thought I said that anyway x,x

Oh, I see now. After taking a look at your forum I see there's an error on your forum in all the pages; the reason the counter isn't showing.

Do you have a script installed with the following content ?

Code:

#LGStatus{position:fixed;top:5px;right:5px}

If so, you should delete that script and place the contents under Display > Colors > CSS stylesheet.

Yes, it's the status bar widget. So, on the widget, just move that piece of code to the CSS or all code related to that?

Just the code in JS codes management which I mentioned earlier. That was CSS, and CSS only belongs in the CSS stylesheet.

Ah ok. I followed the tutorial on here about the status update thing and I think they said to add it there in one of the steps. But I deleted it and status bar still works so that's awesome. And now the quick reply and full editor works! Thank you so much! I was starting to get frustrated xD

Problem solved.

You're welcome ^^

Topic archived

Have a nice weekend