Change font size dynamically on specific paragraph <p> elements?

Question

The following JSFiddle splits texts into individual paragraph <p> boxes with a set text limit.

---

Is it possible to change the text size in the boxes according to the select option through contenteditable while still allowing to edit, removing the text limit and remaining the dynamic size property?

Link to Fiddle

If a new fiddle could be provided, it would be very much appreciated, as I am still new to coding. Thank You!

 $(function() { $('select').on('change', function() { var targets = $('p'), property = this.dataset.property; targets.css(property, this.value); }).prop('selectedIndex', 0); }); 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); }); } 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 { padding: 1.2em .5em; margin: 1.4em 0; border: 1px dashed #aaa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="styles"> <label>Font-size: <select data-property="font-size"> <option disabled> Select font-size: </option> <option> smaller </option> <option> 10px </option> <option> 12px </option> <option> 14px </option> <option> 16px </option> <option> 18px </option> <option> 20px </option> <option> larger </option> </select> </label> </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

Here you go JSFiddle

$('#FontSize').change(function(){
var fontsize = $(this).val();
$('textarea').css('fontSize',fontsize);
});

Answer 2

Try like this

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="styles"> <label>Font-size: <select data-property="font-size" onchange="$('#textarea1').css('font-size',this.value)"> <option disabled>Select font-size:</option> <option>smaller</option> <option>10px</option> <option>12px</option> <option>14px</option> <option>16px</option> <option>18px</option> <option>20px</option> <option>larger</option> </select></label> </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"> Test text </textarea><br> <br> <button id="go">Divide Text into Paragraphs</button> </div> 

Answer 3

I believe i have the answer for you:

$(function() {
  $('select').on('change', function() {
    var targets = $('p'),
      property = this.dataset.property;
    $("#content").css({'font-size': this.value});
  }).prop('selectedIndex', 0);
});

I changed the function in order to set the font-size to the div rather that the paragraph. Is this what you wanted? As it is what i gathered from the info provided.

https://jsfiddle.net/n9b6wju8/14/

Answer 4

I'm not sure if I'm understanding the problem... You can set the font size to the parent element (#content{font-size:whatever}) and inherit it (#content p {font-size:inherit} ). If you set the font size in the parent if will apply to the the already added paragraphs AND the new ones when you add them.

(Changes in the fiddle: Selector in the change of the select, CSS selectors/properties for "p" and "#content p")

(Answer edited for "same height" paragraphs) To get same height I added a sameheight(selector) function. I'm unsure about when you would like to trigger it, I've put it on select change and rearange(text). (Hope it helps. Fixed the height in function using outerHeight) ...and fiddle edited again: sameheight is also fired on window resize events.

function sameheight(selector){
var max_y=0;
var y=0;
$(selector).css('height','');
$(selector).each(function(){
  y=$(this).height();
  if(y>max_y) max_y=y;
});
$(selector).css('height',max_y);
}

 $(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; } function sameheight(selector){ var max_y=0; var y=0; $(selector).css('height',''); $(selector).each(function(){ y=$(this).outerHeight(); if(y>max_y) max_y=y; }); $(selector).css('height',max_y); } 

 #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"> <label>Font-size: <select data-property="font-size"> <option disabled> Select font-size: </option> <option> smaller </option> <option> 10px </option> <option> 12px </option> <option> 14px </option> <option> 16px </option> <option> 18px </option> <option> 20px </option> <option> larger </option> </select> </label> </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 5

You can inject a dynamic style element into the DOM and update it with the font size you're after. You could use an MV* framework to update its content.

$('#FontSize').change(function(){
    var fontsize = $(this).val();
    $('#style').remove(); //yes, there are better ways to update its content
    $('head').append('<style id="style">#content { font-size: '+fontsize + '}</style>');
});

Fiddled: https://jsfiddle.net/ovfiddle/m75gre8o/1/

Answer 6

这应该有所帮助：

$('#FontSize').change(function(){ var fontsize = $(this).val(); $('textarea').css('fontSize',fontsize); });

Answer 7

To change of font size of the div and text area:

  $(function() {
        $('select').change(function() {
            var fontsize = $(this).val();
            $('#textarea1').css('fontSize',fontsize);
            $('#content').css('fontSize',fontsize);
        }).prop('selectedIndex', 0);
  });

to keep the height of your text area: in CSS

textarea {
    width: 95%;
    height: 200px;
}

use px aslo instead em

Answer 8

I have created a fork of your fiddle and have edited(added) the event handler of select. I have added some code in their which maintains the font-size of editable p elements. Using that reference you can then apply all your styles as per your requirement.

Don't forget to mark it right and upvote if you find my answer right.

JS Fiddle Fork

  targets.parent().find('style').remove();
  $('<style>[contenteditable="true"]
  {'+property+':'+this.value+'}\n[contenteditable="true"]:focus{'+property+':'+this.value+'}</style>').prependTo(targets.parent());
  {'+property+':'+this.value+'}[contenteditable="true"]:focus{'+property+':'+this.value+'}</style>');

Answer 9

Try this

 $('#FontSize').change(function(){ var fontsize = $(this).val(); $('textarea, #content p').css('fontSize',fontsize); }); $('#go').click(function(){ var fontsize = $('#FontSize').val(); $('#content').css('fontSize',fontsize); }); $(function() { $('select').on('change', function() { var targets = $('p'), property = this.dataset.property; targets.css(property, this.value); }).prop('selectedIndex', 0); }); var btn = document.getElementById('go'), textarea = document.getElementById('textarea1'), content = document.getElementById('content'), chunkSize = 400; 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); }); } 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%; height: 100px; } 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 { padding: 1.2em .5em; margin: 1.4em 0; width: 200px; height: 200px; border: 1px dashed #aaa; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div id="styles"> <label>Font-size: <select id="FontSize" data-property="font-size"> <option disabled> Select font-size: </option> <option> smaller </option> <option> 10px </option> <option> 12px </option> <option> 14px </option> <option> 16px </option> <option> 18px </option> <option> 20px </option> <option> larger </option> </select></label> </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>