To calculate a top position for an element of variable height, I was thinking of doing the following:
Move the element 1000px off the top of the viewport
Set the element to display: block
Get the height of the element
Set the element to display: none
Continue on as if everything is normal and good
Any pitfalls in this approach? Is there a more elegant solution?
I'd look at prototype's implementation of getDimensions.
It sets the position to absolute, visibility to hidden, and display to block briefly. I've written one which handles getting the height of something which is contained within a display:none element, but it's a bit shonky in some edge cases.
can you not just set the visibility to hidden and get the offsetHeight?
Related
I have something like a carousel with elements inside of a container with overflow: hidden
I can scroll left and right and I want to determine which elements are not visible at all or only half is visible (like on this picture) and when add to this invisible and half visible elements a class.
Width of each element is for example 100px but width of container depends on screen size. I can get number of elements which are visible (by dividing offsetWidth of container by width of one element)
Alse I know that there is such thing as getBoundingClientRect() but not sure how to use it in this case.
example
Here you can see how I try to implement getBoundingClientRect but I can't figure out which elements to target. I want to add class to the div which is partially seen (4th) and if on the first click part of the first div would be seen - to it too.
I have a page with an input element whose position is determined by the normal flow of the page (i.e. its position is NOT explicitly defined as part of the element definition).
Then, I have other elements (divs) that are created programmatically with fixed position, and should appear behind the input element whenever there is an overlap between them.
I tried assigning to the input element a ridiculously high z-index (100001, while the programmatically elements have a z-index < 1000) but the input element still is shown BEHIND the others.
I found some posts suggesting that the input element should also be positioned as the other elements, but this could have negative impact on the general layout of the page.
Does anyone have a suggestion I may try?
Thanks.
z-index only applies to positioned elements, so you need to position it.
Set it to position: relative if you want to position it without moving it or taking it out of normal flow.
z-index is intended for elements positioned as absolute, relative and fixed.
Try setting your input position: relative, then you z-index should work.
#myInput {
position: relative;
z-index: 100001;
}
I have a problem getting the width of a div's content (of the content, not the div itself).
The usual approach would be Javascript's scrollWidth property, I think.
The problem: within this div, another div is positioned absolute and has a negative right value (-350px). I can't change this (it's a menu, sliding in when you click a button, overlapping other elements. It needs to be positioned like that).
The scrollWidth returns the width of the outer div's content PLUS the negative right-value (in Chrome, didn't test other browsers).
Here's a short example:
/* ... */
http://jsfiddle.net/R4Cs5/12/
But I need the content's width that is accessible by scrollbars.
Any ideas?
Please use Jquery, no plain Javascript.
Thanks in advance.
I see that your jsfiddle doesn't import any jQuery library, while you wanted to use it. Anyway, with jQuery you can use .width to get an element's width see here: jsfiddle.
I have a <div> that has children appended to it by a script. These children elements are automatically appended by a PHP script and positioned using position:absolute. I tried to give the parent <div> the style min-height:400px allowing the elements appended to the <div> to increase the parent's height. The only problem is that the height does not increase when I do this. Does anybody know what I can do to fix this?
EDIT: I am not able to use position:relative for positioning my elements. Are there any solutions that allow for position:absolute.
Yes you can use position absolute (yeee♥!)
LIVE DEMO TEST CASE
By simply doing:
$(this).height( this.scrollHeight );
or with pure JS:
this.style.height = this.scrollHeight ;
and adding this to your element's CSS:
overflow:hidden;
overflow-y:auto;
Edit:
The demo tested fine in IE10, Firefox, Chrome, Safari, and Opera.
The key point here is setting the overflow value for the x or y axis (whichever dimensions you need the size of) to auto, rather than the default value of visible. Then the scrollWidth or scrollHeight property can be used on the HTML DOM object to get the full size of the element, including any absolutely-positioned descendants.
Odd as it seems, this is entirely consistent with the fact that setting overflow:hidden for a container clips any absolutely-positioned descendants. Apparently, elements with position:absolute aren't quite as "out of the flow" as we've always been told :)
You should not use position: absolute for this because stuff that is positioned that way will be pulled out of the normal render flow. This results in the parent not noticing that its content s acually very high. Use position: relative for the child div's. This way the parent will grow automatically.
In Javascript, I have a div with a paragraph inside it. I have made an effect where the div slowly expands in width & reveals the text in the paragraph below.
I set the divs width to zero, then every 10 milliseconds I increase the width by 10px. This works great because I have set the div to have overflow hidden.
My Problem: BUT the text in the paragraph wraps to the current width of the parent div, which means that the text jumps around & reformats as the width increases.
I want to remove/stop this from occuring so I explicity set the paragraphs width to 100px (the width of the div once it has completely expanded) but the problem is when I go check the CSS width of the paragraph element in Firebug, its not set, ie its not listed in the HTML elements inline CSS style?
It makes me think that a paragraph element by default has display block & ignores the width parameter, is that correct?
My ultimate question is: How can I get the paragraph element to be 100px wide? Do I need to change the display type to get the width to work?
This doesn't work:
pEle.style.width = "100px";
// maybe I need to change the display type before I set its width?
If I understand your question correctly you can do this just be explicitly setting a width for the paragraph in your CSS.
By default a paragraph element is block level and will take take any width you specify... Leads me to think somethings going wrong with how you're trying set the width.
Here's a quick fiddle - http://jsfiddle.net/MerlinMason/Sdq65/
Hope that helps!
I truly believe all your problems maybe fixed by adding this css property to your paragraph:
white-space: nowrap;