-1

Child span element should be hidden until clicked; after it's revealed child should be all the way left and 80% width of the screen size, relative to grandparent, not parent.

This is the 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>

(Notes: Can't use external CSS; can't use pseudo-elements as they can't go inline)

Mark5
  • 3
  • 4
  • Remove `position: relative;` from the parent span, and give the child span `left: 0;` and `width: 80%;`. – Tyler Roper Oct 17 '16 at 15:09
  • @Santi Can't do that as "Loerm ipsum big text" should remain hidden until clicked. Take a look at my snippet to see what functionality I need to preserve. – Mark5 Oct 19 '16 at 03:26
  • @Mistalis I have tried a bunch of things, stuck at this point though. – Mark5 Oct 19 '16 at 03:28

2 Answers2

1

You'll have to either move the position: relative; to the p element (sample 1), or give the p position: relative; and move the inner span outside the outer span (sample 2)

A side note, I recommend you use an external CSS style sheet instead of inline styles

Updated both samples with a click handler showing/hiding the 2:d span, both as a child and sibling

Sample 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>

Sample 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>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Thanks, but none of these work correctly, since that "Loerm ipsum big text" should remain hidden until clicked. Take a look at my snippet to see what functionality I need to preserve. – Mark5 Oct 19 '16 at 03:20
  • As for your side note, I can't since all CSS needs to be inline. – Mark5 Oct 19 '16 at 03:22
  • @Marko That question edit made it quite different ... will have a look when I come back from today's works – Asons Oct 19 '16 at 04:58
  • @Marko It is difficult to understand what you ask. Please post a drawing/image of the inner child being hidden and showed. – Asons Oct 19 '16 at 16:02
  • No difference really, just made it more clear, the snippet code is the same as the original. Can you see the difference between my snippet and your proposed solutions? The child should remain hidden until parent is clicked; and child should be positioned relative to grandparent – Mark5 Oct 19 '16 at 20:11
  • Child should be a bit below, and to the left, 80% width of the screen, relative to grandparent. – Mark5 Oct 19 '16 at 20:14
  • @Marko Updated my answer – Asons Oct 20 '16 at 17:36
  • thanks for the effort, I really appreciate it! Unfortunately, that the code won't work with the ".style.display='block'/'none'", only ".style.overflow=''/'hidden'". Any other than overflow, will not move the "hard-coded" elements in the App, where I'm trying to implement this code. I've tried with "display" before, but it won't "make space for itself" when changed from none to block. Only when overflow is used, the "hard-coded" elements will move down to actually show those hidden paragraphs. – Mark5 Oct 23 '16 at 04:36
  • You can disregard my previous comment, as I've talked with the app developer, and he said he will change those "hard-coded" elements, and make style.display work most likely. I will get back to you about that later today or tomorrow and let you know if "style.display" is working correctly or not. – Mark5 Oct 24 '16 at 05:12
  • It's working now! Both of your solutions with "style.display" are showing up correctly within the "pre-coded" elements in the app. Thank you for your help! – Mark5 Oct 25 '16 at 05:48
  • Btw, prior to trying with "style.display", I was still trying with "style.opacity", so I could use "transition: opacity 0.5s;" for child element: https://jsbin.com/huqohopowa/watch?html,output – Mark5 Oct 25 '16 at 06:17
  • Is that transition possible ^ with your current code and by using "style.display"? – Mark5 Oct 25 '16 at 06:19
  • @Marko No, one can't animate the display property, though here is a trick using `max-height`: http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css – Asons Oct 25 '16 at 16:01
  • Thanks for the link, but I can't use it, as I can't use pseudo-elements / pseudo-selectors at all, only inline CSS. Is there a way I could make any of your two examples work with "style.opacity", similar to what I've been using here: https://jsbin.com/huqohopowa/watch?html,output? – Mark5 Oct 26 '16 at 04:00
  • Added one more snippet, with "style.opacity" example, in the answer below. – Mark5 Oct 26 '16 at 04:21
  • So, no solution possible with "style.opacity" in this case? – Mark5 Oct 29 '16 at 11:18
  • @Mark5 Don't understand what you mean, you posted a version of mine having "style.opacity", ... should I add that to my answer? – Asons Oct 29 '16 at 11:26
  • @Mark5 And btw, the `max-height` sample link above does not use pseudo element itself, it just used the `hover` showing how it works – Asons Oct 29 '16 at 11:28
  • @Mark5 And if you understand how this work, it is not difficult to write it up, if not, I recommend you elaborate with what I gave until you do, or else every little thing will cause you big trouble in the future – Asons Oct 29 '16 at 11:32
  • OK, I thought I understood what the problem was, I will take another look. Thanks! – Mark5 Oct 30 '16 at 05:35
0

I came closer to what I need (but not functioning exactly as it should be):

<p>Text text text text

<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, big text here, dolor sit amet, consectetur adipiscing elit.<br/>
&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>

Still, child needs to be relative to grandparent, it should be 80% of whatever the screen size is, and it shouldn't go off the screen ever.

You can see it here as well: https://jsbin.com/jubobugonu/1/watch?html,output

@LGSon Here's the example with "style.opacity":

  <p>Text text text paragraph start text text text text text 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, big text here, dolor sit amet, consectetur adipiscing elit.<br/>
        &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 text text text text text.</p>
Mark5
  • 3
  • 4