i am trying to add tooltip for my d3 chart and is now having some problem with positioning.
What i want to get is the horizontal margin length between a div and it's father html in javascript.
you may have a look at the attached picture.
Since my page is embedded in a complex web page so i cannot get the css margin directly. But i really need that to position my tooltip.
Can anyone give me a solution?
You need the JavaScript offsetLeft property.
From https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft :
The HTMLElement.offsetLeft read-only method returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.
CSS margins are not very suitable for this, because if you have floating elements or inline-blocks, it depends on the screen width how many elements are to the left of your div. So that's not calculable directly.
Related
I am trying to learn and make a reference for myself but i can't find correct, enough, and not so confusing information. So tell me how to find the width of these..
Assume there is DOM element with 10px padding all around, border 5px all around, margin 30 px all around, and content that is too long for it so has scroll bars.
Find widths using javascript...
upto Margin.
upto Border.
Inside Border Padding and plus vertical scroll bar if present.
upto padding excluding vertical scrollbar if present.
upto content only that is visible. (no scrollBar, padding, border, margin, extra content)
upto content that's visible and hidden in scrollable area and with padding
upto content that's visible and hidden in scrollable area and with out padding
Javascript as too many unintuitive catches so please make it clear once and for all.
So far I have gotten this:
unknown
element.offsetWidth
unknown
element.clientWidth
unknown ( css width ?)
element.scrollWidth (see below)
unknown
only workarounds that i know are using lots of javascript to get computed values and then calculate all of these manually..but maybe there are builtin functions or better way to find things.
more Problems:
scrollWidth includes only left padding..shouldn't it either include both or none or at least have other options that do. LINK
box Sizing to border box changes the whole world and every question above needs to be answered again for that. For example for 5 css width property won't be true anymore.
There is no one function that will solve what you're asking for.
.outerWidth() will give the the size of an element, padding, borders, contained content and all. It will not however give you the margin of the element. Using the .outerWidth(true) parameter will give you the width of the element including the margin.
.innerWidth() will give you the width of the element. It is the total width of the content in the element plus the padding, but not the border,
If for some reason you want to know the difference between the inner and outer widths. Which is pretty much the border width or the difference between the edge of the border and the margins just subtract them from one another.
$widthDif = outerWidth(."Somethng") - .innerWidth('.something');
The inner and outer width function are mirrored and work the exact same for height.
Generally if you use .innerWidth() on something like the main body element it returns the width of the document minus the scroll bar because the scroll-bar is not part of the content view port.
Inside of an element is another story.
Best thing I could find in a google search was another StackOverflow question. Which outline rendering and element to 100% width inside of the scrollable element, getting its width and then deleting the element since it is unneeded. Getting the height of something minus a horizontal scrollbar could be found the same way. However once you have a vertical and horizontal scrollbar at the same time things could/would get complicated because the 100% height or width element could expand beyond what is in the view-able space depending on how the content is rendered into the element with the scrollbars.
I am trying to find the top and left coordinates of a background-image that by applying some CSS rules has been shifted off the viewport. Difficult to explain in words, here is a visual example:
Black box: Viewport
Red box: <div> with a background-image
Blue box: <div> containing an <a>
When I do getBoundingClientRect of the <div> with the background-image, I get 0px 0px. It makes sense, because the container is within the viewport, and it starts at the very top and left.
However, the background-image of that <div> has been shifted to the left (and it could have been shifted to the top too), and therefore the coordinates should differ from the ones from the <div>. So my question is:
How would I READ (I don't want to change) How can I find the coordinates of the green point in any page that is facing this situation? I mean, the browser must have known how many pixels it needs to cut the background-image, right?
I am currently using Javascript to access the Web/Dom API. I am willing to use anything (undocumented maybe?) to achieve this.
Here is a solution to your problem that works on modern browsers.
var testNode = document.getElementById('test');
var testBackgroundPosition = getComputedStyle(testNode,null).backgroundPosition.replace(/px/g,'').split(' ');
As you can see from the following page not all web browsers support this method.
http://caniuse.com/getcomputedstyle
There is no answer to the "Cross-browser (IE8-) getComputedStyle with Javascript?" question yet and I don't know another solution to this problem.
Without getComputedStyle() there is no reasonable way of getting the current style settings for an element since that requires going through all of the included CSS. It is possible but involves CPU intensive code. If you were to go that direction you will be able to create a temporary div inside the existing div with relative positioning, possibly setting top and left, or margins, to the values from the background position and then calculate where the div's clientTop and clientLeft ends up which may work in some cases.
There is a css property for that: the background-position. Try the following code to retrieve the information asked for:
$('#divId').css('backgroundPosition');
I'm working on this website right now http://antoniobrandao.com/v4
All objects are placed in absolute positions. Unfortunately this doesn't enable vertical scrolling.
I've read that using position:static in a parent element (in my case, the DIV sections-wrapper ) would do the trick, and yes a scrollbar appears, but the contents seem visually destroyed when I attempt to scroll after setting position: fixed to my sections-wrapper DIV.
I'm new to HTML5 so if anyone could give me a hint I would be most thankful!
thanks
I found out the answer to my own question.
The solution was to manually (via JavaScript) set the height of my "sections-wrapper" and "background" to match the height of the contents of the sections within the "sections-wrapper".
This is because the "sections-wrapper" doesn't know automagically how tall is the stuff within itself, so we must tell it ourselves. The downside is that we must always be updating this values when the contents change height within the wrapper. Not too bad.
so if the stuff within my wrapper is eg. 1200px:
$('.background').css('height', '1200px');
$('#sections-wrapper').css('height', '1200px');
I am using an Android WebView to display my app's HTML content. I need to dynamically find the full height of an element (usually a div) including padding, margin, and border. I am using JavaScript, and cannot use jQuery.
I have been using scrollHeight on my div to get the height. I got the computed style of the div using var style = window.getComputedStyle(DIV, null); and got the top and bottom margin by calling style.marginTop and style.marginBottom. They were both 0px. The problem is that scrollHeight still does not account for the height of the margins belonging to div's.
I got the child elements of my div (usually a P or H* tag) and obtained the same fields the same way: scrollHeight, marginTop, and marginBottom. The scrollHeights are the exact same (as I usually only have one child per div), but there is usually a top or bottom margin value in the child that is not reflected in the parent element.
I don't really understand why this is so. It appears as through the child's margin is rendered outside of parent, but the parent has no knowledge of it, and cannot directly access it.
I am looking for a way to access the margin defined by the child through the parent element. Is that possible?
This Question was very helpful, but I did not find an underlying reason for why it is rendered this way and the thread seems to have grown cold.
Thanks!
Sime Vidas pointed me in the right direction, so thanks!
I found myself trying to find out the exact height of the collapsed margins between divs and their children (but worded it much differently in my question). When accessing that information trough the DOM it will tell me style attributes of the parents and children, but it does not report the height of any collapsed margins.
So...the real answer to my question is NO. I have not been able to find a way to directly access the attribute of the collapsed margins.
What is just as good is taking the offsetTop attribute of my div, and finding the difference between the offsetTop attribute of the next Div. That gives the total height including final rendering of margins. To find the margins only, subtract the scrollHeight.
This may not work in all scenarios, but was more than enough for my purposes.
How do you place HTML controls dynamically into a div with x,y positions, without using absolute as position?
I am generating HTML controls dynamically in ASP.NET with x, y positions having absolute position. I have two files where I put two different div's, I fill the div's content with the generated one, but because of absolute position it places the control taking page as relative to that, but not the div.
I want the exact positions inside the div it self rather than page.
For example if I got top as 20px and left as 40px with absolute, the control should start from the same position inside div, but it places the control with page.
Please help me to place the control inside the div itself with x,y positions without using absolute position.
To place an element by specifying left and top pixel distances you must use absolute positioning. However, it sounds like you want this position to be relative to the containing element, not the body of the document. If that is the case, make the containing element position: relative.
Example fiddle
Sounds like Rory's got you covered, but in the event that you don't want the controls to not be taken out of the layout, you might try using margin-left and margin-top.
Example jsFiddle