The child element is positioned absolutely in relation to its grandparent, not its parent, and should only be revealed when clicked

When the child span element is clicked, it should be hidden initially and then when revealed, it should be positioned all the way to the left and have a width of 80% of the screen size relative to its grandparent, not parent.

This is the provided code:

<p>Text text text text

<span style="position: relative; display: inline-block; vertical-align: top; background: #dddddd; overflow: hidden;" onclick="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">(activeword)
<span style="position: absolute; background: white; border: 1px solid black;">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, big text here, dolor sit amet, consectetur adipiscing elit.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, second even bigger text here, dolor sit amet, consectetur adipiscing elit.

</span>
</span> 

text text text end of paragraph text.</p>

(Note: External CSS cannot be used and pseudo-elements that can't go inline are also restricted)

htmlcss

Answer №1

To resolve the issue, you can either transfer the position: relative; property to the p element (example 1) or assign position: relative; to the p and move the inner span outside the outer span (example 2)

As a side note, it is recommended to utilize an external CSS style sheet rather than using inline styles

Updated both examples with a click handler that shows/hides the second span, both as a child and sibling

Example 1 - updated

<p style="position: relative;">Text text text text

  <span style="display: inline-block; vertical-align: top; background: #dddddd; overflow: hidden;" onclick="this.children[this.children.length-1].style.display='block';" onmouseout="this.children[this.children.length-1].style.display='none';">(activeword)
    <span style="position: absolute; background: white; border: 1px solid black; display: none; left: 10%; width: 80%;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, big text here, dolor sit amet, consectetur adipiscing elit.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, second even bigger text here, dolor sit amet, consectetur adipiscing elit.
    </span>
  </span>

  text text text end of paragraph text.</p>

Example 2 - updated

<p style="position: relative;">Text text text text

  <span style="position: relative; display: inline-block; vertical-align: top; background: #dddddd; overflow: hidden;" onclick="this.nextElementSibling.style.display='block';" onmouseout="this.nextElementSibling.style.display='none';">(activeword)  
  </span>
  <span style="position: absolute; background: white; border: 1px solid black; display: none; left: 10%; width: 80%;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, big text here, dolor sit amet, consectetur adipiscing elit.
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, second even bigger text here, dolor sit amet, consectetur adipiscing elit.
  </span>
  
text text text end of paragraph text.</p>

Answer №2

I have made progress towards achieving my desired outcome, although there are still some issues with the functionality:

<p>In my quest for perfection

<span style="position: absolute; display: inline-block; vertical-align: top; background: #dddddd; overflow: hidden;" onclick="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">(activeword)
<span style="position: absolute; background: white; border: 1px solid black; right: 0; width: 200%; top: 2em;">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, a large block of text here, dolor sit amet, consectetur adipiscing elit.<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, another even larger block of text here, dolor sit amet, consectetur adipiscing elit.

</span>
</span> 

text text text end of paragraph text.</p>

However, it is important that the child element remains relative to the grandparent, occupying 80% of the screen size and ensuring that it never extends beyond the boundaries of the screen.

You can view the current state of the project here: https://jsbin.com/jubobugonu/1/watch?html,output

@LGSon Here is an alternative example using "style.opacity":

  <p>Starting off the paragraph with some introductory text 
    <span class="clickword" style="position:relative; display: inline-block; background: #dddd00; color: blue; text-decoration: underline;" onclick="this.getElementsByClassName('tooltip')[0].style.opacity='1';" onmouseout="this.getElementsByClassName('tooltip')[0].style.opacity='0';" >(activeword)
      <span class="tooltip" style="position:fixed; display: block; left: 10%; right: 10%; background-color:white; color: black; border: 1px solid #777; padding: 5px; border-radius:5px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); -webkit-box-shadow:  0 0 30px rgba(0, 0, 0, 0.5); -moz-box-shadow:  0 0 30px rgba(0, 0, 0, 0.5);  -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s;">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, a large block of text here, dolor sit amet, consectetur adipiscing elit.<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lorem ipsum, another even larger block of text here, dolor sit amet, consectetur adipiscing elit.
      </span>    
    </span> 
  text text text end of paragraph text text text text text text.</p>

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

Execute PHP and HTML code stored in a string

I have a string stored in a variable within my PHP code that looks like this: <?php $string = " <?php $var = 'John'; ?> <p>My name is <?php echo $var; ?></p> "; ?> When using the $string variable elsewhere, I ...

phphtml

troubleshoot clientWidth not updating when CSS changes are made

Summary: When I adjust the size of a DOM element using CSS, its directive fails to acknowledge this change even with a watch on the size. Aim I have multiple custom directives (simple-graph) each containing an svg. My goal is to enlarge the one under the ...

javascriptcssangularjsangularjs-directive

Looking for tips on how to add password protection to any form field? Share your suggestions!

How can I create a password-protected field (select box - dropdown) in a form? When the user clicks on the dropdown, a prompt will appear asking for a password. If the correct password is entered, then the user can proceed to select a value from the dropd ...

javascriptphpjqueryhtmlforms

Tips for eliminating the white flash while transitioning background images with animation?

I am facing an issue with my code where the background image of the site transitions between 5 different images, but every time an animation completes and the next one starts, there's a white flash. I'm not sure how to resolve it or what I might ...

csshtmlcss-animations

Shopping cart feature in PHP - Ajax response only functioning once

I'm in the process of developing a shopping cart. I start by adding products to the cart, then use Ajax to dynamically update the quantity when it changes. Everything works smoothly after the first change, but subsequent quantity updates do not refres ...

javascriptphpjqueryhtmlajax

What is the best way to create a percentage glyphicon star icon that reflects a decimal average rating?

I have an average rating of 4.3 and I need to create a logic to display this as 4.3 stars (4 whole stars and the 5th star partially filled). The maximum rating is out of 5. Despite referring to examples on Stack Overflow and creating a JSFiddle, I am unabl ...

javascriptangularjshtmltwitter-bootstrap-3woff

When the content div is clicked within the overlay div, the popup will also close

I want to design a pop-up that features a container with a black background and some opacity, where the content of the popup is placed inside. Here's what I have in mind: <button (click)="showPopup = !showPopup">Open popup</button& ...

htmlcssangularjs

Persist with displaying and concealing divs as we navigate through different pages

Incorporating a function into my main page has been successful so far, but I am seeking guidance on how to effectively utilize the function: localStorage.setItem("language", selectedLanguage); currentlanguage= localStorage.getItem("language"); My object ...

javascriptjqueryhtmlcssshow-hide

What is the best way for a background-image to determine its height in CSS?

I am currently working on a website project and I would like to include my title using a background-image because it uses a unique font. In my design class, we were taught that this is the best approach. However, I am struggling with setting the correct di ...

htmlimagecss

The alignment of the text does not match the custom checkbox

Looking to customize checkboxes in GWT with CSS only. Successfully styled checkboxes without text, but struggling with checkboxes next to text. Current appearance: https://i.sstatic.net/Z3uYH.png Desired look: https://i.sstatic.net/Ligx1.png <span ...

htmlcssgwtcheckbox

Passing $index variable from a bootstrap modal window does not work in AngularJS

I'm running into a wall here. My issue involves using ng-repeat to populate a table with two buttons in each row - one for updating the row content and another for uploading files. The upload button triggers a bootstrap modal window where users can se ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Is there a way to determine if jQuery lightslider has been initialized, and if so, how can I effectively remove the instance?

Currently, I have integrated the JQuery lightSlider into my project. Despite some code adjustments, it is functioning well. My goal is to dynamically replace the lightSlider content with data returned via AJAX, which I have successfully achieved. After r ...

javascriptjqueryhtmlcssajax

Utilizing Webpack to emulate the @apply functionality of Tailwind CSS and shift away from using @extend in SASS

I am currently developing an internal CSS 'framework' / methodology that falls somewhere in between ITCSS and Tailwind. We heavily rely on utility classes, but sometimes the length of the actual class name becomes too much and we feel the need t ...

csswebpacksasstailwind-css

What is the best way to create a view that caters to both administrators and regular users?

Currently, I am developing a system in Django which displays different fields and options based on whether the user is an administrator or a Jefe from the table. The administrator can access the panel in Django. class UsuarioCrear(SuccessMessageMixin, Crea ...

htmlpython-3.xdjangopostgresql

Incorporate dynamic JavaScript content within an HTML document

Currently, I am facing an issue with a webpage that I need to load in order to extract some information. Using HttpClient and Jsoup worked well for loading the majority of the content on the page. However, my problem lies with certain elements that are onl ...

javascriptandroidhtmlwebjava

Issue with the position of the search dropdown in HTML

When we click on the Dropdown option, it appears above the text instead of below. I have been trying to fix the positioning issue where the Dropdown shows up separately after clicking, but I have not been successful so far. Maybe you can offer some assist ...

javascripthtmljquerycssdrop-down-menu

Flex rows adjust to display as flex columns when viewed on tablets

Currently facing a challenge with responsive flex boxes. On desktop, I have 5 items in one row, but I need them to be displayed as 2 columns on tablets, with each column containing respective items. Additionally, 3 out of the 5 items should function as acc ...

htmlcss

Incorporating a full-page background into a specific view using AngularJS

In order to implement a fullscreen CSS background for a specific view in my app, I attempted adding a class to the body. However, this approach caused the background to persist in the cache and remain visible when switching views. The challenge arises fro ...

javascriptjquerycssangularjs

scrolling modal in bootstrap does not function properly if a navigation tab is included within it

I am encountering an issue with a scrolling Bootstrap modal. When I include a nav-tabs within the modal, the scroll function stops working. However, if I remove the nav-tabs, the functionality returns. Do you have any insights on how to solve this problem? ...

javascripthtmlcssbootstrap-4bootstrap-modal

Directly within Angular, map the JSON data to an object for easy assignment

I came across this information on https://angular.io/guide/http. According to the source, in order to access properties defined in an interface, it is necessary to convert the plain object obtained from JSON into the required response type. To access pr ...

htmlangulartypescript