Question

I’ve tried to recreate my issue in jsfiddle:

http://jsfiddle.net/erU5J/72/

I have a textarea:

When click on it expands vertically downwards by about 7 rows. Within the same method that helps achieve this I also have some code that makes it possible for the textarea to auto resize when text is typed inside or deleted.

Anyway as you can see I have a camera icon and when this is clicked the user can immediately select one photo which will appear underneath the text area.

If I select photo without clicking in the textarea to expand it, then click in the textarea to expand it, holding onto enter the auto resize of the textarea works.. basically pushing the photo down every time the textarea expands.

If I expand the textarea first then select a photo, then hold onto enter in the textarea the auto resize of textarea doesn’t work and instead I get a scroll bar showing. If I click to close the textarea (an X button not shown in photo) then click in the textarea to expand/open it again and then hold onto enter the autoresize of the textarea works again.

It seems .change() doesn’t seem to care for any binding I’ve done.

Here is my code for image selection:

    $(function() {

    $('div.microposts').on('click', 'li#addImage > span', function() {

        var form = $(this).parents('form#new_micropost'),
            fileField = form.find('input#micropost_image');

            fileField.trigger('click');
    });

});

$(function() {

    $('input#micropost_image').change(function (evt){ //.off() make sautoresize work

                    var image = evt.target.files[0],
                        form = $(this).parents('form#new_micropost'),
                        imagePreviewBox = form.find('div.imagePreview'),
                        reader = new FileReader();

                            reader.onload = function(evt) {
                                var resultdata = evt.target.result,
                                    img = new Image();

                                    img.src = evt.target.result;
                                    imagePreviewBox.show().prepend(img);

                            };

                        reader.readAsDataURL(image);    

    });
});

Heres the code for textarea:

$(function() {

    $("div.microposts").on("focus", "textarea#micropostBox", function() {

        var micropostForm = $(this).parent();
            micropostBox = micropostForm.find('textarea#micropostBox'),
            micropostButton = micropostForm.find("input#micropostButton"),
            xButton = micropostForm.find("div.xButton"),
            removeAutosizeStyle = function() { 
                micropostForm.parents('html').find('textarea.autosizejs').remove(); 
            };

                removeAutosizeStyle();

                micropostBox.prop('rows', 7);
                    micropostForm.find('div#micropostOptions').removeClass('micropostExtraOptions');
                    micropostForm.find('div#postOptions').show();
                    $.trim(micropostBox.val()) == '' ? 
                        micropostButton.addClass("disabledMicropostButton").show() 

                        :

                        micropostButton.prop('disabled', false);

                             micropostBox.hide()
                                .removeClass("micropost_content")
                                .addClass("micropost_content_expanded").show().autosize();  

                                    xButton.show();
                                        micropostButton.prop('disabled', true);


        micropostBox.off().on("keypress input change", function () {

                      micropostButton.prop({ disabled: !$.trim($(this).val()) != ''});

                          $.trim($(this).val()) != '' ?
                            micropostButton
                                .removeClass("disabledMicropostButton")
                                .addClass("activeMicropostButton") 

                                :

                            micropostButton
                                .removeClass("activeMicropostButton")
                                .addClass("disabledMicropostButton");

                    });

                    xButton.on('click', function() {

                        micropostBox.removeClass("micropost_content_expanded").addClass("micropost_content");
                        micropostForm.find('div#micropostOptions').addClass('micropostExtraOptions');
                        micropostBox.val("");
                        micropostForm.find('div#postOptions').hide();
                        xButton.hide();
                        micropostButton.hide();
                        micropostBox.removeAttr('style');
                        micropostBox.prop('rows', 0);
                        micropostForm.find('.imagePreview > img').remove();
                        micropostForm.find('.imagePreview').hide();
                        removeAutosizeStyle();
                    });

    });

});

I apologise if my code appears messy.

Kind regards

Answer 1

After digging through my code here and there I discovered the issue is coming from the autosize pluging I’m using.

The scroll bar problem occurs when I open and close developer tools in the browser I’m viewing my website in. So it’s an issue with the page resizing.

I play around with the text area and it’s totally fine but as soon as I open or close developer tools i get this same scroll bar issue.