Adjusting the text size of upcoming elements using JavaScript

Question

Adjusting the text size of upcoming elements using JavaScript

Currently, I am in the process of developing a basic chat bot. Upon receiving a new message from the server, a fresh HTML element is generated and sent to the browser. For instance, when message 1 is received, it will appear as follows:

<div class="message-computer"><p>Hi, how are you?</p></div>

Subsequently, the user types or sends a response, which will display like this:

<div class="message-user"><p>I am good, thanks!</p></div>

This cycle continues with each exchange between the server and user. As part of the functionality, I implemented a slider interface that allows users to adjust the text size being transmitted through the chat bot. While this feature does currently work, it only alters the font size of existing HTML elements. The newly incoming messages still maintain the original size.

To provide uniformity in font size across all message elements, I crafted the following JavaScript code snippet:

$('input').on('change', function() {
  var v = $(this).val();
  $('.message-computer p').css('font-size', v + 'em')
  $('.message-user p').css('font-size', v + 'em')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="range" value="1" min="1" max="1.6" step=".1" id="slider" ondrag="changeSize()" />

If you have any suggestions or solutions on how to extend the font size adjustment functionality to encompass all new message elements, please do not hesitate to share your insights.

Appreciate it!

javascript jquery html css dom

Answer 1

Answer №1

It seems like there may be a misunderstanding with your issue, as the code snippet you provided does not contain any text.

When using jQuery to update styles, each CSS statement is added individually to the style attribute of each element (you can check this in your browser inspector). As a result, newly added elements will not have their style attributes modified until you change the input value, causing them to inherit global CSS rules.

I recommend applying the font style to the parent elements .message-computer and .message-user. If that's not possible, you could wrap p elements in a dedicated div and apply the style to the div instead.

If you absolutely need to apply the style to each element individually, consider running $('input').trigger('change'); immediately after inserting new elements into the DOM.

Answer 2

It seems like there may be a misunderstanding with your issue, as the code snippet you provided does not contain any text.

When using jQuery to update styles, each CSS statement is added individually to the style attribute of each element (you can check this in your browser inspector). As a result, newly added elements will not have their style attributes modified until you change the input value, causing them to inherit global CSS rules.

I recommend applying the font style to the parent elements .message-computer and .message-user. If that's not possible, you could wrap p elements in a dedicated div and apply the style to the div instead.

If you absolutely need to apply the style to each element individually, consider running $('input').trigger('change'); immediately after inserting new elements into the DOM.

Answer 3

Answer №2

If you wish to apply a CSS rule to all like-elements on a webpage, start by adding a class to the parent tag of your HTML. This way, any additional elements with the same class will be affected by the CSS rule.

For example, consider the following code snippet as a demonstration. It could be optimized for efficiency but serves to illustrate the concept:

$('input').on('change', function() {
var v = $(this).val();
    $('.parent').removeClass('font-1');
    $('.parent').removeClass('font-2');
    $('.parent').removeClass('font-3');
    $('.parent').removeClass('font-4');
    $('.parent').removeClass('font-5');
    $('.parent').addClass('font-' + v);
});

.parent.font-1 .message {
    font-size: 1em;
}
.parent.font-2 .message {
    font-size: 2em;
}
.parent.font-3 .message {
    font-size: 3em;
}
.parent.font-4 .message {
    font-size: 4em;
}
.parent.font-5 .message {
    font-size: 5em;
}
.message-computer {
    color: red;
}
.message-user {
    color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="range" value="1" min="1" max="5" step="1" id="slider" ondrag="changeSize()" />

<div class="parent font-1">    
    <div class="message-computer message"><p>I AM ROBOT</p></div>    
    <div class="message-user message"><p>Only human.</p></div>
</div>

Answer 4

If you wish to apply a CSS rule to all like-elements on a webpage, start by adding a class to the parent tag of your HTML. This way, any additional elements with the same class will be affected by the CSS rule.

For example, consider the following code snippet as a demonstration. It could be optimized for efficiency but serves to illustrate the concept:

$('input').on('change', function() {
var v = $(this).val();
    $('.parent').removeClass('font-1');
    $('.parent').removeClass('font-2');
    $('.parent').removeClass('font-3');
    $('.parent').removeClass('font-4');
    $('.parent').removeClass('font-5');
    $('.parent').addClass('font-' + v);
});

.parent.font-1 .message {
    font-size: 1em;
}
.parent.font-2 .message {
    font-size: 2em;
}
.parent.font-3 .message {
    font-size: 3em;
}
.parent.font-4 .message {
    font-size: 4em;
}
.parent.font-5 .message {
    font-size: 5em;
}
.message-computer {
    color: red;
}
.message-user {
    color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="range" value="1" min="1" max="5" step="1" id="slider" ondrag="changeSize()" />

<div class="parent font-1">    
    <div class="message-computer message"><p>I AM ROBOT</p></div>    
    <div class="message-user message"><p>Only human.</p></div>
</div>

Answer 5

Answer №3

When you need a new node to take on certain rules, instead of just modifying an existing node, you can create a JavaScript function that dynamically adds or updates a CSS node.

function adjustFontSize(v)
{
     var css = [
       ".message-computer p, .message-user p {font-size: "+v+"em;}"
    ].join("");

    var head = document.head || document.getElementsByTagName('head')[0];
    var style = null;

    if(!document.getElementById("customTextSize"))
    {
        style = document.createElement('style');
        style.id = "customTextSize";
        style.type = 'text/css';
        style.appendChild(document.createTextNode(css));
        head.appendChild(style);
    }
    else
    {
        style = document.getElementById("customTextSize");
        style.removeChild(style.firstChild);
        style.appendChild(document.createTextNode(css));
    }

}

Simply call the function in your change event:

adjustFontSize(v)

Answer 6

When you need a new node to take on certain rules, instead of just modifying an existing node, you can create a JavaScript function that dynamically adds or updates a CSS node.

function adjustFontSize(v)
{
     var css = [
       ".message-computer p, .message-user p {font-size: "+v+"em;}"
    ].join("");

    var head = document.head || document.getElementsByTagName('head')[0];
    var style = null;

    if(!document.getElementById("customTextSize"))
    {
        style = document.createElement('style');
        style.id = "customTextSize";
        style.type = 'text/css';
        style.appendChild(document.createTextNode(css));
        head.appendChild(style);
    }
    else
    {
        style = document.getElementById("customTextSize");
        style.removeChild(style.firstChild);
        style.appendChild(document.createTextNode(css));
    }

}

Simply call the function in your change event:

adjustFontSize(v)

Adjusting the text size of upcoming elements using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Techniques for simulating functions in Jest

Unending cycle in React with a custom hook

Contrasting the impact of utilizing async:false in conjunction with a callback function versus utilizing jqXHR.done()

Using CSS to style PHP function results

`How can a child component in Next.js send updated data to its parent component?`

Preventing the user from using the mouse wheel until the CSS animation finishes

Unable to display service cost after passing ID through Ajax request for cost retrieval. The ID is successfully being passed, but the cost remains elusive

Display a loading symbol when the iframe is being loaded and also when its source is being changed

When a React CSS class is deployed to a production server, it may be automatically

What advantages does utilizing an angular directive provide in the context of a comment?

One web page featuring various query_posts

Combining Ajax and Jquery with Symfony3

Displaying a set through an express server cookie for the client to see

Customize the appearance of an ASP link button within a navigation menu

To change the font color to red when clicked, I must create a button using HTML, CSS, and Javascript

Bootstrap resource failed to load

Utilizing a confined environment to retrieve a value in order to conceal certain buttons

Stop the submission of a form using jQuery based on its unique identifier

Initiating a POST request to an ASP.NET Web API endpoint

How to activate a button only if the specified conditions are met using VueJS 3