How to move an entire div element up x pixels?

JavascriptJqueryTelerik

Javascript Problem Overview


I want to reposition an entire div and its contents up about 10-15 pixels.

How can I do this?

Note: this is slider element, so when I click a button the slider slides down. Once it is finished I want to reposition it up about 15 pixels.

Javascript Solutions


Solution 1 - Javascript

$('#div_id').css({marginTop: '-=15px'});

This will alter the css for the element with the id "div_id"

To get the effect you want I recommend adding the code above to a callback function in your animation (that way the div will be moved up after the animation is complete):

$('#div_id').animate({...}, function () {
    $('#div_id').css({marginTop: '-=15px'});
});

And of course you could animate the change in margin like so:

$('#div_id').animate({marginTop: '-=15px'});

Here are the docs for .css() in jQuery: http://api.jquery.com/css/

And here are the docs for .animate() in jQuery: http://api.jquery.com/animate/

Solution 2 - Javascript

$('div').css({
    position: 'relative',
    top: '-15px'
});

Solution 3 - Javascript

In css add this to the element:

margin-top: -15px; /*for exact positioning */
margin-top: -5%; /* for relative positioning */

you can use either one to position accordingly.

Solution 4 - Javascript

you can also do this

margin-top:-30px; 
min-height:40px;

this "help" to stop the div yanking everything up a bit.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioncodecompletingView Question on Stackoverflow
Solution 1 - JavascriptJasperView Answer on Stackoverflow
Solution 2 - JavascriptgislikonradView Answer on Stackoverflow
Solution 3 - JavascriptsrinivasView Answer on Stackoverflow
Solution 4 - JavascriptMr HeelisView Answer on Stackoverflow