Move css top position with Jquery

Question

The following code doesn't seem to work. How would I change it in order to make the div change the position from top?

 div { width:220px; height:170px; margin: 10px 50px 10px 10px;
    background:yellow; border:2px groove; float:right; }

 #alt { width:20px; height:170px; margin: 10px 50px 10px 10px;
        background:blue; border:2px groove; float:right; }

  #altLevel { width:10px; height:20px; 
        background:red; border:2px groove;  }



$('div').mouseclick(function() {
$( '#altLevel').css( 'top', '+=10' );
});

Blazemonger · Accepted Answer · 2012-12-04 21:30:40Z

2

You have to add position:absolute or position:fixed to the styles for #altLevel before you can alter its position. In addition, give it a default position of top:0 or whatever you like:

#altLevel { 
    width:10px; height:20px; 
    position:absolute; top:0;
    background:red; border:2px groove;  
}

Once you do that, your JavaScript should work with a small modification:

$('div').click(function() {
    $('#altLevel').css('top', '+=10');
});

http://jsfiddle.net/mblase75/mGAKe/

edited Dec 4, 2012 at 21:30

answered Dec 4, 2012 at 21:24

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Move css top position with Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related