CODEWITHSUNDEEP
jqueryhtmlcss
user5742826
user5742826

Reputation:

Resize property for text in html

How to resize text inside a div by the user in front end .

for div resizing in the front by the user we can use css like

div {
    resize: both;
    overflow: auto;
}

or using jquery 

$( "#div-id" ).resizable();

To edit text in a div in the front we can use 

<div id="div-id"  contenteditable="true"> Type text</div>

But how to make the resizable text inside a div .

EXAMPLE:

User can change the text inside this div <div id="div-id" contenteditable="true"> Type text</div> , but how user can increase the text size in that div ?.

Note : actually this font size able to change by user . Currently the user can edit the text . In the same way user able to do increase the font size

Thank you

Upvotes: 0

Views: 98

Answers (3)

CMartins
CMartins

Reputation: 3293

You can use an increasing / Decreasing variable for the size and some jQuery Font attributes.

<a href="#"><p class="myclass">test</p></a>


mySize = 12;
$(this).click(function ()
              {
                mySize = mySize + 2;
                $(".myclass").css("font-size", mySize + "px" );
                console.log(mySize);

});

Upvotes: 0

Jarek
Jarek

Reputation: 194

You can grab on resize event

$( function() {
  var basefont = 14;
  var scale = 1;
  var width = $( "#div-id" ).width();
  $( "#div-id" ).resizable();
  $( "#div-id" ).on('resize', function() {
    scale = $(this).width() / width;
    $( "#div-id" ).css('font-size', scale*basefont);
  }); });

Example:

https://jsfiddle.net/e3q3zrrk/1/

Upvotes: 2

user31782
user31782

Reputation: 7589

I second Carlos's suggestion. You could first define how the mysize should change when resizing the div like this: 

var multiplicate = 0.7
var mySize = multiplicate*$( "#div-id" ).width();  
 $(".myText").css( "font-size", mySize + "px");

Upvotes: 0

Related Questions