Adjust the text size in a collapsible tree based on the number of expanded components inside the container

Hi there, I'm currently developing a code for an expandable/collapsible tree using checkboxes. I have successfully implemented the basic functionality, but I have a specific requirement. I want the text size to decrease as the tree expands to prevent the need for scrolling to view all branches.

I stumbled upon the jQuery plugin, TextFill, but I'm facing challenges in getting it to work as intended with my current setup.

Here is a snippet of my code:

...
...

I have been struggling with this for some time now, so any assistance would be highly appreciated!

Just a heads up, my code might look messy because I am relatively new to coding. I am basically piecing together different components to make it work.

Thank you for taking the time to help, I'm hoping we can come up with a solution!

javascriptjqueryhtmlcss

Answer №1

By utilizing JavaScript, you can enhance the user experience by dynamically adjusting the font size based on the depth of the specific item clicked in the collapsible tree structure.

To fine-tune the font size modification, simply tweak the font size calculation equation by modifying the initial font size, multiplier, or minimum threshold according to your requirements.

$("label").click(function (element) {
    var depth = $(this).parents().length;
    // Ensuring the font size does not go below 8:
    var fontSize = Math.max(40 - depth * 2, 8);
    $(".treeview.hover li").css({
        "font-size": fontSize
    });
});

http://jsfiddle.net/umc2vjw1/

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

Retrieving values using jQuery from specific class identities

Could someone help me extract the value from this specific HTML tag? <INPUT id=ctl00_MyTaxonomyFieldID_ctl00_ctl01 class="ms-taxonomy ms-taxonomy-height ms-long" value=MyTaxonomyFieldValue|f0d123d1-ac8c-4a18-bccb-65c9b5ea83af type=hidden> I need to ...

jquerysharepointtaxonomy

Incorrect icon being displayed for PHP validation

Seeking guidance in PHP as a newcomer. Attempting to display an error icon upon validation failure. PHP <?php // Initialize variables and set them as empty values $nameErr = ""; $name = ""; if ($_SERVER["REQUEST_METHOD"] = ...

phphtmljquery

Deducting time from the present moment

I am facing a scenario where I have 2 strings representing the minute and hour for a specific function to execute at. I aim to validate if the specified minute and hour, present in string format and retrieved from my database, are within a 5-minute window ...

javascriptnode.jsif-statement

Tips for ensuring that jQuery runs in the correct order within Angular 2

As a beginner with Angular 2 and asynchronous loading, I have encountered some difficulties in finding the right approach for running jQuery scripts in the correct sequence within an Angular 2 project. Despite exploring various resources such as: How to u ...

jqueryhtmljsonangularsequence

Refreshing Information Iteratively

I am currently working on updating the rate field in the currency table using my nodejs controller. While everything runs smoothly in S3T / RoboMongo, I'm facing an issue where the update operation doesn't seem to execute inside the nodejs contr ...

javascriptnode.jsmongodbmongoose

Encountered an error while trying to set up the route due to Router.use() needing

Within my app.js file, I have the following code: app.use('/', require('./routes')); //old routes app.use('/api', require('./api')); Additionally, I have an api folder containing an index.js file. This is what the ...

javascriptnode.jsexpress

Vue has issued a warning stating that the type check for the "eventKey" prop has failed. The expected type was a String or Number, but an Array was provided instead. Additionally, it is advised to

The code I am currently using is producing the following errors in the console output: [Vue warn]: Avoid using non-primitive value as key, use string/number value instead. [Vue warn]: Invalid prop: type check failed for prop "eventKey". Expected String, ...

javascriptvue.jsdebugging

Sending information to a child component causes the parent's data to be modified as well

Transferring information from the parent to the child component has always been easy for me. However, I recently encountered an issue where updating the data in the child component also updates the data in the parent component simultaneously. Now, I am loo ...

javascriptvue.js

Is there a way to merge arrays in jQuery by pushing one array into another?

I am looking to construct an array as shown below. var coordinates = [ [41.02178, 29.26108], [41.02196, 29.26067], [41.02251, 29.26031], [41.02258, 29.26015], [41.02267, 29.25926] ]; My attempt in the code was as follows: var locations = []; f ...

javascriptjqueryarrays

Tips for making an input form that triggers an alert popup

After creating an HTML form with text input, utilizing Javascript for validation as shown below: I am trying to trigger an alert box thanking the user for entering data when the submit button is clicked. I have faced challenges in implementing this witho ...

javascriptcssformsvalidation

Express along with Cheerio and JSDOM

I'm currently exploring the integration of Cheerio with Express to enable server-side DOM manipulation. I haven't had much luck beyond basic web scraping techniques. There are specific requirements I need to meet for this project. Currently, I ...

javascriptnode.jsdomexpresscheerio

Concealing the content of multiple items through sorting with the help of jquery

I need help with hiding the content of all elements while dragging or sorting the list. Can someone assist me with this? Here is my working fiddle. My jQuery code used in the fiddle is: $( function() { $( "#sortable" ).sortable(); $( "#sortable" ).disable ...

jqueryhtmlcssjquery-ui

What's the secret behind generating a crisp 400 on paper?

Understanding Why it Prints 400 I'm struggling to comprehend the logic behind this var x = {}, y = { key: "y" }, z = { key: "z" }; x[y] = 100; x[z] = 200; console.log(x[y] + x[z]); ...

javascriptobject

The use of Handlebars expressions within the {{#each}} block is crucial

I am currently working on my new portfolio site and I have a question about how to place handlebars expressions inside an #each loop. The project is an express application generated by express-generator, and I am using the express-handlebars NPM package: ...

javascriptnode.jsexpresshandlebars.js

selenium-webdriver causing issues on a nodejs server

Encountering an error while trying to start the nodejs server with selenium webdriver ubuntu@ip-10-10-10-193:~/testenvoy$ node app.js /home/ubuntu/testenvoy/node_modules/selenium-webdriver/index.js:115 static createSession(...args) {} ...

javascriptnode.jsseleniumselenium-webdriver

a tutorial on linking component data to a prop value

Is there a way to connect the searchString value in my Vue component to the item value in the html template it uses? I need to pass this value to the method called in my Ajax request. Vue: Vue.component('user-container-component', { props: ...

javascriptvue.js

Fatal error encountered in Vscode while running the debug console

Every time I attempt to console log any code, I consistently encounter this error: https://i.sstatic.net/m4rnY.png ...

javascriptnode.js

Organizing a very lengthy jQuery code line

As I was browsing through some questions here, I couldn't find what I was looking for. Is there a specific syntax that can help break up a long line of code into multiple lines? I want to avoid having one extremely lengthy piece of code. When using j ...

jquerysyntaxappendtidy

Transforming table headers in Rmarkdown ioslides

I am experimenting with creating a custom table format for tables generated using the ioslides_presentation output type in Rmarkdown with Rstudio Version 0.98.1028. However, I'm facing difficulty in modifying the styling of the table headers. Below i ...

cssformattingmarkdownrstudio

The Full Screen Button on Google Maps isn't functioning properly in a third-party mapping application

Below you will see the '+' icon which is also supposed to function as the full screen button. https://i.stack.imgur.com/IMvHa.png However, when clicked on, it does not expand to full screen as intended. I have attempted using some basic jQuery ...

javascriptjquerygoogle-mapsfullscreen