CODEWITHSUNDEEP
jquerycss
vikas.badola
vikas.badola

Reputation: 137

jquery css property top and left not working

I have following jquery code .

if(bubble.label != undefined){
                        console.log(bubble.label.attr('style'));
                        var bubbleStyle = bubble.label;
                        bubbleStyle.css({
                        color: 'red', 
                        left: 0+'px',
                        top: -660+'px'
                    });
}

In above code css property color: 'red', applies but not left and top . I have tried it with giving position : 'absolute' but it still not works . Please help me on this .Thanks.

Upvotes: 1

Views: 3706

Answers (6)

abhi2523464
abhi2523464

Reputation: 11

Using Jquery .css function updates the top value but the changes are not reflected in screen.

Use bubbleStyle.offset({top: -660}); It will update the top value both in DOM and screen.

Upvotes: 0

mayrs
mayrs

Reputation: 2377

Considering bubble.label is a html label element try the following:

<label id="test">Testlabel</label>

Make sure the label is displayed inline-block and has a relative positioning.

#test {
    display: inline-block;
    position: relative;
    background-color: green;
    color: white;
}

var bubbleStyle = jQuery('#test');

bubbleStyle.css({
    color: 'red',
    backgroundColor: 'orange',
    left: 0,
    top: 660,
});

See the fiddle

Upvotes: 0

eddie.vlagea
eddie.vlagea

Reputation: 667

Try using this:

bubbleStyle.css({
  color: "red", 
  left: "0",
  top: "-660px"
  });

Also, inspect the element to see if the inline style have been applied.

Upvotes: 0

user2424370
user2424370

Reputation:

change the left and top to:

left: '0px',
top: '-660px'

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

use like this.Please make sure position:absolute or relative is set in css. Then only it works otherwise it not works

left: '0px',
top: '-660px'

Upvotes: 1

Felix
Felix

Reputation: 38102

Try to use:

left: 0,
top: -660

instead of:

left: 0+'px',
top: -660+'px'

Upvotes: 1

Related Questions