Issue when apply this plugin in a dialog with "position:fixed" and then user scrolls the page.

[realdah]

In my case, I am using bootstrap modal dialog for example, if I have a long page, even with a modal dialog opening, I can still scroll the page body behind.

Then, we will see the character indicator is scrolling along with page body because it is using "position:absolute" for positioning. please see screen shot below.

To solve this issue, I did two things together, one thing is the issue #45 which I raised for self protection.

Then, based on #45 , I changed my outside code to listen to the scroll event, when first scroll event happening, I saved the current focused element and call his "blur" event to destroy the label, then, after scroll complete, I called the element with "focus" event to recreate the label, then the new label will take the right position for sure.

However, since in #45 with isolated context, you choose to reuse existing label which means the label's position will not change, thus, that solution can't be used along with this issue.

Anyway, a proposed solution might be:

1. better plugin internally listen to scroll event, when scroll event starts, hide/destroy the label
2. when scroll events complete, re-calculate the position and then show/new the label.

Similar code like below

    function HandlingScrolledEvent() {
         // show/new the label
    }

    var timerHandle;
    function throttlingScrollEvents() {
        if(timerHandle) {
            window.clearTimeout(timerHandle);
            timerHandle = null;
        }

       // hide/destroy existing label
        timerHandle = window.setTimeout(HandlingScrolledEvent, 500);
    }

    //listen to global scroll event
    $(window).scroll(throttlingScrollEvents);

[mimo84]

I would rather prefer not to use time outs to avoid potential performance problems. Do you have any chance to recreate the issue in a plunk so I can study what's going on in mode details?
Thanks

[realdah]

Hi mimo, please find http://jsfiddle.net/Yg76w/2/ for details, you can try and should see the issue easily.

BTW:
time outs should not be a problem in my opinion, because every time, It will be canceled if next scroll event come within 500 ms.

in some browser especially in IE8, there will be huge amount of scroll events being triggered when user scroll for a short time. if we don't throttle these scroll events in the middle, then, there will be a performance issue.

[mimo84]

Hi @realdah I didn't have too much time to spend on the plugin in the past few weeks. If you applied this fix and it works for you would you mind to fork and apply your fix to this issue?
Thanks

[mimo84]

Hi @realdah, I changed your fiddle to follow @oozrafa suggestion, appending the badge just after the input and changing a bit the css. Please have a look at the fiddle: http://jsfiddle.net/Yg76w/3/

[realdah]

Sorry, recently in a crab project, I just saw your reply today. looks pretty good if this can be solved by pure css with relative position to text area. I tried fiddle, looks good to me. : -)

[mimo84]

Thanks to @kylerbeetun we can finally close this ticket :)
He added a new option appendToParent: true which solve this issue.
I updated the fiddle as well: http://jsfiddle.net/Yg76w/4/

[esemlabel]

It doesnt work when parent element is <span>. It only works when parent element is <div>.

Update: the problem exist only if parent element doesn't have block or similar css styling. In other cases all seems to work fine.

[kylerbeetun]

@esemlabel it works if the parent element is a <span>. See this updated fiddle of @mimo84 -> http://jsfiddle.net/Yg76w/8/ .