Is it possible to adjust the popup width based on the child classes?

    <span class="grandparent">
        <span class='parent'>
            <span id="popUP" class="child1">
                Some content for popUP
             </span> <!-- 1st child has width of 390px-->
        </span>    
    </span>

Let's explore different options by replacing the child span tag with new tags as shown below.

     option A) <span id="popUP" class="child2"></span> 
             <!-- 2nd child has popUP width of 550px--> 
     option B) <span id="popUP" class="child3"></span>
             <!-- 3rd child has popUP width of 450px-->
     option C) <span id="popUP" class="child4"></span> 
              <!-- 4th child has popUP width of 350px-->

Is there a way to dynamically change the width of the popup using JavaScript or jQuery? I attempted to use the .find() method without success.

javascriptjqueryhtmlcsspopup

Answer №1

Is it more appropriate to consider this alternative approach? The id and class seem to be switched around.

option A) <span class="popUP" id="child2"></span> 
            <!-- 2nd child has popUP width of 550px--> 
option B) <span class="popUP" id="child3"></span>
             <!-- 3rd child has popUP width of 450px-->
option C) <span class="popUP" id="child4"></span> 
              <!-- 4th child has popUP width of 350px-->

Could this be a potential solution?

$("#child2").addClass("width2");

Following up with the corresponding css

.width2
{
width:550px;
}

Consider utilizing div elements instead of spans, as spans may not interpret tags correctly. Providing the full code snippet could offer more insight.

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

Discovering the worth of an array property in JavaScript

I have a custom script that generates and outputs a JSON formatted object: function test() { autoscaling.describeAutoScalingGroups(params, function(err, data) { if (err) console.log(err, err.stack); // an error occurred else console.lo ...

javascriptarraysjson

Creating a dynamic number of datasets in Chart JSWith Chart JS

After extensive searching, I thought I was on the verge of finding a solution several times, but unfortunately, no luck! I am aware that a similar question was posted yesterday: React Chartjs, how to handle a dynamic number of datasets, but it remains una ...

javascriptajaxloopsdynamicchart.js

What is the process for converting the color names from Vuetify's material design into hexadecimal values within a Vue component?

I'm looking to obtain a Vuetify material design color in hexadecimal format for my Vue component's template. I want to use it in a way that allows me to dynamically apply the color as a border, like this: <div :style="`border: 5px solid $ ...

javascriptvue.jssassvue-componentvuetify.js

Symfony2's W3C XHTML validation fails when validating form submissions according to the W3C standards

Having an issue with valid w3.org XHTML - the validator is showing an error on the required attribute of an input: The attribute "required" is not recognized. I firmly believe that this attribute is necessary, as it is included by Symfony2 form builder f ...

formshtmlvalidationxhtmlsymfony

How can I use lodash to locate and include an additional key within an array object?

I am looking to locate and insert an additional key in an object within an array using lodash. I want to avoid using a for loop and storing data temporarily. "book": [ { "name": "Hulk", "series": [ { "name": "mike", "id": " ...

javascriptarraysfilterlodash

What could be the reason for the inconsistent behavior of onClick, causing it to occasionally fail to display the associated

I just started using typescript 2 days ago, mainly to create a custom component for my streamlit app. I've made a navigation bar with a tab that can be clicked on the sidebar, but it's displaying some erratic behavior. Sometimes when I click on t ...

pythonhtmltypescriptonclicktabs

Update the CSS of a different element when hovering

Hello to all the jQuery developers out there! I have a question that's fairly simple. I'm trying to change a CSS attribute for an element when I hover over a different element on the page. I've created a fiddle for you to review, and I&apos ...

jquerycsshover

Infinite dice roller for a six-sided die

Looking for assistance with a School JavaScript assignment focusing on creating a 6-sided dice roller program? Need some guidance on how to approach this task? The program should allow users to choose how many dices to roll, ranging from 1 to 5. The sum o ...

javascript

Should the page.js in a Next.js App router be a server component?

Is it standard practice in Next.js 13 and above (App router) for the page.js of all routes/folders to be a server component? I know that it can be a client component with use client, but is this advisable or are there potential issues during the build proc ...

javascriptreactjswebnext.jsbuild

What is the best way to sort a table by column index using HTML?

I find myself in a situation where I am not well-versed in HTML, Javascript, and CSS. Here is the scenario: <div class="table"> <table class="display-table"> <thead> <tr> ...

javascripthtmlhtml-table

Can basic logic be applied to CSS?

Recently, I have been experimenting with CSS to blur NSFW images in a chatroom until they are hovered over. I have successfully accomplished this task and now my next goal is to implement checkboxes that can toggle the display of these images. I am aware o ...

css

The text box and buttons are not properly aligned

https://i.stack.imgur.com/lxeKw.png I am puzzled by the misalignment of my buttons and text box. <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="Pic">Picture/File</label> <div class="col ...

htmlcssbootstrap-4

Problems with Glitching and Distortions in the Web Audio API

Hey there! I recently delved into exploring the web audio API and put together a simple synthesizer to get familiar with its features. However, I've encountered an issue where the audio gets distorted when subjected to intense sound input. If anyone w ...

javascriptweb-audio-api

Using Angular parameters in Laravel blade files is a powerful tool that can enhance the

Is there a way to utilize Angular parameters in Laravel blade? I attempted the following code: <?php echo \Carbon\Carbon::createFromTimeStamp(strtotime(@{{user.lastseen}})->diffForHumans() ?> and {{\Carbon\Carbon::createFr ...

phpjqueryangularlaravel

Setting dynamic routes in Next.js when the basePath is not the root can be done by carefully configuring the routing system

After following a tutorial on setting up my Next.js project to be located in a subfolder (/app), everything was running smoothly. However, I encountered issues when trying to use dynamic routes for certain pages. I attempted three different approaches: ...

javascriptreactjsnext.js

Retrieve information from a URL using an Express API

Every 45 minutes, my API receives a request: GET http://MyHost/mediciones/sigfox_libelium/{device}/{data}/{time}/{customData#trama} I need to extract {device}, {data}, {time}, and {customData#trama} from the URL and store them in separate variables. This ...

javascriptexpresshttp

Difficulties encountered when trying to load liquid using Javascript

Having trouble loading the Shopify liquid object {{product.price | json}} into JS, as it's displaying NaN with the current code on the front end. Any suggestions on how to properly pass liquid into JS? I've tried two functions but neither seem t ...

javascriptvue.jsliquid

The resource in CosmosDB cannot be found

I have successfully stored documents on Cosmos, but I am encountering an issue when trying to retrieve them using the "read" method. this.cosmos = new CosmosClient({ endpoint: '' key: '' }); this.partitionKey = '/id' thi ...

javascripttypescriptazureazure-cosmosdb

Issue in VueJs where mutations do not properly save new objects to the state

I am facing an issue with updating my vuex store after modifying my user credentials in a component. Below is the code snippet for reference: mutations: { updateUserState: function(state, user) { state.user = user; }, } actions: { updat ...

javascripttypescriptvue.jsvuex

The settings of the button return to their default state once it is clicked on

I've been working on a small project and I added a button with hover and CSS effects. However, the issue is that once the button is clicked, it reverts back to its basic state without any of the CSS properties applied. I attempted to troubleshoot if ...

javascripthtmlcss