Margin animate problem with Monitor display settings

Question

I have an issue with an animation on a webpage. I have this div with text inside of it that I set the margin using css and when the page is loaded I use jquery to animate the div to a certain part of the page. The problem is it works with my concrete pixel settings, but if I change the properties of the monitor display settings in screen resolution(pixels), the div does not animate to the appropriate spot and it doesn't even start off at the appropriate spot from the css.

Sample code:

#div{
position:absolute;
top:20px;
left:50px
}

$("#div").animate({marginLeft: "250px"},2000);

Is there a way to have the settings of the animation margin end at the approriate position no matter what the screen resolution is?

Answer 1

You are animating the margin-left property rather then the left position property. My guess is if you switch to that you will get the result you want.

Also you might want to assign a width to your #div as most of the time absolute positioned elements work better with a width.

Answer 2

I was able to find a solution, not sure if the solution is best practice or if its a smart one. Basically what I did was set up an if condition for all different screen resolution settings and with each one have its own parameters. Ex:

if(screen.width==1600&& screen.height==960)
{
   $("#div").animate({marginLeft: "350px"},2000);
}
if(screen.width==1250&& screen.height==7500)
{
   $("#div").animate({marginLeft: "570px"},2000);
}
etc..