The 'position: fixed' property doesn't work. How to set another parent to div element.

I need to move a div element at the top of the web page. I use this code to reposition it:

document.querySelectorAll('div[data-reactid="div_id_here"]')[0].style = "position: fixed; top: 0px;";

Code (markup):

The element will indeed be repositioned, but it will not be shown at the top of the page, but in other places. I believe that's because it's dependent on its parent element, which is always changing its position. The 'position: fixed' instruction does not seem to work relative to the viewport, but relative to this parent element. I read that in such cases you need to apply 'transform: none;' to its parent. I did that, but without any success.

I am wondering if it's possible to set another parent to this div. For example, I'd like the 'body' tag to act as its parent, and I believe I will then be able to have more control over it.

Is that possible, or what other solution would you recommend to me please?

Thank you,

Alexander

 

Hi Alex100,
could you share an URL link to your page here, please?

 

> could you share an URL link to your page here, please?

Sure, here it is:

https://finance.yahoo.com/quote/AAPL/analysis

The div element I'm interested in repositioning is 'price-targets'. On the web page, it shows up on the right side, and it's called 'Analyst Price Targets'.

In the meantime, I did manage to find a workaround. It's pretty brutal, but it's very effective! ;-) First, I applied the 'visibility: hidden' property to the document body. Now, having a completely blank page, I used a 'for' loop and applied a 'position: fixed' property to ALL the div elements on the page. Finally, I repositioned the 'price-targets' element and also applied a 'visibility: visible' property to make it visible.

So now I can see the 'Analyst Price Targets' section displayed at the top of the page (on a blank page), and it sticks there no matter what! If I would not apply the 'position: fixed' property to ALL the div elements on the page, it would sometime (not everytime!) change its vertical position, like I said in my first message.

If you have a more elegant way of doing this, please let me know. For example, a JS code that would reposition a single section/element on a page without messing up all the page content. The element position should be set relative to the viewport, and it should never change no matter how the other elements on the page change position. An option to make the page blank (except for the element we're looking for) would be nice.

There is a lot of information out there, and I sometimes need to isolate some of it so I can access it in an easier (faster) way.

Alexander

 

Unless you're Yahoo developer how can you...
oh, I see you do the javascript through browser Console, right?

Well, assuming repositioning won't affect this page calculation then I guess you could move that section up to body with appendChild() e.g.

var x = document.querySelector('section[data-test="price-targets"]');
x.style.zIndex = 20;
x.style.backgroundColor = 'lightblue';
z.style.position = 'fixed';
z.style.top = 0;
document.body.appendChild(x);

Code (JavaScript):

 

I'm afraid the code doesn't work. I use Tampermonkey (https://www.tampermonkey.net) to inject JS into web pages, and here's the full script...

// ==UserScript==
// @name  Reposition section
// @namespace  http://tampermonkey.net/
// @include  *finance.yahoo.com/quote/*/analysis*
// ==/UserScript==

var x = document.querySelector('section[data-test="price-targets"]');
x.style.zIndex = 20;
x.style.backgroundColor = 'lightblue';
z.style.position = 'fixed';
z.style.top = 0;
document.body.appendChild(x);

Code (JavaScript):

For some reason the code no longer executes after the second line.

Alexander

 

Uh, I mistyped, it should be x not z. Try this one:

var x = document.querySelector('section[data-test="price-targets"]');
x.style.zIndex = 20;
x.style.backgroundColor = 'lightblue';
x.style.position = 'fixed';
x.style.top = 0;
document.body.appendChild(x);

Code (markup):

 

Thank you!

Yes, it works, although I had to test it on some other website (with another element). It did reposition the content without any issues!

It still doesn't work on Yahoo, but not because there's something wrong with your script. If you load the Yahoo page, you will see that the 'price-targets' section loads 2-3s after the page content loads. And I think that's the reason the section is not repositioned, although I'm not 100% sure of this.

Alexander

 

You're welcome

Yeah, that "price-targets" section seems to be created on-the-fly and my Firefox can't see it until I scrolled down a bit.

I haven' tested this but if Tampermonkey supports a bit complicated script then maybe the following may work. This version makes an attempt to detect "price-targets" section. If section can't be found, it waits 1/2 seconds and re-detect. This loop goes infinitely.

When found however, re-detection loop stops and script then tries to move section to top.

function detect(){
    var x = document.querySelector('section[data-test="price-targets"]'),
        t = null;
    if(!x)
        t = setTimeout(detect, 500); //wait 1/2 seconds to re-detect
    else{
        document.body.appendChild(x);
        x.style.position = 'fixed';
        x.style.top = 0;
        x.style.zIndex = 20;
        x.style.backgroundColor = 'lightblue';
    }
}
detect();

Code (JavaScript):

Good luck and stay healthy!

 

Wonderful, I just finished testing it and I'm glad to say it's working great on the Yahoo page too!

Thank you again, take care!

Alexander