My script here needs a little work on the positioning of the sentence. If you click on any of the choices, the sentence should slide down to that height. I'm trying to use .position() to obtain a relative position (as the doc says, relative to the offset parent, which is why I'm writing this thread).
Obviously, the .position() is a little off right now because it seem to think it's offset parent is the document itself and the jQuery doc didn't mention anything about setting the offset parent. Any inputs are greatly appreciated.
PS: I'm currently using position: relative on the sentence, which are 2 <p> tags.
on css add position: relative; to the parent element/container
Add position:relative; to your CSS for div[id^=wrapper].
All absolute positions are taken relative to the closest positioned container. In your original code, the closest positioned container is the <body> tag, which obviously isn't what you want.
Related
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;
}
Is it possible to keep the top row moving like we move the first column in a table using jQuery?
The code I used to keep the first column moving during scroll is something like this.
$('#table-name').scroll(function () {
var _left = $(this).scrollLeft();
$('.firstTd').css('left', _left);
});
when I use the same technique to top property to a table row...through the CSS gets applied it is not honored by the browsers.
P.S: I used left property on td element and want to apply the same technique to a tr tag
Demo here: https://jsfiddle.net/8w4qac30/7/
EDIT
Oops, understood the question bad. I'll keep the info below, but actually my answer is this.
As trs are quite picky, the only thing I can think of is to select all the tds and move them, like you do with the first one, like this: https://jsfiddle.net/8w4qac30/9/
Old answer
left, top, right and bottom are positioning attributes, and for them to work you should set the position attribute too.
position attributes come in different flavors:
relative means to position the element relative to itself, so if you add, for example, left: 20px to a relative positioned element, it simply will shift its position 20 pixels to the left.
absolute means to position the element relative to the first parent that is also relative or absolute positioned.
fixed means to position the element relative to the browser window and will keep fixed during scrolls without additional code. I think that you should go this way.
Check this:
Check the positions here: https://www.w3schools.com/cssref/pr_class_position.asp
I'm trying to position my div with the class .content-window so that they all align from the same point, which is the top left corner of the first section element.
This is the first time I've encountered this problem and I've tried everything, from pure CSS to JQUERY.
Here's the JSFiddle for the project : http://jsfiddle.net/smpte11/SahM8/
Bootstrap is setting your <section>s to position: relative. You'll need to manually override that and position the rest of your elements accordingly.
Here's one way to do it: http://jsfiddle.net/SahM8/1/
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.
I can't find a title for this because it's a complicated issue.
Let's say i have this:
<div style="color:red;width:900px;height:250px;">
I Can Control This DIV
</div>
<div style="position:absolute;top:0px;color:green;width:40px;height:40px">
I CANNOT control this DIV
</div>
Is there any way for the first div to reserve it's area and the 0px should be beneath it.
I mean i want the second div to stay beneath the first div like it's inside an iframe BUT i don't want to use iframes or frames at all.
Any way? i don't have a prob if it's Javascript solution.
Thanks
You can enclose second div in position:relative container. This way, top:0px will be counted from that div and not the whole window:
http://jsfiddle.net/z9KbD/
Explanation is in definition of position:absolute: Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static.
Can you wrap both of them in another div and them control that one?
If you give the second div a clear:both, that should do the trick I think you are looking for. Essentially, it will act as a carriage return for that div.
On a side note, if you were looking to absolutely position an element, you will need a parent element that contains it to be relatively positioned. Chris Coyier goes over it in depth here.