Scroll up to jQuery-Textarea Pages

Question

I am trying to add a “change log” to the jQuery mobile app. In the event of an error, the user should be able to see what went wrong. So I implemented a popup with a text box (see code below)

<!-- DIALOG Start--> <div data-role="popup" id="popupLog" data-overlay-theme="a" data-theme="b" style="max-width:400px;" class="ui-corner-all"> <div data-role="header" data-theme="b" class="ui-corner-top"> <h1>Logg-Einträge:</h1> </div> <div data-role="none" data-theme="b" class="ui-corner-bottom ui-content"> <textarea style="height: 120px; max-height: 120px" readonly="readonly" data-mini="true" cols="40" rows="8" id="popupTextArea"></textarea> <a href="#" data-role="button" data-inline="true" id="btn_textArea" data-rel="back" data-theme="c">OK</a> </div> </div> <!-- DIALOG End--> 

This popUp is populated with data and opens when a specific button is clicked:

 $('#showLog').click(function() { $("#popupDialog").popup("close"); // populate the textArea with the text $("#popupTextArea").text(sessionStorage.getItem("logStack")); // open popUp after a specific time setTimeout( function(){$('#popupLog').popup('open'); }, 1000 ); }); 

All functions work up to this point. The problem is this: when the user scrolls in the text box, closes popUp and opens it again, the position of the scroller remains the same - for example, the user scrolls down, closes popup and opens it again - popUp will be at the bottom of textarea agein. But I would like to get everything at the top of the text box when popUp opens again. To implement this, I implemented an “Ok” -Button in this popUp as follows, which closes popUp and sets Top scroll to 0:

 $('#btn_textArea').click(function() { // Setting position of the textArea to "0" -> But doesn't work..... $('#popupTextArea').scrollTop(0); ); }); 

I'm afraid at this moment, because the look of textArea is still the same. Do I need to upgrade or something else? I would be very grateful for any help ....

Answer 1

You can use the popupbeforeposition event to control the scrollTop property of the text area:

 $(document).ready(function(){ $("#exampleWindow").on("popupbeforeposition", function(evt, ui){ $(this).find("textarea").scrollTop(0); }); }); 

Here you have an example with a test to close and open a popup after scrolling textarea :

 $(document).ready(function() { $("#exampleWindow").on("popupbeforeposition", function(evt, ui) { $(this).find("textarea").scrollTop(0); }); }); 

 textarea { max-height: 100px; } 

 <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css"> <div data-role="popup" id="exampleWindow" data-theme="a" class="ui-corner-all" data-history="false"> <div style="padding:0px 20px 10px 20px;" align="center"> <h3>Example</h3> <textarea class="enableSelect" cols="40" rows="15" name="mytext" id="mytext" style="resize: vertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec quam consectetur, molestie sapien quis, fringilla felis. Vestibulum quam turpis, eleifend vel efficitur vel, pharetra eget lorem. In hac habitasse platea dictumst. Aliquam tincidunt massa vel maximus fermentum. Integer non velit arcu. Curabitur ultricies tincidunt nisi ultrices faucibus. Ut a purus dignissim, varius nisl vitae, ultricies dolor. Integer eget nisi sed ligula imperdiet accumsan ac eget lectus. Curabitur eu lacinia nunc, ac condimentum nunc. Etiam sit amet nulla massa. Etiam porta tortor ac sapien scelerisque, ac posuere mauris lacinia. Morbi id vestibulum nisl. Praesent dolor libero, bibendum quis molestie sit amet, posuere quis mi. Etiam scelerisque porttitor sem id vestibulum. Nullam nec suscipit arcu. Aenean semper in lorem eget aliquet.</textarea> </div> </div> <a id="openExampleWindow" href="#exampleWindow" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Open popup</a> <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="//code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.js"></script>