http://codepen.io/anon/pen/oXGMQZ
Is there a way to automatically adjust the font size of each span within a parent div so that it fills the width of the parent div?
<div class="box">
<span class="fit">what</span>
<span class="fit">an</span>
<span class="fit">idea!</span>
</div>
.box{
width: 50%;
background: beige;
text-align: center;
}
.fit{
display: block;
}
This would result in each line of text having a different font-size based on its length.
Here is a helpful tip to get you one step closer... the line height issue remains unresolved though.
var orig = $('.box').css('width');
$('.fit').each(function () {
$(this).css('font-size', '1em');
var size = $(this).css('font-size');
var cur = parseFloat(size.substring(0, size.length - 3));
var prev;
while (parseInt($('.box').css('width')) > parseInt($(this).css('width'))) {
prev = cur;
cur += 1;
$(this).css('font-size', "" + cur + "em");
}
$(this).css('font-size', "" + prev + "em");
});.box {
width: 50%;
background: beige;
text-align: center;
}
.fit {
display: initial;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="fit">what</div>
<div class="fit">an</div>
<span class="fit">idea!</span>
</div>It's puzzling to me why the scope of $elm seems to be lost within the jQuery each loop. The scope is reliable on lines 76 and 77, but then disappears inside the loop at line 78. What mistake am I making? Take a look at this image displaying the code. ...
I am attempting to create a layout where the screen is split into two sections - one green block taking up 1/4 of the screen and one yellow block taking up 3/4 of the screen using react.js. However, when I tried implementing the code below, both blocks end ...
I am in the process of developing a todo list application using next.js. The issue I am facing is that when I input data into the field, it correctly displays in the console. However, upon clicking the button, instead of the input displaying like a norma ...
How can I call all the data in "md" and display it in a table? I've tried multiple values but none seem to work. Can someone guide me on how to use the "md" value to display in a table? <script src="https://ajax.googleapis.com/ajax/libs/jquery/ ...
My goal is to develop a universal beforeSend function that modifies the data sent by each jQuery.ajax call. This will allow me to include a custom variable for tracking purposes in every request, regardless of the order they are sent in. For instance, let ...
Is there a way to dynamically expand a div's height using CSS without knowing its initial height? I want to increase the height by a specific amount, such as "x px taller" regardless of its starting size. For example, if the div starts at 100px tall, ...
If you'd like to check out my website Please use the following login details (case sensitive): Username: stack Password: stack Click on the tab labeled "yourhours." The main goal is to send all input box data to a database. At the moment, I am fo ...
I am currently working on extracting browser fingerprint using fingerprintjs2, an npm package in Javascript. However, I encountered the following error: ReferenceError: navigator is not defined Error Logs: https://i.sstatic.net/lWL9Y.png Code Snippet: ...
So I'm encountering an issue with this unique ts code: {/* Mobile Menu */} <div className="lg:hidden"> <button className="flex items-center w-8" onClick={toggleMenu}> {isMobileMenuOpen ? ( ...
As a beginner in using Angular.js, I encountered an issue with data binding when dealing with radio buttons. The HTML code in question is: <label class="options_box" ng-repeat="item in item_config_list.item_config"> <input type="radio" name ...
Having trouble with scroll spy for boosters using the body method " data-spy="scroll". It seems to be working for some browsers like Edge and Google Chrome, but after multiple attempts, it still doesn't work for me. Even after asking friends to test i ...
I am currently working on an Angular login page implementation using a username and password setup. When the user enters incorrect credentials, I want to display an alert message indicating the same. Here is the HTML code snippet for the form: <form [f ...
I'm currently working on developing a form using Angular JS for editing venue details such as address and city. The backend system is powered by Django and offers a REST API (Django Rest Framework) which I am interfacing with through Restangular serv ...
Currently, I am facing an issue while trying to implement Firebase ui auth in my app by referring to Google's Github documentation. While the email sign-in functionality is working smoothly, I am encountering problems with the phone sign-in option. ...
Why do the codes in the watch only run once? How can I address this issue? this.$rootScope.$watch('tabType', () => { if (this.$rootScope["tabType"] === TabType.Sent) { this.$scope.refreshSentList(); } else if (this.$rootScope[ ...
I'm struggling with implementing pagination on my archive page that lists news stories controlled by an ajax call. The ajax call populates and changes the news stories based on custom taxonomies - topics, sectors, and technologies. However, I can&apos ...
Is there a way to extract part of the source code from a YouTube page without using server-side programming? I've tried cross-domain AJAX techniques like Yahoo YQL and JsonP. While Yahoo YQL allows me to grab part of the source code, I'm facing ...
import Comments from '@ckeditor/ckeditor5-comments/src/comments'; ClassicEditor.builtinPlugins = [ Essentials, Paragraph, Bold, Italic, Image, Comments ]; I am trying to figure out how to incorporate comments into the CKEditor5 in an AngularJS ...
I am working on enhancing my skills in angularjs, but I am facing an issue where only the categories are being displayed and the products are not showing up. There are no error messages, so I am having trouble pinpointing where the problem lies. Here is t ...
I am currently working with an API written in typescript and attempting to execute parallel queries for the same document by using Promise.allSettled. However, I have noticed that it is performing poorly and seems to be running sequentially instead of in p ...