Customize image position based on div width using jQuery and CSS

I am dealing with dynamic input sourced from a JSON feed that populates a div with different names of varying lengths.

Within this setup, there is an image positioned absolutely, and I need to adjust the CSS left value of the image dynamically based on the width of the incoming text, adding 10px for spacing.

var _origin_width = $('#dynamic_text').width() + $('#the_imae').width();

This adjustment is necessary to ensure that the text and image display side by side like this:

Dynamic Text | Image

However, I am encountering difficulties in getting this functionality to function as intended.

javascriptjquerycssjson

Answer №1

Give this a shot:

//calculate the width of the content plus 10 pixels
var dynamic_width = $('#dynamic_text').width() + 10 + 'px';
//apply the css styles
$('#the_imae').css('left', dynamic_width)

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

Is it possible to refrain from using the object variable name in an ng-repeat loop?

When utilizing an ng-repeat directive to loop through an array, the syntax requires ng-repeat="friend in friends". Inside the template, you can then use the interpolation operator like this {{friend.name}}. Is there a way to directly assign properties to ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

Learn how to capture complete stack traces for errors when using Google Cloud Functions

In the codebase I am currently working on, I came across a backend service that I would like to utilize for logging all errors along with their corresponding Http statuses. If possible, I also want to retrieve the full stack trace of these errors from this ...

javascripttypescriptgoogle-cloud-functions

Issue with Base64 string source not functioning properly in Phonegap

Currently, I am developing a mobile application using Phonegap. One of the features in my app requires me to change an image when a user selects a new one from the gallery. The selected image is then sent to the server in base64 format. Upon receiving the ...

jquerybase64phonegapsrcimageurl

Transfer the text from one cell and insert it into the "neighbor" cell of a different column when the content is editable

present situation: Clicking on a row fills the entire row of another column, instead of just filling a single row. <p class="p-of-that" v-html="thatText" contenteditable @click="writeThat(myArr, $event)" ></p& ...

javascriptvue.jsvue-composition-api

Ways to identify if the text entered in a text area is right-to-left justified

Within a textarea, users can input text in English (or any other left-to-right language) or in a right-to-left language. If the user types in a right-to-left language, they must press Right-shift + ctrl to align the text to the right. However, on modern O ...

javascriptjqueryhtmlcssright-to-left

Why is the feedback section showing a horizontal scrollbar?

I'm puzzled as to why a horizontal scrollbar is appearing in the feedback section. I've examined the elements but can't seem to pinpoint the issue. ...

csshtmlscrollbar

Modify the text and purpose of the button

I have a button that I would like to customize. Here is the HTML code for the button: <button class="uk-button uk-position-bottom" onclick="search.start()">Start search</button> The corresponding JavaScript code is as follows: var search = n ...

javascriptjqueryhtml

Searching JSON objects in a dynamic manner

I've been trying to incorporate a dynamic condition in a JSON Object without any luck so far. I haven't come across any resources that cater to my specific requirements. The code snippet below shows how I'm storing the dynamic JsonObject st ...

c#.netjsonlinqjson.net

Adjust the width of your table content to perfectly fit within the designated width by utilizing the CSS property "table width:

Example of a table <table> <tr> <td>Name</td> <td>John</td> <td>Age</td> <td>25</td> <td>Job Title</td> <td>Software Engineer ...

javascriptjqueryhtmlcss

Material UI does not have built-in functionality for displaying colored text within a multiline textfield component in React

Attempting to utilize the material ui library in a react app has brought an issue to light. It appears that styling colored text does not work as expected for multiline textfields. Consider the following scenario: import React, { Component } from 'r ...

cssreactjsmaterial-designmaterial-ui

Filtering in AngularJS can be done by combining two fields at

I attempted to implement similar code for filtering my tasks, but it seems to be malfunctioning. When I use just one filter, everything works fine regardless of which one I choose. However, when I attempt to filter by the second input, it simply does not w ...

javascriptangularjs

What is the best way to dynamically add getJSON's data to a div whenever the loadmore button is clicked?

When a page loads, my getJSON function displays its output in a div called myDiv. Now, I am looking to add a button at the bottom of the page. When the user clicks this button, I want to trigger another call to getJSON. Each time the button is clicked, I ...

javascriptjqueryhtmlajaxgetjson

Unable to retrieve the content of Material UI Textfield

I'm new to React and I need help with my login page that uses Firebase authentication. I have an input field to capture the user's contact information for validation, but I'm having trouble retrieving this data. I've tried various solut ...

javascriptreactjsmaterial-ui

JavaScript makes Chrome Hard Reload a breeze

We've created a browser-based app using AngularJS and are currently testing it with a group of clients. One major challenge we're facing is explaining how to "Empty Cache and Hard Reload" using the Chrome browser (by pressing F12, then clicking o ...

javascriptangularjsgoogle-chrome

The visibility of content that flickers on the webpage should be hidden with the display: none property during loading

Currently working on a new toy website, but encountering some unexpected behavior. On the homepage HTML file, there are two separate sets of <body> tags: <body class = "intro">...</body> <body class = "home">...</body& ...

javascripthtmlcss

What could be causing my css stylesheet to not function properly in Sinatra?

I'm fairly new to this, but based on my research, this code should be functioning correctly. I am attempting to link a CSS stylesheet to an .erb file. Here is the code snippet I am using: <link rel="stylesheet" type="text/css" h ...

htmlcssrubysinatra

Tiny containers are positioned outside the boundaries of the larger container

click here to view image description Having trouble with my dashboard layout When adding small boxes, they exceed the page boundaries when moving to a new row The boxes in the first row display correctly, but issues arise with subsequent rows Seeking advi ...

phphtmlcssbootstrap-4

Centering the Navbar in Bootstrap 3.0

I am currently in the process of migrating my project from Bootstrap 2.3.2 to Bootstrap 3. Unfortunately, I am facing issues with centering the navbar links, something that I was able to do easily before. Previously, I used this method: Center bootstrap&# ...

csstwitter-bootstrap-3

Create a circle at the point where two table cells intersect in an HTML document

How can I create a circular shape at the intersections of HTML tables? I am struggling to figure out a way to incorporate shapes into HTML tables. My goal is to achieve a design similar to the image shown below. I have attempted using text and spans, as we ...

htmlcss

Tips for adjusting the width of the scrollbar track (the line beneath the scrollbar)

How can I style a scrollbar to match this specific design? https://i.stack.imgur.com/KTUbL.png The desired design specifies that the width of -webkit-scrollbar-thumb should be 5px and the width of -webkit-scrollbar-track should be 2px. However, it is pro ...

htmlcssscrollscrollbar