Change Width and Height of Element Dynamically?

Question

Is it possible, with the following fiddle, to dynamically control the width and height of all paragraph <p> elements using the <input> elements with a <button> to apply the change?

The following fiddle converts text into equal divided paragraphs and therefore, when changing the width and size of divided paragraphs, the paragraphs all need to consist of the same amount of characters.

However, a preset size for the paragraphs should already apply and can be customisable for the user, through the use of the input element.

If an updated fiddle could be provided, it would be very much appreciated, as I am still new to coding.

Thank You!

When the width and height is adjusted, the text needs to automatically flow into the next paragraph when filled.当调整宽高时，文字需要在填充时自动流入下一段。 Therefore, is it possible to change the chunkSize element to automatically overwrite the character limit when the width and height is changed?

Fiddle

 $(function() { $('select').on('change', function() { //Lets target the parent element, instead of P. P will inherit it's font size (css) var targets = $('#content'), property = this.dataset.property; targets.css(property, this.value); sameheight('#content p'); }).prop('selectedIndex', 0); }); $(window).resize(function() { sameheight('#content p'); }); var btn = document.getElementById('go'), textarea = document.getElementById('textarea1'), content = document.getElementById('content'), chunkSize = 100; btn.addEventListener('click', initialDistribute); content.addEventListener('keyup', handleKey); content.addEventListener('paste', handlePaste); function initialDistribute() { var text = textarea.value; while (content.hasChildNodes()) { content.removeChild(content.lastChild); } rearrange(text); } function rearrange(text) { var chunks = splitText(text, false); chunks.forEach(function(str, idx) { para = document.createElement('P'); para.setAttribute('contenteditable', true); para.textContent = str; content.appendChild(para); }); sameheight('#content p'); } function handleKey(e) { var para = e.target, position, key, fragment, overflow, remainingText; key = e.which || e.keyCode || 0; if (para.tagName != 'P') { return; } if (key != 13 && key != 8) { redistributeAuto(para); return; } position = window.getSelection().getRangeAt(0).startOffset; if (key == 13) { fragment = para.lastChild; overflow = fragment.textContent; fragment.parentNode.removeChild(fragment); remainingText = overflow + removeSiblings(para, false); rearrange(remainingText); } if (key == 8 && para.previousElementSibling && position == 0) { fragment = para.previousElementSibling; remainingText = removeSiblings(fragment, true); rearrange(remainingText); } } function handlePaste(e) { if (e.target.tagName != 'P') { return; } overflow = e.target.textContent + removeSiblings(fragment, true); rearrange(remainingText); } function redistributeAuto(para) { var text = para.textContent, fullText; if (text.length > chunkSize) { fullText = removeSiblings(para, true); } rearrange(fullText); } function removeSiblings(elem, includeCurrent) { var text = '', next; if (includeCurrent && !elem.previousElementSibling) { parent = elem.parentNode; text = parent.textContent; while (parent.hasChildNodes()) { parent.removeChild(parent.lastChild); } } else { elem = includeCurrent ? elem.previousElementSibling : elem; while (next = elem.nextSibling) { text += next.textContent; elem.parentNode.removeChild(next); } } return text; } function splitText(text, useRegex) { var chunks = [], i, textSize, boundary = 0; if (useRegex) { var regex = new RegExp('.{1,' + chunkSize + '}\\\\b', 'g'); chunks = text.match(regex) || []; } else { for (i = 0, textSize = text.length; i < textSize; i = boundary) { boundary = i + chunkSize; if (boundary <= textSize && text.charAt(boundary) == ' ') { chunks.push(text.substring(i, boundary)); } else { while (boundary <= textSize && text.charAt(boundary) != ' ') { boundary++; } chunks.push(text.substring(i, boundary)); } } } return chunks; }

 #text_land { border: 1px solid #ccc; padding: 25px; margin-bottom: 30px; } textarea { width: 95%; } label { display: block; width: 50%; clear: both; margin: 0 0 .5em; } label select { width: 50%; float: right; } * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: monospace; font-size: 1em; } h3 { margin: 1.2em 0; } div { margin: 1.2em; } textarea { width: 100%; } button { padding: .5em; } p { /*Here the sliles for OTHER paragraphs*/ } #content p { font-size: inherit; /*So it gets the font size set on the #content div*/ padding: 1.2em .5em; margin: 1.4em 0; border: 1px dashed #aaa; overflow: hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="styles"> <h5>Size:</h5> <br> <label>Height:</label> <input> <br> <label>Width:</label> <input> <br> <button> Change Size </button> </div> <div> <h3>Paste text in the field below to divide text into paragraphs..</h3> <textarea id="textarea1" placeholder="Type text here, then press the button below." rows="5"> </textarea> <br> <br> <button id="go">Divide Text into Paragraphs</button> </div> <div> <h3 align="right">Divided Text Will Appear Below:</h3> <hr> <div id="content"></div> </div>

Answer 1

To resize elements dynamically you can use this code (for example):

$(window).resize(function(){
   var newwidth = "10px";
   var newheight = "10px";      
   $("#content p").css({"height": newheight, "width": newwidth });
});

just set the variables newwidth and newheight to a new values that inputted by user.

Answer 2

Just added a little function at the end, and gave the input fields a button an ID.

https://jsfiddle.net/sa2L4fas/2/

 $(function() { $('select').on('change', function() { //Lets target the parent element, instead of P. P will inherit it's font size (css) var targets = $('#content'), property = this.dataset.property; targets.css(property, this.value); sameheight('#content p'); }).prop('selectedIndex', 0); }); $(window).resize(function() { sameheight('#content p'); }); var btn = document.getElementById('go'), textarea = document.getElementById('textarea1'), content = document.getElementById('content'), chunkSize = 100; btn.addEventListener('click', initialDistribute); content.addEventListener('keyup', handleKey); content.addEventListener('paste', handlePaste); function initialDistribute() { var text = textarea.value; while (content.hasChildNodes()) { content.removeChild(content.lastChild); } rearrange(text); } function rearrange(text) { var chunks = splitText(text, false); chunks.forEach(function(str, idx) { para = document.createElement('P'); para.setAttribute('contenteditable', true); para.textContent = str; content.appendChild(para); }); sameheight('#content p'); } function handleKey(e) { var para = e.target, position, key, fragment, overflow, remainingText; key = e.which || e.keyCode || 0; if (para.tagName != 'P') { return; } if (key != 13 && key != 8) { redistributeAuto(para); return; } position = window.getSelection().getRangeAt(0).startOffset; if (key == 13) { fragment = para.lastChild; overflow = fragment.textContent; fragment.parentNode.removeChild(fragment); remainingText = overflow + removeSiblings(para, false); rearrange(remainingText); } if (key == 8 && para.previousElementSibling && position == 0) { fragment = para.previousElementSibling; remainingText = removeSiblings(fragment, true); rearrange(remainingText); } } function handlePaste(e) { if (e.target.tagName != 'P') { return; } overflow = e.target.textContent + removeSiblings(fragment, true); rearrange(remainingText); } function redistributeAuto(para) { var text = para.textContent, fullText; if (text.length > chunkSize) { fullText = removeSiblings(para, true); } rearrange(fullText); } function removeSiblings(elem, includeCurrent) { var text = '', next; if (includeCurrent && !elem.previousElementSibling) { parent = elem.parentNode; text = parent.textContent; while (parent.hasChildNodes()) { parent.removeChild(parent.lastChild); } } else { elem = includeCurrent ? elem.previousElementSibling : elem; while (next = elem.nextSibling) { text += next.textContent; elem.parentNode.removeChild(next); } } return text; } function splitText(text, useRegex) { var chunks = [], i, textSize, boundary = 0; if (useRegex) { var regex = new RegExp('.{1,' + chunkSize + '}\\\\b', 'g'); chunks = text.match(regex) || []; } else { for (i = 0, textSize = text.length; i < textSize; i = boundary) { boundary = i + chunkSize; if (boundary <= textSize && text.charAt(boundary) == ' ') { chunks.push(text.substring(i, boundary)); } else { while (boundary <= textSize && text.charAt(boundary) != ' ') { boundary++; } chunks.push(text.substring(i, boundary)); } } } return chunks; } $("#changeSize").click(function() { $("#content p").css({ "width": $("#width").val(), "height": $("#height").val() }); })

 #text_land { border: 1px solid #ccc; padding: 25px; margin-bottom: 30px; } textarea { width: 95%; } label { display: block; width: 50%; clear: both; margin: 0 0 .5em; } label select { width: 50%; float: right; } * { box-sizing: border-box; padding: 0; margin: 0; } body { font-family: monospace; font-size: 1em; } h3 { margin: 1.2em 0; } div { margin: 1.2em; } textarea { width: 100%; } button { padding: .5em; } p { /*Here the sliles for OTHER paragraphs*/ } #content p { font-size: inherit; /*So it gets the font size set on the #content div*/ padding: 1.2em .5em; margin: 1.4em 0; border: 1px dashed #aaa; overflow: hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="styles"> <h5>Size:</h5> <br> <label>Height:</label> <input id="height"> <br> <label>Width:</label> <input id="width"> <br> <button id="changeSize"> Change Size </button> </div> <div> <h3>Paste text in the field below to divide text into paragraphs..</h3> <textarea id="textarea1" placeholder="Type text here, then press the button below." rows="5"> </textarea> <br> <br> <button id="go">Divide Text into Paragraphs</button> </div> <div> <h3 align="right">Divided Text Will Appear Below:</h3> <hr> <div id="content"></div> </div>