Element's CSS, reverts back at the end of page load?

Question

I am trying to change the position of

<div class="BannerRedesign" id="Banner" style="position: fixed ! important; height: 36px ! important; width: 100% ! important;">
    <div class="BannerCenterContainer" id="NavigationRedesignBannerContainer">

(roblox banner element, trying to make it not float) to relative using Greasemonkey, with all privileges enabled. But, every time, at the end of the loading of the document, it reverts to floating.

I even tried appending bannercentercontainer to a different element, but I don't know if I did it right... can you please help me change this to relative position?

I tried:

$('#Banner').css('position', 'relative !important')

and

if ($('#Banner').css('position') == 'fixed') {
$('#Banner').css('position', 'relative')
}

, but it just changed back once the page finished loading.

element is not stubborn. your code is stubborn !!. edit the title and give meaningful title for question — Ravi Gadag, Jan 31 '13 at 04:38
why are you changing the position css... shouldn't you be changing float:none; ? — VVV, Jan 31 '13 at 04:40
Are you waiting until the DOM is loaded before you run your javascript? — jfriend00, Jan 31 '13 at 04:42

Brock Adams · Answer 1 · 2013-01-31T05:21:46.810

That banner is probably set in the static HTML and periodically reset by AJAX.

One way to fix it is with the waitForKeyElements() utility.

Here is a complete script that will work on the code given in the question:

// ==UserScript==
// @name     _Unfix annoying banner
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements ("#Banner", unFixThePositioning);

function unFixThePositioning (jNode) {
    jNode.css ('position', 'relative');

    //-- Or, for a little extra "Oomph":
    jNode[0].style.setProperty ("position", "relative", "important");

    return true;    //-- Check repeatedly.
}

Element's CSS, reverts back at the end of page load?

1 Answers1

Linked