Can text be resizable using jquery-ui?

后端 未结 2 1869
说谎
说谎 2020-12-30 15:54

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 tex

2条回答
  •  悲&欢浪女
    2020-12-30 16:49

    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

提交回复
热议问题