1

I have a long story that I want people to read on their mobile phone. The user will be able to have the ability to swipe back and forth between pages. I don't want it to just scroll up and down. Because all mobile phones have different window sizes, I am having trouble figuring out how to allow my story to completely fill the page, before it creates another new page. In other words breaking up my story to equal lengths of a window size.

I have tried some jquery that adds characters one at a time until it reaches window size but how do I dynamically create another page if the runs longer than a single page?

     <style type=text/css>
          div {height:10em; width:auto; line-height:1em; font-size:1em; }
     </style>

       <div id="longContent"><p>Lorem ipsum...</p></div>
       <div id="newDiv"></div>
     <script>
       $(document).on("pageinit",function(){
       $('#longContent').each(function(){
       var text = $("#longContent").html().split(' '),
          len = text.length,        
          result = []; 
       var maxHeight = $(window).height();
       var newHeight =$("#newDiv").height();

        for( var i = 0;newHeight <= maxHeight && i<len; i++ ) {
             result[i] = text[i]; }

         $("#newDiv").html(result.join(' ')); 

         });        
      });
</script>

I appreciate any help. Thanks so much!

4

0 回答 0