NickP
NickP

Reputation: 1414

JQuery Ignoring styling / position when appending

I have written a simple Greasemonkey script to check the content of a path on site and, depending on the result, hopefully display a button floating in the bottom right.

Testing the following HTML, I managed to add the button but, when I wrap this in JQuery, it doesnt seem to have any styling effect:

(function() { 
    var pathname = window.location.pathname;
    $.get('/tap_active?u='+pathname, function(result){       
        if (/1/i.test (result) ) {
            alert ("Found it!");  
            $("body").append ( '<div id="gmSomeID"> <a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">add</i></a></div>' );
        }
    });  

    GM_addStyle(
        "#gmSomeID {"+
            "position: absolute;"+
            "bottom:0;"+
            "right:0;"+
        "}" 
    );
})();

The GM_addStyle here doesn't seem to have any affect as my append ends up right at the bottom of the body and not floating in the bottom right corner as hoped.

How does one override the styling of a appended item?

Upvotes: 0

Views: 48

Answers (1)

Why don't you use the $(..).css() method instead? Should be

$("#gmSomeID").css({"position" : "absolute", "bottom":"0",  "right":"0"})

Upvotes: 3

Related Questions