variable size with the FitText extension

On my website, I am encountering an issue with the FitText plugin not working properly. The width of a div that I have created using jQuery is causing the problem. Here is the jQuery code:

$('.myContent').css({
position: 'relative',
float: 'left',
height: $('.target').height()-50,
width: $('.target').width()/3
});

The CSS for "myContent" is as follows:

div.myContent {
margin-top: 4em;
text-align: left;
font-size: 14pt;
overflow: hidden;
display: inline-block;
width: auto;
}

The content within my div is structured like this:

<klein><fine>GEMÜSE</klein></fine> SURPRISE-MENU 
<strong>bio</strong><klein>geniessen</klein>
<stark> WEIN</stark> <klein> KERZENLICHT</klein>

Here is the snippet of code for FitText.js:

<script>
 jQuery("#myContent").fitText(4.2);
</script>

If you would like to visit the site and offer any assistance, please go to

Thank you in advance for any help provided. - Carol

Answer №1

Make sure to trigger it only after your document has fully loaded and is prepared for further processing.

$(document).ready(function() {
    $("#myContent").fitText(4.2);
});

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

What is the best way to make img-fluid function properly within Bootstrap Carousel?

I've been struggling to make my carousel images responsive by using the img-fluid tag, but I haven't had any success. I've attempted using !important and display: block, but nothing seems to work. I'm not sure what's causing the is ...

Having trouble implementing button functionality in a web app using JS, jQuery, HTML, and CSS along with an API integration

I am currently developing a web search engine that utilizes the Giphy API... However, I've encountered difficulties with the button function. I have created buttons to modify the page format and adjust the number of search results displayed.... The We ...

if statement not recognizing data returned from PHP function

I'm currently working with a function that is being used for an AJAX query: var formData = $(this).serialize(); //store form names and values in an array called 'formData' $.get('filtertest.php',formData,processData); //jQ ...

Setting the minimum width for a grid item in a React Material UI component

Is there a way to ensure that a material-ui Grid item has a minimum width of 250 pixels? I've tried using the sizing suggestions from Material UI's documentation, but haven't had any success. The 'logo' element within the Grid cont ...

The javascript code embedded within an AngularJS partial view is not functioning properly

To prevent loading all JavaScript in index.html, the focus should be on initializing scripts at the partial view level. For example, let's say there is a partial view with a date picker. The initialization of the date picker should happen within the ...

The value of the comment box with the ID $(CommentBoxId) is not being captured

When a user enters data in the comment box and clicks the corresponding submit button, I am successfully passing id, CompanyId, WorkId, and CommentBoxId to the code behind to update the record. However, I am encountering an issue as I also want to pass the ...

The Bootstrap popup fails to display when adding the bootstrap.min.css file

I am experiencing difficulties with CSS as I am relatively new to it. Currently, I am utilizing the bootstrap popup in the following example. Upon clicking the 'Full Spec' button, a popup box appears. However, it seems that the file bootstrap.mi ...

Is it possible that an object sent as a response body from a Spring MVC application's controller cannot be fetched using the jQuery AJAX method?

After making an AJAX call, the EmployeeBean object is not being returned and no exception is being thrown. Here is the code snippet from the controller method: I am trying to return an EmployeeBean object from this method using @Responsebody @RequestMapp ...

Having trouble with the Handlebars {{#if}} and {{elseif}} block helpers not functioning properly?

When working with handlebars.js, I am faced with the task of parsing complex JSON and displaying names in different styles based on certain conditions. The JSON structure is as follows: "TradeLine":{ "TradeLine":{ "Mor ...

Unable to sort the list items when utilizing the load() function

I have multiple li elements within a ul and I am using the following code to sort them in ascending order based on the data-percentage attribute: $(function() { $(".alll li").sort(sort_li).appendTo('.alll'); function sort_li(a, b) { re ...

Are my Angular CLI animations not working due to a version compatibility issue?

I've been working on a project that had Angular set up when I started. However, the animations are not functioning correctly. The mat input placeholder doesn't disappear when typing, and the mat-select drop-down is not working. Here is my packag ...

Unlimited scrolling feature resembling Facebook and Tumblr created using jQuery

Below is the modified code from a tutorial found on hycus.com: <script type="text/javascript> var properlast = 10; $(window).scroll(function() { if($(window).scrollTop() == $(document).height() - $(window).height()) { $("div#load ...

How to align text to the right in the selection box list on Chrome for Android

My website includes an Arabic version. When viewing the site on mobile, the menu is displayed as a select box list. Due to the right-to-left (RTL) nature of Arabic text, I need the text within the select box to be aligned to the right. I attempted to add C ...

Discovering an Element in jQuery through its ID using Spaces and Variables

My issue involves locating an element within another element using an ID and then adding a class when the ID is hardcoded. For example: var tableId = el.id; $('#' + tableId).find("[id='Checkout On']").addClass('highlight'); ...

How can I style a div to include a 'bottom tab' using CSS?

I am in the process of designing a series of Bootstrap columns to replicate the layout of a website I have been provided with. https://i.sstatic.net/hVuq1.png These columns feature a blue border with a particularly thick border at the bottom. However, us ...

Determine whether the Bootstrap data-style attribute is enabled or disabled

I have a bootstrap checkbox that I would like to trigger an alert dialog when it is switched off. <div class="row"> <link href="css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="javascript/bootstrap-toggle.min.js ...

Aligning the content vertically in the second row of a two-row layout

Check out this jsfiddle example I'm trying to achieve a layout with two rows, one for the header and one for the content. The header has a fixed height, and I want the content to be centered vertically in the second row. I attempted using position: ...

Transferring information from an Ajax request to a Node.js server

Currently, I am delving into learning about node.js and am interested in sending data from an Ajax call to my node server. Shown below are my Ajax and node function calls: Ajax Method function getUserData(){ var userData ={}; userData.email=$(&a ...

What are some ways to integrate ngAnimate into ngTable for improved visual effects?

Hey everyone, I've been working on a project where I'm trying to merge ng-animate and ng-table. I created a plnkr to showcase my progress: http://plnkr.co/edit/EfZF5oWb9qzGvOIbAhtX?p=preview Despite injecting both directives into the scope and ...

Is it feasible to share HTML5 media captures and display them in real-time on another page within the website?

Recently, I just learned about the html5 media capture API and I am excited to start experimenting with it. One thing that caught my attention is capturing the camera on the same page, but I haven't come across any information about streaming through ...