问题:

Can html text in p tag is resizable using jquery-ui or without p tag in a div tag is resizable? I have done resizing the image using jquery ui from following example but text is not getting resized http://jqueryui.com/demos/resizable/.

回答1:

You may use resize event handler. The trick is how to calculate new font size. Check this solution as a variant:

Html:

     Resizable
     Quis non magna sagittis, et cras tortor nunc? Enim, lectus et quis penatibus enim augue eros, dis sit sit urna cras placerat sociis porta

Javascript:

var initDiagonal; var initFontSize;  $(function() {     $("#resizable").resizable({         alsoResize: '#content',         create: function(event, ui) {             initDiagonal = getContentDiagonal();             initFontSize = parseInt($("#content").css("font-size"));         },         resize: function(e, ui) {             var newDiagonal = getContentDiagonal();             var ratio = newDiagonal / initDiagonal;              $("#content").css("font-size", initFontSize + ratio * 3);         }     }); });  function getContentDiagonal() {     var contentWidth = $("#content").width();     var contentHeight = $("#content").height();     return contentWidth * contentWidth + contentHeight * contentHeight; }

You may look this solution at jsFiddle: jsFiddle link

回答2:

Text sizing has nothing to do with jQuery specifically. You can tie a CSS property to a slider, however.

$('#slideBar').slider({     startValue: 12,     minValue: 0,     maxValue: 100,     stop: function(e, ui) {          $("#text").css({fontSize: ui.value + 8});      } });

转载请标明出处:Can text be resizable using jquery-ui?

文章来源: Can text be resizable using jquery-ui?

标签

content