CSS doesn't support arithmetic such as margin-left: -60px + 50% of the width of the parent div. But my desire to do so is overwhelming. Does anyone know a solution using JavaScript or otherwise?
Thanks
Mike
views:
76answers:
2
+2
A:
Try this:
var elem = document.getElementById("foobar"),
parent = elem.parentNode;
while (parent && parent.nodeName != "DIV") {
parent = parent.parentNode;
}
if (parent.nodeName == "DIV") {
elem.style.marginLeft = - 60 + (parent.style.width * 0.5) + "px";
} else {
elem.style.marginLeft = "-60px";
}
Gumbo
2009-07-25 17:35:02
Is there a way to get by Class rather than ID? Thanks again.
Mike
2009-07-25 17:59:42
Yes, `getElementById` was just an example. `getElementsByClassName` is implemented in some browser but not in all yet. So you should better use a framework like jQuery. See thedz’s answer.
Gumbo
2009-07-25 18:02:35
This internal tool only needs to work in Safari 4. I'm not getting into the while loop. The 'innerBox' class is an absolute div and its parent is the 'container' class relative div. Here's the code I modified (sorry I don't see how to make it appear as code in comments): var elem = document.getElementsByClassName("innerBox"), parent = elem.parentNode; while (parent } if (parent.nodeName == "DIV") { elem.style.marginLeft = - 60 + (parent.style.width * 0.5) + "px"; } else { elem.style.marginLeft = "-60px"; }
Mike
2009-07-25 18:49:12
`getElementsByClassName` returns a list of elements with that class. So you have to iterate over that list (simple `for` loop) and put everything into that loop. So: `var elems = document.getElementsByClassName("innerBox"); for (var i=0; i<elems.length; i++) { var elem = elems[i], parent = elem.parentNode; … }`.
Gumbo
2009-07-25 19:10:10
A:
It's certainly possible with JS, but the specific code will differ depending on what you use (vanilla, frameworks, etc.). Here's a jQuery example:
$('#div').css('width', (-60+($('#div').parent().width()*.5))+'px');
thedz
2009-07-25 17:36:01