javascript - I want to resize the font-size, while resizing the the table elements -
while increasing height , width of table font-size should increased , vice versa.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui resizable - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes /smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #resizable { width: 150px; height: 150px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; } </style> <script> $(function() { $("#resizable").resizable(); }); </script> </head> <body> <div class="ui-widget-content"> <table id="resizable"> <tr> <th>i want resize font-size, directly proportionally while resizing table</th> </tr> </table> </div> </body> </html>
maybe approach
http://jsfiddle.net/nguk1tfu/11/
$(function() { $( "#resizable" ).resizable(); old_width = $( "#resizable" ).width(); old_height = $( "#resizable" ).height(); $( "#resizable" ).resize(function(){ current_widht = $( "#resizable" ).width(); current_height = $( "#resizable" ).height(); // shoud de index font decrease or increase r = (current_widht/old_width) * (current_height/old_height); if( r >= 1) { r = r*2; // can change $( "#resizable" ).css('font-size', 11 + r); } else { r = r*2; $( "#resizable" ).css('font-size', 11 - r); } }); });
Comments
Post a Comment