I want to notify when the position of DOM element changes. I have an image with absolute position in a document at the top of an element but when for example the size of something on top of my element changes, my element's position changes (it goes down) and the image position doesn't change. If I can detect position changing of element I can reposition the image. Is there any way?
I have an image with absolute position in a document at the top of an element but when for example the size of something on top of my element changes, my element's position changes(it goes down) and the image position doesn't change.
Not sure if this needs JavaScript at all – or if instead you might just need to broaden your knowledge about how absolute positioning works a little …?
An element with position:absolute is positioned against it’s closest ancestor element with a position other than the default static – and if no such ancestor exists, it is positioned against the viewport.
I assume the latter is the case with your problem – so if you want your image positioned in accordance to one of its ancestor element’s position, just try giving that ancestor position:relative.
Related
I need to move the entire html tag, let's say 100px to the right, along with all child nodes. And accordingly reduce the width of the content by the shift width to the right (by 100 pixels). And also But this is not possible due to the existence of fixed positioned elements. Is it possible to somehow move the viewport without moving the entire page to the iframe?
Now I do it by adding padding to html tag.
unfortunately, position: absolute means that it is out of normal flow of html nodes, thus you cant.
I am trying to move a popup (position:fixed), relative to another div (say RDIV) on its parents scroll.
RDIV is positioned deep in HTML structure, some of its ancestor elements are scrollable.
position:fixed
https://jsfiddle.net/vh4qLp3n/2/
I thought of binding onscroll event in all scrollable parents of RDIV and call reposition of the popup. But,
iterating over its parents and finding scrollable elements will be expensive (tried using client and scroll height)
calling reposition on scroll will also be expensive (as it would use getboundingclientrect to calculate position on every scroll)
I have tried using intersection observer on the popup, but it didn't work (may be because the element is fixed).
Tried positioning absolute, but some of its ancestor have overflow hidden property, thereby hiding the popup partially.
Is there any way to achieve this, without being much expensive process ?
How can I position SVG elements relative to other siblings? I want this to be similar to how in HTML, elements get laid out relative to each other automatically (for instance, left to right, top to bottom), except (solely) with the ability to specify an offset from the bound of the other object (since left to right AND top to bottom together don't make sense in SVG).
Currently I am trying using getBoundingClientRect (and then laying things out relative to the parent using transform:translate styling but this seems to be buggy on some platforms and difficult to deal with in certain situations. In addition with this scheme, if any SVG element moves, the other elements don't move. With relative positioning they would get automatically re-laid out if the SVG element they were relative to moved.
How can I do this?
Animate method of jquery works on div with fixed position but not on div with static position .Why is it so. Although i know the reason for relative and absolute position.But cant understand why is it for fixed position
As per jQuery animate documentation
Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default
Definition for fixed position
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page.
Taken from https://developer.mozilla.org/en-US/docs/Web/CSS/position
I'm looking for some guidance on how I can recreated a this feature. what it does is when you scroll past a certain point something slides in on the right. You can see it action here.
http://mashable.com/2011/08/19/hp-touchpad-lower-prices-canada/#comment-17611181
can anyone help me understand how that happens? The source code tells me nothing..
There probably is a jQuery plugin that does what you need already, but since I don't one, here's the basic procedure:
Set scroll-event listener on the window: $(window).scroll(function(){…});
In that event listener function, check the window.scrollY property which is how many pixels the page is scrolled down
If that value is above/below a certain threshold, show/hide the sliding element respectively
You can also use window.scrollY + window.innerHeight to find lowest pixel position that's visible in the browser. And you can then compare that to the position of some element low on the page. For instance, if you want the sliding element to appear when the user scrolls to the bottom of the main content, check whether the content element's lower edge (i.e. top-offset + height) is less than scrollY+innerHeight. If it is, then the user has scrolled to or past the content element, and you can slide the element in.
The sliding element iself should be styled with position:fixed (which won't work in IE6, by the way, but there are ways around that) and anchored to the rigth/bottom of the window. The sliding animation should then animate the right position from negative the element's width to zero, to slide it in (the opposite applies when hiding it)
Here's a simple demo (no animation, just hide/show)