Having a few <span> elements generated dynamically, I need to find out their combined width. Wrapping them in a <div> and using alert($("#spanWrap").width()); resulted in the container's width instead of that of the <span> elements.
To better illustrate the issue, check out this jsFiddle demo: http://jsfiddle.net/XGynv/7/
Make sure to include display: inline-block; in the styling of your div that wraps the spans.
Update:
If you have the spans enclosed within a div like this:
<div id="spanwrapper">
<span>span1</span>
<span>span2</span>
</div>
Your CSS should include (in this specific order as noted by gilly3):
#spanwrapper {
display: inline-block; // Allows the div to adjust its size according to content
}
#spanwrapper {
*display: inline; // Provides support for IE7 or older versions
}
This will enable you to determine the width using jQuery:
$("#spanwrapper").width();
Or with traditional JavaScript:
document.getElementById('spanwrapper').clientWidth;
Keep in mind that since the width is now determined by the browser, specifying a fixed width in the style may no longer be necessary.
If you want to calculate the total width of all spans within a specific div, you will need to create custom code similar to the example below.
let totalWidth = 0;
$("#menuContainer span").each(function(){
totalWidth += $(this).width();
});
// The totalWidth variable now contains the sum of widths for all spans inside menuContainer
One solution would be to simply add the widths of the elements using -
parseInt($("#fashion").width()) + parseInt($("#wedding").width())
Consider switching the container from a div to a span for a potentially simpler solution
<span id="divMenuSpan">
I made some changes to your jsFiddle.
Essentially, I am iterating over the spans and calculating their total widths.
Explanation: The reason a div spans the width of its container is because it is a block element by default. To make a div fit the width of its contents, you can use the float property:
#wrap {
width: 666px;
overflow: hidden;
}
#divMenuSpan {
float: left;
}
Note: If your spans wrap to the next line, the floated container div will adjust its width accordingly. If you want to calculate the actual width of the spans individually, you would need to loop through them and sum up their widths.
Is there a way to achieve something similar to this:
let totalSize = 0;
document.querySelectorAll('.someclass').forEach(function(element) { totalSize += element.offsetWidth; });
I'm curious!
To find the total width, you can utilize JavaScript to calculate it.
$(document).ready(function() {
var spans = $("span"), //collecting all span elements
totalWidth = 0;
spans.each(function(index, element){
totalWidth += $(element).outerWidth(true); //including margin in calculation
});
console.log(totalWidth);
});
Having an issue comparing two 2D arrays in javascript, looking to output "true" if the arrays are the same. This is the code I experimented with: ` function check(){ if (data.every() === solution.every()){ alert("example"); } else { ...
Struggling with centering an image horizontally in a responsive manner while using Bootstrap v3.3.5? Here's my code: <div class="container"> <div style="margin:0 auto;"> <img src="images/logo.png" alt="logo" /> ...
I'm encountering an error when trying to call an API from a .NET application: "Script7002:XMLhttpREQUEST:Network Error 0x80070005, Access Denied." Interestingly, I am able to get the correct response when testing the API with the "Advanced Rest Cl ...
Although I acknowledge that others have asked similar questions, none seem to address the exact issue I am facing, nor do they offer practical solutions or clear explanations. Issue I'm encountering a problem where some visited hyperlinks in IE 11 f ...
Utilizing Bootstrap 4 along with a custom CSS file on my website. Within the CSS file, I have included some media queries at the bottom: @media (max-width: 575px) { .address .contact { text-align: center; } } /* Small devices (tablets, 768px and ...
I've encountered an issue while using the webpack-simple-2.0 template for Vue.js (version 2.0.0-beta.5). When I include export const FOO='bar' in my main.js file, I'm unable to successfully import { FOO } in another .js file - it alway ...
Currently, I have multiple controllers, models, and services set up as individual files for preparation before minification. My goal is to combine and minify all these files into one JS file for production. To illustrate how my files are structured, here ...
My attempt to dynamically create a list item with JSON response and set the data-icon to "check" is not working as expected. The result always shows "arrow-r" data-icon instead. This is how I generate the list item: function CallvarURL(url) { var res ...
How can I create a button that allows me to start the countdown timer on the first click and pause it on the second click? I want both functionalities in the same button. Here is an image for reference: https://i.stack.imgur.com/fuyEJ.png I currently ha ...
There seems to be an issue with the action/reducer I am attempting to call. It appears that the function is not being read correctly when called. The problem lies within the deleteWorkout function. I've attempted to use mapDispatchToProps and have al ...
I have a basic web application that I am currently developing using Node.js and Express. This is a breakdown of my package structure: https://i.stack.imgur.com/D7hJx.png The entries in my questions.json file are outlined below: [ { "question": "Wh ...
Hello, I am a beginner in JavaScript and I need help with extracting values from JSON and adding them to an array. My goal is to be able to parse this array using another function later on. However, I'm struggling with returning the array after adding ...
Our new website, powered by Wordpress, is up and running but some users are experiencing issues with displaying Swedish special characters. It seems to be happening specifically on Android devices, regardless of the browser being used. However, I have not ...
I am attempting to style text retrieved from a SQL database, but when I try to preview it, I encounter a Fatal error: Maximum execution time of 30 seconds exceeded on line 64 . I tried setting the maximum execution time to 300 with `ini_set('max_execu ...
Can someone help me create a description for the select tag that won't show up in the drop-down options? I remember seeing this done somewhere, but I can't recall where. Any suggestions? This is what I am trying to achieve: <fieldset> ...
I'm currently in the process of developing an application that involves redirecting users to a specific URL, prompting them to open an app (with a url starting with zel:), and then sending a request back to my server. Here's the envisioned user j ...
index.js: import react from 'react'; import {render} from 'react-dom'; render( <h1>Hello World!</h1>, document.getElementById('root') ); package.json: { "name": "", "version": "1.0.0", "descriptio ...
My attempt at creating a highlighter is encountering issues with transparency The problem might be due to using lineCap=round, resulting in multiple dark spots appearing in a single line (which shouldn't happen). It's difficult to fully describe ...
I've been working on creating a website for my business but I'm facing a challenge. My goal is to have a fixed navigation bar that stays in place as people scroll down the page, similar to what you can see on this website: (where the navigat ...
Recently, I revisited some websites I co-built with a friend and was working on getting them functional again. It's been a while since I've done any AJAX work, and I'm realizing that there aren't many resources available to help trouble ...