1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'JavaScript' started by Alex100, Jun 15, 2021.

  1. #1
    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
     
    Alex100, Jun 15, 2021 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Hi Alex100,
    could you share an URL link to your page here, please?
     
    hdewantara, Jun 17, 2021 IP
  3. Alex100

    Alex100 Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    > 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
     
    Alex100, Jun 18, 2021 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #4
    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):
     
    hdewantara, Jun 18, 2021 IP
  5. Alex100

    Alex100 Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    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
     
    Alex100, Jun 18, 2021 IP
  6. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #6
    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):
     
    hdewantara, Jun 18, 2021 IP
  7. Alex100

    Alex100 Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #7
    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
     
    Alex100, Jun 19, 2021 IP
  8. hdewantara

    hdewantara Well-Known Member

    Messages:
    536
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #8
    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!
     
    hdewantara, Jun 20, 2021 IP
  9. Alex100

    Alex100 Greenhorn

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #9
    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
     
    Last edited: Jun 20, 2021
    Alex100, Jun 20, 2021 IP