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.

Typing field problem - Character Counter Confliction

View previous topic View next topic Go down

In progress Typing field problem - Character Counter Confliction

Post by Enalahs89 on October 23rd 2015, 8:32 am

So, whenever I go to type a post out the words come out fine for a few then the little line showing where you are when you're typing suddenly switches back to the very top of the field before the very first word. Plus my spellcheck isn't working. (Yes my Firefox browser plugin and such are fine as it works on all other websites like facebook and this site, just not on mine) I don't have either of these problems on any other website but my own site. It's been doing this for a while but it's become more frequent tonight.

Is there maybe some type of code that I messed up on in the CSS or something that might cause this? I can provide a test account if requested.

My site can be found here if it's needed.

Any help is much appreciated.

EDIT:: I inspected the page with my text editor and checked the debugger section. It showed this

Code:

$(function(){if(!document.getElementById('text_editor_textarea'))return;window.$fa_char={area:document.getElementById('text_editor_textarea'),current:0,maximum:/page_profil=signature/.test(window.location.search)?1000:60000,used:null,remain:null,instance:null,calculate:function(){$fa_char.current=($fa_char.instance?$fa_char.instance.val():$fa_char.area.value).length;$fa_char.used.innerHTML=$fa_char.current;$fa_char.remain.innerHTML='<span '+($fa_char.current>=$fa_char.maximum?'style="color:#F00"':'')+'>'+($fa_char.maximum-$fa_char.current)+'</span>'}};var node=document.createElement('DIV');node.id='faCharCounter';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)';$fa_char.area.parentNode.insertBefore(node,$fa_char.area);$fa_char.used=document.getElementById('faCharUsed');$fa_char.remain=document.getElementById('faCharRemain');$(function(){if($.sceditor){var container=$('.sceditor-container');$fa_char.instance=$($fa_char.area).sceditor('instance');$('textarea',container)[0].oninput=$fa_char.calculate;$('iframe',container).contents()[0].body.oninput=$fa_char.calculate}else $fa_char.area.oninput=$fa_char.calculate;$fa_char.calculate()})});

There's a few red spots in the code but I'm not sure how to fix it x,x The red spots seem to be the text editor part.

EDIT 2:: I did a little checking and the issue seems to be with the word counter. I followed Ange's tutorial on it. But it seems to be conflicting and causing the errors I listed at the top of this page.

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
 });
});

Is the code. Can anyone see where the error is? x,x I'm afraid I'm still learning to read HTML and Java so I'm unsure where the confliction is coming from.

Enalahs89
Forumember

Female Posts : 54
Reputation : 5
Language : English
Location : In your dreams

http://astariel.userboard.net

Back to top Go down

In progress Re: Typing field problem - Character Counter Confliction

Post by Ange Tuteur on October 23rd 2015, 12:05 pm

Hi @Enalahs89,

It could be something with the event handler I used. Try and replace the script with this :
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).on('input', $fa_char.calculate); // source
      $('iframe', container).contents().find('body').on('input', $fa_char.calculate); // wysiwyg
    } else $fa_char.area.oninput = $fa_char.calculate;
 
    $fa_char.calculate(); // get the current character count on page load
  });
});

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Typing field problem - Character Counter Confliction

Post by Enalahs89 on October 23rd 2015, 12:08 pm

Just tried that one and it's still doing the same thing. Doesn't let the spellcheck work and at some point sends the typing cursor back to the top of the field. x.x

Enalahs89
Forumember

Female Posts : 54
Reputation : 5
Language : English
Location : In your dreams

http://astariel.userboard.net

Back to top Go down

In progress Re: Typing field problem - Character Counter Confliction

Post by Ange Tuteur on October 23rd 2015, 1:10 pm

I created an account to try and experience this problem. What a Face

Are you using any browser in particular ?

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Typing field problem - Character Counter Confliction

Post by Enalahs89 on October 23rd 2015, 1:13 pm

