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.
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 working on a slider of sorts, and I am having a bit of trouble calculating the height and width of some children elements that fall outside of the defined area of the parent block element. They are in the hidden area of it in a matter of speaking.
So I am trying to figure out if elements in that void suffer a similar fate to elements styled with display:none where the javascript running with the DOM can't detect the height or width of them even if styled with a height and width, it treats it as if the element didn't exist for the most part in that aspect. Elements that are currently in my hidden void are not styled with display:none.
So, is it maybe something I doing or is it that they do suffer that fate?
I believe elements inside a parent with overflow: hidden are still rendered completely and have detectable, accurate dimensions - even when they do overflow their parents. Here's a fiddle to that effect.
There may be some cases where this is not true. If so, then it is dependent on styling.
I am making a CMS for a website. In the CMS I want to make a drag/drop/select -able index.
Dragging and dropping on a placeholder was not really smooth. But after I added overflow: auto to the div's where you can drag/drop/select, it is way more smoother and easier to work with.
Can someone explain me why this is happening?
It only shows if you have many div's in your webpage. (Like in an almost finished website.)
This happens in Chrome and Firefox. (I didn't test it in other browsers.)
With overflow auto <-- smoother
Without overflow auto <-- It doesn't do what you want
You must think about the HTML elements. Every HTML element is wrapped within its own 'box'. For each box, you can set its CSS properties like height, width, margin, padding, and so on. Each box is designed to expand with its content, even when you give it a set height. This state is known as overflow: visible; and is the default for every element.
In your case, you are dragging elements within an element to another element. Let's break this down a little. Before we begin dragging, our element lives within another element, inheriting its properties as well. The child element will do its best to fit within the parent element. When we drag the child element, jQuery is allowing the child element to be free from the parent element, and it will no longer inherit the parent element's properties. The child element's content will now expand to its own CSS properties until you drag it into another parent element, at which point it will inherit the new parent's properties.
In the same sense that the child is affected by the parent, the parent can be affected by the child element as well. After all, its default is overflow: visible; and wants to show all the content that is contained within it. So if the parent is 100px in width and the child is 200px, the child will be visible for 100 px outside the parent's original size.
As designers want to contain our elements to a fixed size, whether it is a px value or % fraction based on the parent element, so we need a way to prevent child elements overflowing outside of our parent element. This is were CSS overflow: hidden;, scroll;, and and auto; comes into play. I do want to note that there are overflow-x and overflow-y properties, however, I won't cover them too much as they are self-explanatory. Overflow: hidden; will simply hide the content that would overflow outside the parent element. This option will give no scrollbars for the user to view the overflowed content. So Overflow: Scroll shows the scrolling bars so that the user can scroll and see hidden overflowed content within the parent element. This option will always show vertical and horizontal scrollbars. Note: This is why there are overflow-x and overflow-y properties, however with overflow: auto;, they are not necessary.
Overflow: auto; is the solution for having only the necessary scrollbars for the content, and as a bonus, if the content does not overflow, no scrollbars are shown. So when we look at your div.sortobject, without overflow: auto;, it will attempt to visually stretch out to fit it's child elements. When you begin to drag elements around, the potential parent divs are overflowing visually trying to resize both for the child element and the jQuery helper element, the element that shows the user where to drop content. Setting overflow: auto; will cause the parent element to always retain its set width and height, so that when you drag your child element, it will appear smoothly as no potential parent elements are resizing. jQuery loves to calculate current exact dimensions of the elements it affects, and will also improve the animation as well.
I hope this gave some insight.
The default value for overflow is "visible", meaning that the overflow is not clipped. It renders outside the element's box.
The value auto means that if overflow is clipped, a scroll-bar should be added to see the rest of the content.
The smoothness effect that you refer to is simple that in default overflow, rendering outside the element's box will probably be slower/jumpier than when set to auto which moves the rendering into the actual element. This was especially noticeable for me in firefox looking at your fiddle example after moving all the elements to one column then trying to move them back.
Surprisingly in IE11, there was no noticeable difference between auto/default that I could see.
Please Read: Official W3 Documentation for Visual Effects
In the overflow-auto, I noticed there is a horizontal scroll bar in some of your boxes. If you take off any overflow, the div width will expand due to the content contained within them. When you get fatter divs, you'll get mixed div widths, and can cause quirky div placements when you drag them within a parent container. Think of a bucket with fat apples and small apples, versus a bucket with apples of all the same size; the position of the apples will be scrunched up differently between the two.
Bucket of fat apples with small apples: (div width of different sizes)
If you don't believe me that the div's are fat, you made the under lay of the divs the same size, but open up your link without the overflow = auto, you'll notice your images go over the right hand side of the border.
Bucket of apples of equal size (div width of same sizes)
With overflow set to auto, if you get beyond a certain width, the scroll bar will appear, and the width of the content will flow through, not changing the width of the div; so nothing gets quirky.
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');