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

Angular-ui does not support the ng-disable directive

<h3 class="pulse-green-text"><span class="icon ico_pulse_download"></span>VPN Certificate</h3> <div class="vpn-cert" ng-controller="vpnController vpnCert"> <form method="post" name="userform" class="form-horizontal" id="u ...

Retrieving addresses by extracting p from the Python class within a div

Currently the code: Extracts URLs for various gyms and saves them in a CSV file as shown below: https://www.lifetime.life/life-time-locations/al-vestavia-hills.html https://www.lifetime.life/life-time-locations/az-biltmore.html Desired functionality: I&a ...

Send the Vue component as an argument to the function

Currently, I am in the process of transferring a project to Vue and utilizing Muuri as a layout manager. In my code, I have the following snippet: grid.add(itemElem, { layout: false, active: false }); The variable itemElem used to be an HTML element c ...

When sending strings through an ajax call, spaces are getting converted to "'+'"

In my attempt to utilize AJAX for sending a POST request with multiple strings as parameters, I encountered an issue. The strings I am sending sometimes contain spaces. However, upon receiving the POST on the C# server side, I noticed that the string com ...

The array value remains unchanged when included in the response

My goal is to send back the "projets" array within an expressJs route after fetching images for each item. However, when I return the response with the updated array, the newly added fields don't seem to be included. Note: When I log the added item, ...

Leveraging jQuery, Ajax, and PHP for generating and organizing HTML blocks - requiring sound logic

I am in the process of developing a website that compares different products. I have implemented code that retrieves and scrapes data for comparison when a user performs a search. Right now, I am using an ajax request for each company (currently 6 compani ...

Caught in the midst of a JSON update conundrum

I need some help with my JavaScript/JSON coding. I have a script that loads JSON data and displays it on an HTML page. Now, I want to know how I can update this data. Specifically, I want the script to update the location of the person when a button is cli ...

Consolidate radio group in Vuetify platform

I'm having trouble centering the v-radio-group. Here's my current setup: <v-container grid-list-md text-xs-center> <v-form ref="form"> <div v-if="question.question_type == 'YESNO' "> <v-radio-group ...

What could be the reason that the close() method is not successfully closing the window that I have generated?

Although there are no error messages, I am encountering an issue where the function windowClose() does not execute when I click on the 'close window' button. Why could this be happening? Take a look at my code below: HTML <!DOCTYPE html> ...

What issues are hindering the successful export of my Vue component packaged with npm?

I created a small local npm package called fomantic-ui-vue with the following main js file: import Vue from 'vue' // Import vue component import button from './elements/button/button.vue' import buttonGroup from './elements/butt ...

Is there a way to asynchronously load image src URLs in Vue.js?

Why is the image URL printing in console but not rendering to src attribute? Is there a way to achieve this using async and await in Vue.js? <div v-for="(data, key) in imgURL" :key="key"> <img :src= "fetchImage(data)" /> </div> The i ...

Strategies for resolving the error "Cast to ObjectId failed for value"

<form action="" method="post"> <input type="password" name="password" placeholder="Type Your Password Here" required> <input type="hidden" name="user_id" value=&q ...

Refreshing GIF images in React using forceReload

In order to restart the gif animation every 12 seconds or whenever the activeIndex changes, I need to reload a GIF image with CHECKMARK_ANIMATION_ICON as the source. Below is the code: const reloadImgSource = (imgSource) => { setTimeout(() =& ...

What could be the reason behind the success of my API call in Chrome while encountering failure when implemented in my

I'm attempting to access the Binance API in order to obtain the current price of Litecoin (LTC) in Bitcoin (BTC). For this purpose, I have tested the following URL on my web browser: "https://api.binance.com/api/v1/ticker/price?symbol=LTCBTC". Now, I ...

Exploring PHP cURL with the power of jQuery

function php_download($Url){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $Url); curl_setopt($ch, CURLOPT_REFERER, "http://www.example.org/yay.htm"); curl_setopt($ch, CURLOPT_USERAGENT, "MozillaXYZ/1.0"); curl_setopt($ch, CURLOPT_H ...

Having trouble with JQuery on your Joomla 2.5 site?

Seeking assistance with implementing jQuery in my Joomla 2.5 website to switch between two images. While I have successfully achieved this on a static HTML page, I'm facing difficulties in Joomla. Here is the code snippet I am attempting to use within ...

Creating a smooth JQUERY fade slideshow with seamless transitions, no white gaps in

I am having trouble with the slideshow on my Wordpress website www.2eenheid.de. I want the images to fade smoothly between each other instead of fading into a white background color first and then into the next image. Can anyone help me find a solution for ...

Toggle the Editable Feature in AngularJS JSON Editor

Currently, I'm utilizing a library called ng-jsoneditor that is available on GitHub. I am attempting to switch the state of an element from being editable to being read-only. To indicate that an element should be read-only, I need to specify the onE ...

What is the best way to add child elements to existing elements?

When it comes to creating elements with jQuery, most of us are familiar with the standard method: jQuery('<div/>', { id: 'foo', href: 'http://google.com', }).appendTo('#mySelector'); However, there ar ...

problem encountered when attempting to fetch a value through ajax

Here is an updated version of the code for my preview problem. The goal is to send and retrieve a value using ajax, but I'm encountering issues with sending the value and getting ajax to work properly. This revised code is easier to test on different ...