I wish to adjust the font size as well as resize the table elements simultaneously

Adjusting the height and width of the table should automatically adjust the font size as well.

<!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 to resize this font-size, directly proportionally while resizing this table</th>
                </tr>
            </table>
        </div>
    </body>

</html>

http://jsfiddle.net/frozentoor/nguk1tfu/1/

javascriptjqueryhtmlcss

Answer №1

Perhaps this method could work for you

http://jsfiddle.net/nguk1tfu/11/

$(function() {
  $( "#resizable" ).resizable();
  initialWidth = $( "#resizable" ).width();
  initialHeight = $( "#resizable" ).height();

  $( "#resizable" ).resize(function(){
       currentWidth = $( "#resizable" ).width();
       currentHeight = $( "#resizable" ).height();
      // This determines the index for font increase or decrease
      ratio = (currentWidth/initialWidth) * (currentHeight/initialHeight); 
   if( ratio >= 1)
   {

      ratio = ratio*2; // Modify as needed
      $( "#resizable" ).css('font-size', 11 + ratio);
   }
   else
   {
       ratio = ratio*2;
      $( "#resizable" ).css('font-size', 11 - ratio);
   }
   });

 });

Answer №2

One way to style text is by using viewport units for font-size, like this:

p{
  font-size: 1vw;
}

Here are some other viewport units you can explore:

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh (whichever is smaller)
1vmax = 1vw or 1vh (whichever is larger)

For more information, check out CSS Tricks

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing a $.get() request in .Net MVC without relying on a controller

In .Net MVC, if I were to utilize the JQuery .get() method for fetching a file from the server, would it still be necessary for me to create a RenderAction within a controller method to display its contents? Here's an example implementation in JQuery: ...

jqueryasp.net-mvcasp.net-mvc-4

Check if the provided user email is already in use using the express validator

I have configured the following route in my Node.js API application: const { body } = require("express-validator"); router.post( "/user/signup", [ body("firstName").not().isEmpty().withMessage("First name is required"), body("lastName").not().i ...

javascriptnode.jsexpressexpress-validator

Exploring Mixed Type Arrays Initialization in Typescript using Class-Transformer Library

In my class, I have a property member that is of type array. Each item in the array can be of various types such as MetaViewDatalinked or MetaViewContainer, as shown below class MetaViewContainer{ children: (MetaViewDatalinked | MetaViewContainer)[]; ...

javascriptarraystypescriptclass-transformer

Expanding Java Classes and Replacing Methods with Multiple Parameters in ES4X/Graal

I am currently facing a challenge in my JavaScript project using ES4X/Graal, where I need to extend a Java class. This Java class has methods with overloaded parameters that I must override. While I understand how to call a specific Java method by specifyi ...

javascriptjavagraalvmgraaljs

Tips for updating and using a map value array as state in React

One React state I am working with is as follows: const [tasksMap, setTasksMap] = useState(new Map()); This map is created using the following code: tasks.forEach((task) => { const key = `${week.year}-${week.weekNo}`; if (!tasksMap.has(key)) { ...

javascriptreactjsuse-state

Sending data to another page in React Native can be achieved by passing the values as parameters

I am currently working on passing values from one page to another using navigation. I have attempted the following code: this.props.navigation.navigate('welcome', {JSON_ListView_Clicked_Item:this.state.email,})) in the parent class where I am s ...

javascriptreact-nativenavigationreact-navigation

A guide on simulating an emit event while testing a Vue child component using Jest

During my testing of multiple child components, I have encountered a frustrating issue that seems to be poor practice. Each time I trigger an emit in a child component, it prompts me to import the parent component and subsequently set up all other child co ...

javascriptunit-testingvue.jstestingjestjs

Create an HTML container surrounding the content within the parent tags

I'm looking to create a wrapper that acts as the immediate parent of any HTML markup added within a shared class. This will eliminate the need to manually add multiple wrapper divs and allow for the customization of layouts and backgrounds. Essential ...

javascript

In Vue.js, modifying a parent component variable using $parent does not update the interpolation syntax

Child component <template> <div> <h3>Child Component</h3> <div> <button @click="changeValue()">Update Parent Value</button> </div> </div> </template> <script> export ...

javascriptvue.js

The state in useState is failing to update correctly following selections made within the dropdown menus

I am currently facing an issue with my dropdown disabling function, which is not enabling the dropdown properly. I suspect that this is due to asynchronous problems stemming from the use of useState. const [homeSelect, setHomeSelect] = useState('Home& ...

javascriptreactjsreact-hooksuse-stateuse-reducer

Problem of background and shadow blending in CSS

I'm experimenting with creating an element using a radial gradient effect. My initial approach was to use a white circular container and apply a white box shadow. However, I encountered some issues where the color of the shadow did not match the backg ...

firefoxcssshadow

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Throughout my experience, I have never encountered this particular issue with the reliable old create-react-app However, on this occasion, I decided to use npx create-react-app to initiate a new react app. Below is a screenshot depicting the progress o ...

javascripthtmlcssreactjstypescript

Checking if the iframe location has been modified using Jquery

Looking to determine if the location of an iframe has been modified. function checkLocation() { setInterval(function(){alert("Hello")},3000); if (document.getElementById("myiframe").src = 'http://www.constant-creative.com/login';) { } ...

javascripthtml

Utilizing Ionic to seamlessly integrate Firebase into a factory, maintaining separation of controllers and services within distinct files

I'm struggling with setting up a firebase factory for use in my controllers. Currently, this is how my code appears: index.html ... <!-- integrating firebase --> <script src="lib/firebase/firebase.js"></script> <script src="lib/ ...

javascriptangularjsionic-frameworkfirebase

Retrieving checkbox list values using jQuery

I am working with a div that contains some checkboxes. I want to write code so that when a button is clicked, it will retrieve the names of all the checked checkboxes. Can you provide guidance on how to achieve this? <div id="MyDiv"> .... <td> ...

javascriptjquery

Passing React components between components using dot notation

How can I pass a boolean Parent prop into a child component using dot notation with a functional component? The Component structure is: <Dropdown className="float-right"> <Dropdown.Title>Open menu</Dropdown.Title> <Dropd ...

javascriptreactjsecmascript-6notation

Interactive canvas artwork featuring particles

Just came across this interesting demo at . Any ideas on how to draw PNG images on a canvas along with other objects? I know it's not a pressing issue, but I'm curious to learn more. ...

javascriptjquerycsshtml

Ways to widen a selected drop-down menu outside the dialog box containing it

I'm working with a Html.DropDownList that has been styled using Chosen within a jQuery UI dialog. As the list of items is quite long, when it's opened, it gets cut off by the border of the dialog window. Is there a way to extend the dropdown por ...

jqueryhtmljquery-uijquery-ui-dialogjquery-chosen

Why is my JavaScript code functioning properly on jsfiddle but failing to work when run locally?

After recently creating JavaScript code that allows for form submission using the <form> tag, I encountered an issue when trying to implement it within an HTML page. Here is a snippet of the code: <script type="text/javascript"> var m ...

javascripthtmldom-events

Numerous instances of success.form.bv being triggered continuously

Can someone please assist me with an issue I am facing in submitting a form using BootstrapValidator? I have written the code below to make an AJAX call to a page, and upon receiving a successful response, it reloads the page using location.reload(true). ...

jqueryajaxbootstrapvalidator