Adjust the size of the text within the div element as needed

Here is my code on jsFiddle where I am dynamically changing the text font to fit in the div. Everything is working perfectly fine. Currently, the text is within a span element, but I would like to remove the span and have the same functionality. However, when I remove the span, the code stops working. I even modified the function from:

var ourText = $('span:visible:first', this);

to

 var ourText = $(targetid, this);

I tried using it as follows:

 <h1  id="h1" class='jtextfill'>
    Sample 
</h1>
<h2 id="h2"  class='jtextfill2' >
   aaSamp sfd sdfsf sfsddffds ss ssf fsdf sdf sfs fsdfs sdfsdf sdf sdfsfsfsdfsdfsf sdf sfsf sfs sf sf sd  sfsf sfsdsfd sfdfdf a ada  adf ad adasda a adsa s sfzz
</h2>

Unfortunately, it did not work as expected.

Answer №1

It seems like there is an issue with your jquery selectors. You should use $( "#"+targetid ) instead of $(targetid). The latter references tags related to the content of the parameter targetid, while using the hashtag symbol # before the id will help you reference ids correctly. This rule applies to jquery and css selectors, but not to the argument of getElementById. Check out this fiddle for a better understanding (This also applies to ourText = $('#'+targetid, this);).

Update: Here's a more streamlined version of the code.

If you're having trouble eliminating the 'span' element, keep in mind that you need it to extract height and width information. It's essential to have both the text element and the container defining the viewport for accurate fitting of your text.

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

Bizarre Drop-down Peculiarities

Having a perplexing issue where the 'search' list item is oddly shifted below the dropdown box only when it is displayed. The other list items remain in their correct positions. Any advice on how to resolve this? The appearance and functionality ...

When it comes to Redux, is it considered an anti-pattern to pass an event from a presentational component to a container component

As a newcomer to Redux, I am challenging myself to rebuild an old React app using this technology in order to gain proficiency. However, I am facing a significant challenge regarding where to place the logic within the application. My understanding is tha ...

Initiate several asynchronous requests every second

I am trying to create a chat system similar to Facebook chat :) Currently, I'm using the following requests: To Retrieve Room Users And Room Body $('.room_users,.room_body').each(function () { var page = $(this).attr(" ...

"Enhance User Experience with a Bootstrap Dropdown Button Offering Block Level Function

I'm attempting to modify a bootstrap 3 dropdown button to fully utilize the width properties of .btn-block class. It appears that the dropdown button does not respond in the same way as regular buttons. Below is my current code: <div class="row"&g ...

Unable to retrieve the td value for the current row when the button inside the DIV is clicked

I want to extract the value 3 instead of the entire HTML. <div id="ExtraDt" style="overflow: auto; height:500px; width:100%; background-color: #FFFFFF; top: 0px;"> <table id="MasterList1" class="navigateable ...

Load JavaScripts asynchronously with the function getScripts

Asynchronously loading scripts on my login page: $.when( $.getScript("/Scripts/View/scroll-sneak.js"), $.getScript("/Scripts/kendo/kendo.custom.min.js"), $.Deferred(function (defer ...

Exploring the world of ASP .NET development with the powerful Sonar

We're currently working on an ASP .NET project and are looking for a way to analyze JavaScript files on-the-fly. Unfortunately, SonarLint only offers analysis for C# files. The incremental analysis feature seems to have been phased out, and issues ana ...

Troubleshooting a hover problem in CSS navigation bar

Having some trouble with the CSS menu on my website click here. I've tried adjusting the code, but can't seem to get all the menu levels to line up properly. As a beginner in CSS, I'm sure I'm overlooking something simple. When hovering ...

Node.js process.exec() function allows you to asynchronously spawn a subprocess

After writing the code, I ran it and found that the terminal was unresponsive with no output, causing the program to be stuck. var util=require('util') var exec=require('child_process').exec; exec('iostat 5',function(err,stdo ...

Error message: Unauthorized request error with the change.org JavaScript API

I am currently working on integrating the javascript API from change.org in order to retrieve all of my signed petitions for display on my source forge page. However, I am encountering an unauthorized request response from the change.org API. Despite tryi ...

Divided Progress Indicators in Bootstrap 3

Looking to enhance user experience on my webpage by creating a progress bar for data entry. The goal is for users to enter 10 items before proceeding. The challenge I'm facing is developing a progress bar that accurately reflects the number of items ...

Toggle Canvas Visibility with Radio Button

As I immerse myself in learning Javascript and Canvas, the plethora of resources available has left me feeling a bit overwhelmed. Currently, I am working on a dress customization project using Canvas. // Here is a snippet of my HTML code <input type=" ...

Issue with setInterval function execution within an Angular for loop

My goal is to dynamically invoke an API at specific intervals. However, when attempting to utilize the following code snippet in Angular 7, I encountered issues with the interval timing. I am seeking a solution for achieving dynamic short polling. ngOnIn ...

Encountering a Typescript issue stating "Property 'then' does not exist" while attempting to chain promises using promise-middleware and thunk

Currently, I am utilizing redux-promise-middleware alongside redux-thunk to effectively chain my promises: import { Dispatch } from 'redux'; class Actions { private static _dispatcher: Dispatch<any>; public static get dispatcher() ...

Simple method for integrating alert pop-ups on every page of current Asp.Net MVC (RazorView) application

Our current ASP.NET MVC 4 application utilizes RazorView for its structure. We now have a need to display information messages as pop-ups on each page. This information may come from an ajax call to a metadata service, or after a form submission operation ...

Using React Higher Order Components with several different components

Is it possible to create a React HOC that can accept two components instead of just one wrapped component and toggle between them? For instance, in the code snippet below, rather than having <h3>component one</h3> and <h3>component two< ...

Modify PHP script to extract the Document Object Model (DOM) from a specified URL

Hey there, I'm currently using this code to extract and display the HREFs of all "A" tags from a URL. However, my output includes the entire link when I only want the name portion after http://twitter.com/namehere So, I'm looking to clean up my ...

the div background is limited to the exact size of the text, not filling the entire

Currently, as I work on my web page using react.js, I'm facing the challenge of implementing a full-size background. Despite my efforts, the background only occupies the size of the text within the div. Here is the snippet of code I am working with: a ...

Text that changes within a set-sized box

I'm working with a fixed-size div that contains dynamically generated text. Is there an easy method using DOJO or plain Javascript to truncate the text before the end of the div and add "..."? How can I accomplish this regardless of the font size bein ...

Obtaining Google AAID Using a Mobile Browser (JavaScript)

I've been looking for information online without much success regarding this topic. I am interested in retrieving a user's Google Advertising ID (AAID) through my website when they visit using a mobile browser. I assume it could be done with som ...