ansaurus

Question

creating margin with jQuery to position element below absolutely positioned element

Answer 1

+1 A:

This won't work?

$('#fooBar').css('margin-top', $('ul#bar').height() + 80);

Floyd Pink 2010-09-17 19:44:26

I should add this: where I am logged in now from, that image is blocked by the proxy and I did not see it.

Floyd Pink 2010-09-17 19:45:51

@Floyd Pink, sorry about the proxy its just hosted at image shack. But I think yours is right, I didn't have the spaces around the "+" sign. thx man.

Dirty Bird Design 2010-09-17 20:19:49

glad it helped. :)

Floyd Pink 2010-09-18 18:54:28

Answer 2

+1 A:

Wouldn't it be easier to absolutely position a container instead of the ul, and setup the elements as you like within it? This way they position themselves without JavaScript ever needing to be involved.

For example:

<html>
<head>
<style>
#container{
    position:absolute;
    top:100px;
    left:100px;
    background-color:lightblue;
}
#foo{
    width:100%;
    background-color:navy;
}
#fooBar{
    width:100%;
    background-color:green;
    margin-top:80px;
}
</style>
</head>
<body>

<div id="container">
<div id="foo">Foo</div>
<ul>
<li>Test</li>
<li>Test</li>
</ul>
<div id="fooBar">fooBar</div>
</div>    

</body>
</html>

Bob 2010-09-17 19:48:23

Yeah, +1 for Bob. If #bar itself is absolutely positioned, it is completely removed from the flow of the document, so top margin on #fooBar will never have any impact on its position relative to #bar. Wrapping a common parent element around #foo and #fooBar, and absolutely postioning that parent instead of #bar, should do exactly what you want and require no JavaScript.

RwL 2010-09-17 19:53:39

No. It has to be absolutely positioned due to layout. Believe me this is the best way to do it. The li's expand out and need to overlay the content to the right of it when they are active.

Dirty Bird Design 2010-09-17 20:19:05

Without seeing what you're working with, it's hard to guess why you would absolutely (get it?) have to position it this way, but I think you may be misunderstanding what absolute positioning is for. You are removing it COMPLETELY from the layout, so it can play by its own rules, so any attempts to move elements around or with it are going to be a duct taped mess.

Bob 2010-09-17 20:25:18

@Bob. thanks for that, I didn't need a tutorial on positioning, just an answer to my question.

Dirty Bird Design 2010-09-17 20:27:59

My apologies, I tend to question statements like 'has to be'. I'm sure you know what you're doing, I've just found when I'm forced to use absolute positioning and javascript libraries to fix a design flaw, I've probably made a more fundamental mistake - not trying to force methodologies on you.

Bob 2010-09-17 20:38:51

I avoid all absolutely positioned elements as much as possible. Believe me! Unfortunately this was the easiest solution to get to work across the board. I was just trying to find a more efficient way than adding a separate class with a different margin for each instance based on the number of li's in the absolutely positioned ul.

Dirty Bird Design 2010-09-17 20:48:41

ansaurus

tags:

views:

answers:

creating margin with jQuery to position element below absolutely positioned element

related questions