I'm in the process of creating a game where I want to prevent users from resizing or scaling the screen without causing issues. The game consists of one large background with dynamic elements overlayed on top. Currently, the elements are not scaling (they are set to scale with the browser window), which is good, but positioning them correctly was quite challenging.
The main objective is to have the div move up by X pixels when a user hovers over an image. However, these relative images are placed within an absolute box for left and top CSS modifications to the window.
I looked into using negative margins as suggested online, but it doesn't seem to work. While the margins do go negative, the div remains in its original position.
You can view the JSFiddle for the issue at: http://jsfiddle.net/uyx09byn/2/
I would like some advice on the proper approach to solving this. Below is my current jQuery code to maintain the aspect ratio:
$(document).ready(function()
{
setSizes();
});
$(window).resize(function()
{
setSizes();
});
var widthMultiplier;
var heightMultiplier;
var normalWidth = 1920;
var normalHeight = 1080;
var offsets;
function setSizes()
{
widthMultiplier = ($(window).height()/9*16) / normalWidth;
heightMultiplier = $(window).height() / normalHeight;
//Background Image
$('#stadium').height($(window).height());
$('#stadium').width($(window).height()/9*16);
offsets = $('#stadium').offset();
//playerspace
$("#players").width(946 * widthMultiplier);
$("#players").height(130 * heightMultiplier);
$("#players").css("left", (((1920 * widthMultiplier) * 29.8 / 100) + offsets.left) + "px");
$("#players").css("top", (((1080 * heightMultiplier) * 77.9 / 100) + offsets.top) + "px");
//players
$(".player").width(86 * widthMultiplier);
$(".player").height(115 * heightMultiplier);
$(".player").css("margin", (5.5 * heightMultiplier) + "px " + (4 * widthMultiplier) + "px " + (4 * heightMultiplier) + "px " + (4 * widthMultiplier) + "px");
var lefttemp;
$(".player").mouseover(function()
{
console.log("UP: " + this.id);
$(this).css({marginTop: '-=15px'});
});
$(".player").mouseout(function()
{
console.log("DOWN: " + this.id);
$(this).css({marginTop: '+=15px'});
});
}