Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 days ago.
Improve this question
I am trying to get the value of the overflown text of a div as a string.
I am wondering how I can do this, the overflow property allows you to edit the overflow but I want to return it.
I have tried detecting if an element will overflow inside of another element, and then programmatically creating paragraphs and testing how much text I can fit inside a div. However it creates some complexity in how to layout my content. If I knew what would overflow, I could handle it more gracefully.
If you want to get the text that is overflowing from a div element, you can use the scrollWidth and clientWidth properties of the div element to determine if the content is overflowing horizontally. If the scrollWidth is greater than the clientWidth, then the content is overflowing.
Once you determine that the content is overflowing, you can access the overflowing text using the scrollLeft property of the div element. The scrollLeft property returns the number of pixels that the content of the div element is scrolled from the left edge of the div element.
Here's some sample code that demonstrates how to get the overflowing text of a div element:
const divElement = document.getElementById('myDiv');
if (divElement.scrollWidth > divElement.clientWidth) {
const scrollPosition = divElement.scrollLeft;
const overflowingText = divElement.textContent.slice(scrollPosition);
console.log(overflowingText);
}
In this example, myDiv is the ID of the div element that you want to check for overflowing content. If the content is overflowing, the code gets the current scroll position using the scrollLeft property, and then uses the slice method to extract the overflowing text from the textContent property of the div element.
Note that this code assumes that the div element only has text content. If the div element contains other types of content, such as images or other elements, you will need to modify the code to handle those cases.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Code: https://jsfiddle.net/q157xktz/1/
when the position of this custom element is set to relative, the offset displays correctly. For example, if the true offset is 0 it displays as 25. Why is this? The element in question is root-class-bubble
It is because by default your browser renders every unknown element as an inline element. All known HTML elements have default styles set by the user agent. Custom elements don't have any styles at all provided by the user agent, so you'll have to explicitly style every element that you create. So for example, adding display: block to the styles of your root-class-bubble element will solve the offset value.
And to explain why the offset value differs I'm quoting this article from MDN, which explains how the offset properties differ with different element types. Starting with block-level elements.
For block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the border box of an element relative to the offsetParent.
And with inline-level element:
However, for inline-level elements (such as span) that can wrap from one line to the next, offsetTop and offsetLeft describe the positions of the first border box (use Element.getClientRects() to get its width and height), while offsetWidth and offsetHeight describe the dimensions of the bounding border box. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text.
Get the with of a div which is partly hidden by overflow hidden.
I have a div container which contains 3 divs
the div container is set to flex en only the last div is growing in size so it fills up the space in the container.
The container has the property overflow hidden.
The last div contains dynamic data that wil fill up the div and will be partly hidden. I need to know what the size(width) of the div is within the container.
I tried several methods like offsetwith, clientwidth & getboundingclientrect().width.
All return the width of the div with the hidden part.
I need the width whitout the hidden part.
I created an example on codepen.
https://codepen.io/Babulaas/pen/GObgxb
(I use (angular2) typescript in my project but didnt know how to use this in codepen
you have to get all div elements inside the div with hidden css parameter and just adding up all width of them
Using jQuery
var totalWidth = 0
//this get all div element inside component
$('.component > div').each(function(){
totalWidth += $(this).width()
})
alert('total width of elements inside container "component": ' + totalWidth)
your codepen edited
https://codepen.io/anon/pen/OzJjBo
observation: this work because the inner elements of "component" are inline, you cant get the width of the "component" element adding the hidden part because the hidden part is not part of the width of "component" is part of the overflowed element. the offset method or outerWidth as is called in jQuery get you the width of the element adding the padding, margin and border, not the hidden part because is not part of the element.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm having trouble with HTML5 drag and drop. Here is a CodePen example with a minimum drag example to illustrate the question.
The problem is that if we have a container with overflow: hidden, part of the content could appear incomplete, so when we drag it outside the container, the ghost image created by the browser appears incomplete as the content instead of showing the full element.
In the example, there are two grey boxes, one of them hidden by the overflow, so when you drag it, the ghost image generated does not correspond with the full shape of the element. Is there any way to force the element to show a complete ghost image when dragging remaining the dragged object hidden by the overflow of the parent?
Thank you very much
SOLUTION
Well finally and thanks to the clues given by freestock.tk I have found a solution that works for the example. The trick is using the position: absolute but in a cloned object attached to the body and hidden from the user. We need to add the following to the drag event:
c2.addEventListener('dragstart', event => {
// Here we clone the element.
let clonedElement = c2.cloneNode(true);
// And we add our class with position absolute to render it
// hidden from the user.
clonedElement.classList.add('cloned');
// Then we attach the element to the body.
document.body.appendChild(clonedElement);
// And we pass this element to drag image of the drag event
// using the position of the click of the mouse to set it.
event.dataTransfer.setDragImage(clonedElement, event.offsetX, event.offsetY);
// And finally we remove the cloned element.
window.setTimeout(() => clonedElement.parentNode.removeChild(clonedElement), 350);
});
The cloned class has the following content:
.cloned
position absolute
width 100px
left 1000px
And here is a CodePen with the solution working.
I did add the position absolute on the drag event aswell:
let c1 = document.getElementById('c1');
let c2 = document.getElementById('c2');
c2.addEventListener('mousedown', event => {
event.currentTarget.style.position = 'absolute';
event.currentTarget.style.margin = "10px";
});
c2.addEventListener('dragstart', event => {
event.currentTarget.style.position = 'absolute';
event.currentTarget.style.margin = "10px";
console.log(event.currentTarget);
});
c2.addEventListener('dragend', event => {
event.currentTarget.style.position = 'initial';
});
link: CODEPEN
This question already has answers here:
Calculating text width
(22 answers)
Closed 8 years ago.
When I use outerWidth() in jQuery it gives me the full width of the block element which is usually the whole page width (if it is the only thing on that line). In the picture below the red line is the width that I get from outerWidth(). The blue line is the width I am trying to find.
How do I find the width of the area the text is taking up in jQuery.
So you are doing this:
.outerWidth
$('element').outerWidth();
Get the current computed width for the first element in the set of matched elements, including padding and border.
.innerWidth
$('element').innerWidth();
Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.
.width
$('element').width();
Get the current computed width for the first element in the set of matched elements or set the width of every matched element.
Best regards ;)
Hope this will explain it to you ;)
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'm working on my diploma thesis, an interactive programming language which should run in browser eniroment using javascript.
In the moment I use an input line and enter event to start interaction and give feedback.
I would like to change this to have a textinput and a second field next to it where the result is shown. I use
<div id = "code" conetenteditable="true"> </div>
<div id= "result"><div>
Both are placed in a table row, so they are next to each other
how can I get result to scroll according to the actual scroll of code?
By the way I use jquery as library.
Thanks,
Rainer
In order for an element to be fixed on a page and remain there as you scroll, you must use CSS.
The code should look like:
<div id = "code" conetenteditable="true" style="position:fixed;"> </div>
<div id= "result" style="position:fixed"><div>
You can position them however you want with top, bottom, left, right.
Use css fixed position for your both dives.
like that:
#id,#result{
position: fixed;
}
I believe your problem is not with the element position but with the scroll of the text inside of the #result div.
If that's the case, you might want to use the overflow css property to have the div show an inner scrollbar.
#result {
overflow-y:auto;
max-height:100px;
}
in this example, the div will scroll if the text inside it stretches above 100px.