How to resize / scale / reposition all divs accordingly when the browser window size changes with js & jQuery?

Question

Hello I currently have a site that is very simple. It consists of a background image that is full frame and a container div... The background image is dynamically centered and placed with css rules like so:

html {
    background: url(../images/hotel_room.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

This seems to work well for me and keeps the background image positioned in a sort of "responsive" fashion, which is exactly what I was going for!

I also have a container div that is full width and positioned like this:

#mega_wrap{
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width:100%;
}

Next I have some simple jQuery that appends a div to the #mega_wrap container using an onClick based on where the mouse is at the moment it's clicked... Like so:

$(document).ready(function() {

    //onClick append a resizable & draggable div with handles on all 4 corners
    $('#mega_wrap').click(function(e){

        //Define element css and positioning then add both draggable and resizable from jQuery UI
        var ele = $("<div>");
            ele.css({width:"100px", height:"100px", border:"3px dashed white", position:"absolute", left: e.pageX - 50, top: e.pageY -50});
            ele.draggable();
            ele.resizable({
                handles: 'all'
            }); 

        //Define elements handles and append them to the new div
        var eleHandleNE = $("<div class='ui-resizable-handle ui-resizable-ne' id='negrip'>");
        var eleHandleSE = $("<div class='ui-resizable-handle ui-resizable-se' id='segrip'>");
        var eleHandleSW = $("<div class='ui-resizable-handle ui-resizable-sw' id='swgrip'>");
        var eleHandleNW = $("<div class='ui-resizable-handle ui-resizable-nw' id='nwgrip'>");

            eleHandleNE.appendTo(ele);
            eleHandleSE.appendTo(ele);
            eleHandleSW.appendTo(ele);
            eleHandleNW.appendTo(ele);

        //Append new div to the container div called mega_wrap
        $("#mega_wrap").append(ele);

   }); 
});

NOTE: All the divs are resizable on all corners AND draggable using jQuery... So the divs can potentially be any size and anywhere within the container #mega_wrap....... This is where my problem(s) starts:

I am looking for a way to track the position of ALL OF THE APPENDED DIVS using some sort of variable per div maybe?! Using either javascript or jquery?? Then I need to be able to update that variable if/when the divs are resized or dragged around the container!

AND FINALLY... When the window is resized I need the divs to resize to their EXACT old positions over the background image... So each div would scale appropriately (up or down) with a locked ratio according to the window size?!?

NOTE: Thinking I might have to do the background image differently depending on the solutions provided? Open to suggestions.... maybe changed from .css to .js or php?

HELP IS GREATLY APPRECIATED.... TIY

Answer 1

I typically add an attribute to each div:

var eleHandleNE = '<div class="ww xx yy" id="zz" iniWidth="100" iniHeight="200">';

Later, when $(window).resize(...) fires (or whatever you're using), look for the attribute, and scale it:

$(this).width($(this).attr('iniWidth')*ratio);
$(this).height($(this).attr('iniHeight')*ratio);

BTW, not to be pendantic (esp. since I'm suggesting adding non-standard attribute tags), but your id's should all be unique. If they are, another option is to create an array of objects to store all your initial data. You can then use the array and the id's to retrieve/set your values:

//initial div's attrs
divArray = new Array({id:'#id0',width:100,height:200},{id:'#id1',width:50,height:90});
...
//adding another div later
divArray[divArray.length] = {id:'#id2',width:300,height:500};

//Resize stuff...
function resizeStuff(divArray,ratio) {
  for(i=0;i<divArray.length; i++) {
    $(divArray[i].id).width((divArray[i].width*ratio);
    $(divArray[i].id).height((divArray[i].height*ratio);
  }
}