I've searched this topic for awhile, and the answer may have been in front of me but I wasn't able to put it all together. What I am trying to do is resize a custom slider like section area.
I am using bootstrap as a framework, but jQuery works best here because the contents inside the container are using absolute positioning and have random top/left values generated in the admin panel with jQuerys very own .draggable function.
Id like to keep it as basic as possible, and I figure all it would take is some 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, and I can divide all css properties, like top/left width/height, but I have no clue how I would do the math here so that the content adjusts well with the browser resize.
I made a quick fiddle for a visual demo FIDDLE
I am not trying to recreate the wheel here this question is straight forward I am not looking to do it any one particular way, but a rather common way as I am sure this is quite common in modern practice. The only reason finding an answer for this is hard for me is because the contents inside the container are absolutely positioned and random.
Summed up: I'd like to use .resize() and do some math on all children's width, height, left, and top values. I am not sure how to do this math, and I suspect it's a little more complex than that, but that's the principle I am looking for.
Additional Note: I am a huge fan of the layerslider plugin, they did a fantastic job. I am trying to study this because I really like the ability to drag the layers to the position you want, thats cool and essentially all it takes is .draggable() and a database. I tried studying it for the responsive part as well, but the jQuery that contains this function is 3,000 lines of code (I cant believe someone actually wrote that much code, I fell asleep scrolling threw it lol) but somewhere they write this flawlessly and if you look at their demo page you will see what I am talking about.
Update:
var w = $(window).width();
if((w) > 800) {
//Figuring out what to do lol, but nothing for now
}
else {
// Doing this when window is under 800px
$('.sublayer_1 div, .sublayer_1 img').css({'left': w/2, 'width': w});
}
This works kinda how I want it, I need to add-on to it of course, but maybe someone can help me write something a little more advanced?
What the code above is doing is changing the left and width of my element as the browser is re-sizing by diving the window width by 2, I vaguely see why that works, but I can't quite wrap my head around it lol I hate math.
