Is there any way of recognizing text overflow with JS and show the overflowing text in an animated way? For example, moving the text to the left, like the spotify widget:
You should be able to confirm a text requires scrolling if you use "scrollWidth > clientWidth " of the container - assuming it has overflow:hidden and you take margin, padding and borders into account. Look at element dimensions for a basic overview. To scroll the text you just have to give it a negative margin-left, or use a DIV with position:absolute inside a DIV with position:relative and give the inner one a negative left value (CSS).
Related
I have a slider in a <div>. The slider takes an array of slides and each element has a text where there is no word-limit on the text. When I slide left or right, and the different texts are of different lengths, the height of the <div> varies, making it look ugly. I tried using a min-height or a fixed height, but those don't solve the problem, since there will either be too much empty space underneath the text, or, a text once in a while will be longer than the min-height and the size of the <div> will vary again.
What could I do now? Is there a way for me to find out what maximum height the div should have (based on what's the longest text in my array of slides) and then give my div this height? This way there would still be some empty space with the shorter texts, but at least it wouldn't be arbitrary.
Does this sound like an ok solution? I am wondering how I can measure this beforehand though? So I'm thankful for any clues!
If I understand your situation, you have a <div> element that wraps multiple "slide elements" where;
each slide element varies in height based on their text content and,
you'd like the wraping div to natually expand to fit around all slides regardless of the arbitrary height of their content
One solution to this would be to use flex-box which would allow your slides to be arranged horizontally within the wrapper div, while also ensuring that the wrapper naturally expands to fit around it's children (of arbitrary height).
To illustrate this approach, consider the following example where flex box is used to ensure the pink div correctly wraps green slides (of differing height):
#wrapper {
display:flex;
flex-direction:row;
overflow-x:scroll;
background:pink;
}
#wrapper > div {
min-width:30rem;
margin:1rem;
background:green;
}
<div id="wrapper">
<div><p>Short</p></div>
<div><p>Tallest<br>Tallest<br>Tallest<br>Tallest<br>Tallest</p></div>
<div><p>Tall<br>Tall<br>Tall</p></div>
</div>
You could try to use flex display to achieve this. Not sure if it will work with your slider tho, since tho have not posted your code.
You can find an example here
I have a <table> element with a lot of rows and a max-height attribute.
I need to find the real height displayed for the <tbody> element. Normally I can just take the difference between <table> height and <thead> height
var tbodyDispalyHeight = $("table").height() - $("thead").height();
This works unless horizontal content is too much and an horizontal scrollbar appears (and can't remove it because... I need it!). I should remove its height from tbodyDispalyHeight but... how can I do?
First problem: I don't really know when this bar is displayed
Second prolbem: Each browser implement scrollbar in a different way
Here is a JSBIN example to understand what I mean. Try to resize page horizontally until the scrollbar appears, there the dislayed tbody height should be lower...
Sounds like you are looking for the clientHeight.
(But this seems to be to easy.)
Have a look to MDN
The Element.clientHeight read-only property is zero for elements with no CSS or inline layout boxes, otherwise it's the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
You may try:
$("table")[0].clientHeight
Currently you have your table with overflow:auto. But you could wrap it with a DIV with "overflow:auto". Then you can simply determine if you have a horizontal scrollbar by comparing the width of your div with the width of your table.
I have a script that dynamically inserts a div containing text in the dom. The text content is not known in advance.
I need to know the width of this div, but it seems that that the return value of document.defaultView.getComputedStyle(node, "").getPropertyValue("width") or node.offsetWidth cannot be trusted.
I used setInterval to log it, and the value changes over time. For instance, in my case it starts with 929px and then changes to 908px.
This div is in position absolute, it has whitespace nowrap, so I don't think it is being "pushed" by other dom elements or that it somehow changes once inserted.
Is there an elegant way to retrieve the width, or do I have to use an ugly setTimeout to retrieve it once the return value is stable ?
Try:
yourDOMElement.getClientBoundingRect()
This will return an object with top, left, right, bottom, height and width attributes. This should be cross-browser.
Note: If you are going to work with the position attributes (top, left, right, bottom, height) of the returned, take into account scroll offset if necessary.
Update: To ensure this works on older browsers that don't have the width/height attribute, calculate it subtracting right/bottom from left/top.
The viewport can change its size because of the scrollbar. Once the scrollbar appears, its width can no longer be used by the document. Force the scrollbar to exist before you measure the size by adding overflow: scroll or overflow-y:scroll to the <html> element.
The size of a block-level element is, by default, its container width minus margins and padding (even if it's positioned absolutely), which is ultimately the wiewport width unless you set a fixed width somewhere along the way.
Using jQuery, you should be able to do this:
var width = $("div-selector").width();
this is fairly easy?
open the page in a browser and press f12. With firefox there is a button "inspect element" on top and in chrome it's on the bottom. Click it and hover your mouse over it. This should give you the height and width in px. Never been wrong for me.
if it still doesn't show, click it and you can see it in the css panel of the console.
I have div with draggable, resizable and editable (contenteditable=true) functionality. This div
contain some text in it, which user can edit. My problem is that when user write the text in the div, the div size
is not expand automatically. I set its height:auto but this also not works. What should i do so that while
entering the text the size of div also increases?
If you're talking about jQueryUI's resizable plugin, then that's your problem. It sets an explicit height on the element, overriding your height: auto.
I have a <h3> tag with limited height (100 px for example, position: absolute) and the text overflows it.
What I would like to do is slide it down over to the height that is needed when the mouse is over it and back to original height (100px).
I hope you understood what I mean
I don't think it uses slidedown() function for that and I am very weak in animate function. Any help please?
You can nest a div inside the h3 that contains the content and then use the h3 as a masking container (use overflow:hidden). When the user mouses over, fire a function that get's the height of the interior div (make sure to include any margins or padding). Then execute you height adjust animate function (In jquery, something like $('h3').animate({height: heightVar}); )The mouseout fires a function that restores the height of the h3 back to 100px.
Here's a sample: http://jsfiddle.net/XR9fb/
You can get the real height of the element with the scrollHeight property. Now, I don't really know much of jQuery, but I imagine you could just call animate to set the height CSS property to the scrollHeight of the element when the mouse hovers it, and return to the original height when the mouse moves out of it.
If the height of the element isn't fixed, you can salve the current height somewhere before displaying the full element, and when the mouse leaves the element you just restores this state.