fix div when window resize - javascript

I have a div that has fixed position and bottom 0 to display at the bottom of the window.
My problem is when window resize, this div move to up and into other elements. For example when I open console box in chrome this div jump to other elements in facebook fix position such as friend list, when I open console box, element jump to up but hidden up element.
Please help me how I can fix div in window resize.

CSS Position Fixed:
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page. Fixed positioning is similar to absolute positioning, with
the exception that the element's containing block is the viewport.
This is often used to create a floating element that stays in the same
position even after scrolling the page. - by Mozilla MDN
In other words, When you use position: fixed; that takes elements out of the document's regular flow.
How I can fix div in Window Re-size?
Solution: There's no way to do it as you want using CSS. You must remove position: fixed; because when you set bottom: 0px with position: fixed; to your element then it doesn't matter that what is the size (vertical) of your browser or window because position: fixed; element will always appear on the bottom of the viewport screen at 0px.

You can use
position: fixed
or
`position:absolute`

Related

CSS `Position: Fixed` Not Moving On Scroll

I tried to put a position: fixed on the div ".ais-search-header", but it does not move while on scroll. I also try to drag it out from the parent div, but still did not work.
URL: https://kickegg0.myshopify.com/search.searchdata?q=q
Pass: tweast
There is a bug in Chrome and Firefox where position: fixed does not position relative to the screen when there is an ancestor element with the transform or backface-visibility attributes (or their webkit equivalents) set.
Move the element you want absolutely positioned above the elements with those attributes.
A position: fixed element has no dependency to its parent container. Its position actually depends on the browser window. That means it won't move or scroll on page scroll. It will be on top of the page. But those under that element will scroll according to the page. If you want to move the container according to scroll, give it position: absolute like:-
#parent {
position: relative;
}
#container {
position: absolute;
}
So that it will be inside the container and will move on page scroll.
Position 'fixed' positioning is based on your browser window so not move with scrolling. if you want to move with scrolling use position 'absolute'

Dynamically calculate top property with javascript

I am trying to write a script, so elements on a page scroll slower/faster than their parent div. I have wrote this:
$('#two').css({'top' : 600-($(this).scrollTop() / 1.2)+"px"});
My element is already 600px from the top and if I start scrolling the page from top-everything is fine, since it has these 600px to calculate from, but if I refresh the page right on the element, it jumps top, and console logs that top is calculated from 0, but not from 600px, where it is placed.
I tried to rewrite using offsetHeight and other methods(e.g.offset().top), but nothing seems to work.
Could you, please, give me a hint on how to make it recalculate dynamically, so when refreshing the page from the middle it won't jump up?
Use position fixed property Even when you scroll the element's position remains fixed.
<style>
#two {
position: fixed;
top: 600px;
}
</style>

jquery resize so content is always centered perfectly

I have the following right now, but its not perfect:
$(window).resize(function () {
$("#app-views").height($(window).height() - 140);
});
Basically, I have 75px from top before my content starts, and I have 60px from bottom of the page to my content.
How do I make it so when I resize the window, it will always respect those dimensions? I am using malihu scroll bar, and I am loading my view into #app-views.
I have a border all around the window (10px), a navbar (50px), and 15px of padding until my body. Then, I have 15px bottom padding on body, a footer of height 35px, and 10 px bottom border.
Here is the basic HTML:
If you want your contents to be placed and resized while keeping the same distance from the top and the bottom of the window, you don't have to use jQuery or Javascript. Only CSS would do the trick. Try this without height attribute in your style code:
#app-views {
position: fixed;
top: 75px;
bottom: 60px
}
You can set left and right without width to get the same effect in horizontal dimension.
You say you have specific measurements to place your content on the page
(75px from top before my content starts, and I have 60px from bottom
of the page)
Well with jQuery offset you can get the top position of the element and you can also update the css top position on screen resize so that your content will always adjust its position on resize.
To see where the bottom of your content element is you could find the offset of the top of the content and add the content's height to get the bottom position of the content relative to the top of the page.
I would recommend doing this in CSS, perhaps by dynamically changing the jQuery object's CSS property. I would attend to it with a simple CSS selector. This works even when the window is resized. Have a look:
#app-views {
position: absolute; /*this will allow you to position it exactly where you want it*/
left: 50%; /*this will move the left side of the container halfway across the page*/
transform: translateX(-50%); /*moves the container left by half its width,
so that the centre of the container aligns with the center of the page*/
}
You can adjust the vertical position with the 'top' property and 'translateY()' in a similar way I demonstrated with transform and translateX().
If you want to use jQuery, you could try:
#('app-views').css('position', 'top');
Furthermore, I would also suggest that you do not maintain the 75px at the top of your page for all kinds of screen sizes. 75px may be suitable for a desktop but not for a mobile. If you do intend to make your website fully support mobile, it is often a good idea to design the mobile layout first, as it tends to by simpler. Then, you can use media queries to adjust it for the desktop. It really does work brilliantly. I've used it myself many times before. You can learn more about that here:
MediaQuery CSS

Center div vertically or affix to top of window if height is too great

I have a popup that's centered on my page using the following syntax:
position:absolute;
top: 50% !important;
left: 50% !important;
transform: translate(-50%,-38%); //well, slightly lower than center...
This works very well - unless the height of my popup is greater than the height of my current window. It doesn't happen often, but when it does, I can scroll DOWN to see the additional content, but I cannot scroll UP any further than the top of the window to see what's above, like in this example:
I want to say vertically center, but if the height of the div would cause the top of it to not be displayed, just affix the div to the top of the window instead
What code would I add into this to achieve that?
This is similar to another post on SO:
How to center an element vertically in css in a scrollable container
I'm not looking to center the item with a flex container however. I actually cannot use flex in this instance, because the div is a result of a javascript plugin and I can't add a separate parent div outside of this without a LOT of work. I am looking to center UNLESS the height of the div is too great - then i want it to affix itself to the top of the window.
If I could place some sort of div above this popup div that has a height of 1px and force the popup div never to go higher than it, that would be fine as well. I have a very specific reason for why I want the div at the TOP of the window when it's very long - I don't want it centered 100% of the time (which is what the other post does.)
I've also tried using a pseudo-element like so:
.popUpBody::before {
content: " ";
height:50px; //this needs to be dynamic based on the height of the parent
width:100%px;
display:block;
}
as it moves the rest of the div down - but I'd need to find some way to use a dynamic height - it might be 300px, or it might be 5000px. This also doesn't seem like a very good way to do this.
I could make it so the height of popup div is always centered by taking out the second transform variable: transform: translate(-50%); - and this would be a last resort, but I would really like for the div to affix to the top of the window when its height is larger than the window itself - if this is possible.
Javascript/Jquery is fine if I need to use that to add dynamics.

Position iframe content above all content

I need to display an iframe when a user clicks on a link on header of page.
How do I make sure the iframe is always on top of all content? CSS z-indexs don't work effectively in this case.
z-index probably doesn't work because your iframe is not a positioned box:
For a positioned box, the 'z-index' property specifies:
The stack level of the box in the current stacking context.
Whether the box establishes a local stacking context.
Set its position to something other than static. For example:
iframe#myiframe {
z-index: 20;
position: absolute;
}
z-index only works on positioned content. Either use position:absolute; and top/left/right to position the element or use position:relative; to leave the element where it is.
Either one should enable z-index on the element.

Categories

Resources