CODEWITHSUNDEEP
javascriptjquery
Ross
Ross

Reputation: 1425

Setting a dynamic margin

So I have this issue with setting a margin that dynamical decreases and increases to a minimum of 8px and maximum of 40px.

The margin is being set between 11 different blocks which are inside a container. The container can be a minimum width of 960px or a maximum of 1280px and always has a fixed height.

How can I make it so that the space (margin-left) in between the boxes always stretches to fill the container correctly?

Below is an image of what I am aiming for at 960px width

960px width container

Now an an image of it at it's full width of 1280px

1280px width container

As you can see from the images all im trying to do is separate the boxes as the resolution is changed.

I currently have something like this using jQuery

$(window).bind('resize', function(){ 
    var barWidth = $(".topBar").width(); 
    $(".barModules li").css('margin-left', my dynamic value here));
});

I'm stuck on how I should be calculating this and if that's even the right way to go about it :/

An example of what I have so far: http://jsfiddle.net/m4rGp/

Upvotes: 0

Views: 4439

Answers (3)

Lime
Lime

Reputation: 13532

I would advise using CSS. Just create an outer box around each box.

<div class="outer"><div class="inner">text</div></div>

Here is a jsfidle http://jsfiddle.net/HZKpM/3/

Upvotes: 0

Rocjoe
Rocjoe

Reputation: 459

If...

n = number of LI elements in .barModules

then...

dynamic margin = (barWidth - n * (width of one LI)) / (n - 1)

So your code would look like:

$(window).bind('resize', function(){ 
    var n = $(".barModules li").length;
    var barWidth = $(".topBar").width();
    var liWidth = $(".barModules li:first").width; // if set through CSS, read the "style" attribute instead...
    var dynMargin =  (barWidth - n * liWidth) / (n - 1)

    $(".barModules li").css('margin-right', dynMargin + "px"));  // "margin-right" instead of "margin-left"
    $(".barModules li:last").css('margin-right', '0px');  // don't need margin on last element.
});

// if .length isn't returning the a value for "n", there are other ways to count the sub-elements, check the "children()" method at jquery.com

Upvotes: 1

Daniel A. White
Daniel A. White

Reputation: 190915

I wouldn't do that with javascript. Its a lot of work

You could make a table with cells that are set to the width you want.

http://jsfiddle.net/HZKpM/

You can even add a minwidth in various places.

Upvotes: 0

Related Questions