Ways to dynamically insert new pages | displaying multiple pages within a single page

Question

Ways to dynamically insert new pages | displaying multiple pages within a single page

Is there a way to make multiple 'pages' appear dynamically within a wrapper? For example, if I have a website with a text area where users can enter information, I want that information to be displayed in a div with fixed dimensions. When the content exceeds the height of the div, I would like additional divs to be added dynamically to display the overflowed text. This is what I envision:

<div id="app">
  <div style="display: flex; flex-direction: column;">
    <span>
      <strong>Add text:</strong>
    </span>
    <textarea v-model="text" id="textarea" name="textarea" rows="6" cols="50" />
  </div>

  <div v-for="page in pages" :key="page" class="page">
    <span>
      <strong>Page 1</strong>
    </span>
    <div class="editor-area">{{text}}</div>

    <!-- The goal here is to automatically add a 'second page' when the content overflows 
    the first page. The extra text should then flow into the second page.-->

  </div>
</div>

I'm looking for a dynamic solution so users can input as much content as they need.

Here's a simple codesandbox with basic code for reference.

Thank you!

javascript html css vue.js vuejs2

Answer 1

Answer №1

Below is a flawed implementation that requires your attention, presenting two unresolved issues:

An accurate calculation of the character count that fits within your fixed div:

The variable aproxlength should reflect the estimated number of characters accommodated by your fixed div. It's recommended to input an approximate value based on your browsing experience, but keep in mind this can vary across browsers.

To address this problem effectively, consider creating a hidden div and filling it until overflowing occurs. This method provides a precise solution for determining the optimal aproxlength for individual clients. Check out this example implementation using pure JavaScript: Related implementation on pure javascript

A proper method for text splitting:

Avoid blindly splitting the text as demonstrated, as it may result in arbitrary breaks. It's essential to split the text at whitespace or punctuation marks instead.

<template>
  <div id="app">
    <div style="display: flex; flex-direction: column;">
      <span>
        <strong>Add text:</strong>
      </span>
      <textarea id="textarea" name="textarea" rows="6" cols="50" v-model="text"/>
    </div>

    <div v-for="page in pagesc" :key="page" class="page">
      <span>
        <strong>Page 1</strong>
      </span>
      <div class="editor-area">{{text.slice((page-1)*approxlength,page*approxlength)}}</div>

      <!-- Ideally, when the 'text height' exceeds the div's height,
    a new 'second page' should be added. The excess text from the first 
      page must flow into the second page.-->
    </div>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      pages: 1,
      approxlength: 330,
      text:
        "Lorem Ipsum is simply simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic."
    };
  },
  computed: {
    pagesc() {
      return Math.floor(this.text.length/this.approxlength)+1
    }
  }
};
</script>

Answer 2

Below is a flawed implementation that requires your attention, presenting two unresolved issues:

An accurate calculation of the character count that fits within your fixed div:

The variable aproxlength should reflect the estimated number of characters accommodated by your fixed div. It's recommended to input an approximate value based on your browsing experience, but keep in mind this can vary across browsers.

To address this problem effectively, consider creating a hidden div and filling it until overflowing occurs. This method provides a precise solution for determining the optimal aproxlength for individual clients. Check out this example implementation using pure JavaScript: Related implementation on pure javascript

A proper method for text splitting:

Avoid blindly splitting the text as demonstrated, as it may result in arbitrary breaks. It's essential to split the text at whitespace or punctuation marks instead.

<template>
  <div id="app">
    <div style="display: flex; flex-direction: column;">
      <span>
        <strong>Add text:</strong>
      </span>
      <textarea id="textarea" name="textarea" rows="6" cols="50" v-model="text"/>
    </div>

    <div v-for="page in pagesc" :key="page" class="page">
      <span>
        <strong>Page 1</strong>
      </span>
      <div class="editor-area">{{text.slice((page-1)*approxlength,page*approxlength)}}</div>

      <!-- Ideally, when the 'text height' exceeds the div's height,
    a new 'second page' should be added. The excess text from the first 
      page must flow into the second page.-->
    </div>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      pages: 1,
      approxlength: 330,
      text:
        "Lorem Ipsum is simply simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic."
    };
  },
  computed: {
    pagesc() {
      return Math.floor(this.text.length/this.approxlength)+1
    }
  }
};
</script>

Ways to dynamically insert new pages | displaying multiple pages within a single page

Answer №1

Similar questions

Unable to generate StumbleUpon traffic for a URL through AJAX due to the API returning text/plain

What is the method to retrieve the parameter names of a function in TypeScript?

Utilizing Cordova for Windows 8.1 in Visual Studio 2015 for external image retrieval and insertion into img tag

Exploring the DOM beyond the ng-app scope

What is the proper sequence for binding jQuery to elements?

Adding a specific element to an array using JQuery

Creating Stylish Buttons with Icons in Bootstrap 4

Identifying the device name in Safari on iOS 13 despite the inaccurate display of the user agent - a step-by-step guide

Tips for transferring PHP variables into JavaScript variables?

What is the best way to empty a backbone collection in preparation for loading new data?

The @output decorator in Angular5 enables communication between child and

Is there a way to retrieve the final value from the srcset attribute using jQuery?

Printing a Page Using Angular 5

Making an input field in Vue automatically read-only when a specific value is met

Formatting the numbers for an unordered list located outside of the content

Generate a graph by utilizing $getJSON and ChartJS

Error encountered while attempting to import a Bootstrap JavaScript file in webpack

Obtain user input from a form and assign it to a variable in a jQuery AJAX

Facing an error with Angular.js

Chrome only triggering jQuery scroll event once