Just approved you. I'm using Firefox but my boyfriend uses Chrome and says he's having the spell check issue too. I can make your account admin too if that helps any?

Also, I've noticed the first issue (cursor going back to the top) after you've been typing for a little bit (just in time to screw people up x,x ) and the spell check just doesn't work until you're like 5-10 words away from it (instead of doing it as you type like normal) and even then it's iffy on if it wants to pop up or not.

Enalahs89
Forumember

Female Posts : 54
Reputation : 5
Language : English
Location : In your dreams

http://astariel.userboard.net

Back to top Go down

In progress Re: Typing field problem - Character Counter Confliction

Post by Ange Tuteur on October 23rd 2015, 1:44 pm

Thanks. Smile

I didn't have the cursor going back to the top, but I did have the spell check not appear when I swapped editor modes.


Although, I have that happen here too. I think that may just be to the browser having to focus on a new text input. ( source and wysiwyg use two different typing areas )

Do you do anything specific when the cursor returns to the top of the textarea ? blackeye

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Typing field problem - Character Counter Confliction

Post by Enalahs89 on October 23rd 2015, 1:51 pm

Nope. One minuet I'll be typing away and the next I look up and it's back at the top with half of my last sentence now at the top of the page. Sometimes it's fixed by me restarting my computer but lately that isn't fixing it. I've scanned my computer with three different antiviruses to see if that would help and it hasn't. It only does it when I've got the character counter on.

As for the spell check, it seems it's not working in the wysiwyg but works in the source mode. Is there anything I can do to fix that? Cause it doesn't do it when I've got the character counter turned off.

EDIT: Just double checked with it turned off and it works in both modes. But doesn't work in wysiwyg mode with the code on.

Enalahs89
Forumember

Female Posts : 54
Reputation : 5
Language : English
Location : In your dreams

http://astariel.userboard.net

Back to top Go down

In progress Re: Typing field problem - Character Counter Confliction

Post by Ange Tuteur on October 23rd 2015, 2:07 pm

Hmm.. it's very strange. blackeye I'm not sure how it affects the typing when it only counts the characters, but as a last resort try replacing it with this :
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');
      $fa_char.instance.keyUp($fa_char.calculate);
    } else $fa_char.area.oninput = $fa_char.calculate;
 
    $fa_char.calculate(); // get the current character count on page load
  });
});

I changed the method from input to keyUp, if that doesn't work, I'd recommend disabling it for now.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Typing field problem - Character Counter Confliction

Post by Enalahs89 on October 23rd 2015, 2:38 pm

Well, that nearly fixed it. Now it highlights the misspelled word but... only parts of it x,x

http://prntscr.com/8uemaz

And the nisSeperater is the text cursor hopping to the top again x,x
I just cannot figure out why the counter is having these conflictions Dx

EDIT: Hmm. I was testing out the cursor jumping thing... it seems to happen after I quickly backspace twice after hitting space AFTER typing a word @_@

Ow. My head is starting to hurt. I can't figure out why I'm having such problems when no one else is x,x Maybe something in my CSS is conflicting? Or maybe another Java page? x,x

Enalahs89
Forumember

Female Posts : 54
Reputation : 5
Language : English
Location : In your dreams

http://astariel.userboard.net

Back to top Go down

In progress Re: Typing field problem - Character Counter Confliction

Post by Ange Tuteur on October 23rd 2015, 3:17 pm

It has me boggled too, because I couldn't get it to happen. Confused

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Typing field problem - Character Counter Confliction

Post by Enalahs89 on October 23rd 2015, 3:38 pm

I don't know. This majorly sucks. The character counter was a wonderful addition to my site since it's for roleplayers but i guess I'll just have to disable it. Thanks for trying, Ange.

Enalahs89
Forumember

Female Posts : 54
Reputation : 5
Language : English
Location : In your dreams

http://astariel.userboard.net

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