Using jQuery for responsive .resize() -

i've searched topic awhile, , answer may have been in front of me wasn't able put together. trying resize custom slider section area.

i using bootstrap framework, jquery works best here because contents inside container using absolute positioning , have random top/left values generated in admin panel jquerys own .draggable function.

id keep basic possible, , figure take math. example fiddle

var h = $(window).height(); var w = $(window).width(); var static_h = $('.static-area').height();      if((h/w) > 800) {         $('#main').css({'margin-top': w/1.2});     }     else {          $('#main').css({'margin-top': w/1.2, 'width':w});         $('.static-area div').css({'width': w/2, 'left':0});       }  

this kind of sorta works, , can divide css properties, top/left width/height, have no clue how math here content adjusts browser resize.

i made quick fiddle visual demo fiddle

i not trying recreate wheel here question straight forward not looking 1 particular way, rather common way sure quite common in modern practice. reason finding answer hard me because contents inside container absolutely positioned , random.

summed up: i'd use .resize() , math on children's width, height, left, , top values. not sure how math, , suspect it's little more complex that, that's principle looking for.

additional note: huge fan of layerslider plugin, did fantastic job. trying study because ability drag layers position want, thats cool , takes .draggable() , database. tried studying responsive part well, jquery contains function 3,000 lines of code (i cant believe wrote code, fell asleep scrolling threw lol) somewhere write flawlessly , if @ demo page see talking about.

update:

var w = $(window).width();      if((w) > 800) {         //figuring out lol, nothing     }     else {          // doing when window under 800px         $('.sublayer_1 div, .sublayer_1 img').css({'left': w/2, 'width': w});      } 

this works kinda how want it, need add-on of course, maybe can me write little more advanced?

what code above doing changing left , width of element browser re-sizing diving window width 2, vaguely see why works, can't quite wrap head around lol hate math.

i'm not sure understand problem. have compute ratio of element resize , apply children.

ratio = newwidth / currentwidth;

as use twitter bootstrap, did example on fiddle: http://jsfiddle.net/memel/f7eck/4/

let me know if working you. cheers, e.