I am trying to use jQuery to calculate the window height then apply that value to a DIV (the container div) finally i want the jQuery to align an element to the bottom of the page.
<div id="wrapper">
<div id="element-align">Here is the element i wish to align to the bottom</div>
</div>
Further to my question on your OP, this can be done in CSS:
#element-align {
position: fixed;
bottom: 0;
}
If needs be you can also add left/right to the element, but the fixed positioning will mean that the element will always appear in the same place relative to the browser chrome, regardless of the scroll position of the page.
Related
I've just realized that in a div with overflow-x: scroll I have a horizontal scroll bar as expected but I also have some children elements that are outside the div.
I was expecting that the scroll bar would grow/shrink to accommodate more/less of that div children elements.
You can see this effect here (you need to inspect to see hidden elements) here, where element number 1 and 2 are hidden on the left of the parent div:
Fiddle
https://jsfiddle.net/w01y50yb/
Please note that I also have inline style.
Why is that and how to fix it?
Add a outer container to the content and apply overflow-x and width to it. Check this updated fiddle
<div style="width: 100%; overflow-x: scroll;">
<!-- You content here -->
</div>
On a project I have four absolutely positioned elements on a page that sit inside an absolutely positioned container (the latter in order to align them relative to the viewport’s bottom, while more content will follow below the viewport). The four elements are next to each other and do not overlap.
Is there a way to (dynamically) center the four elements inside their absolutely positioned parent? I know it sounds weird, since absolute positioning means exactly no automatic placement.
Dynamically would mean that responsively the elements change both size and position at a certain breakpoint, but should still be centered horizontally in the viewport at all times.
I could think of a solution like this with an additional inner div, but didn’t get my head around to actually solving the puzzle, since I don’t know a good way for the inner div to grab the total width of its four absolutely positioned child elements:
<div class="myAbsoluteContainer">
<div class"myInnerDivForCentering">
<div class="myAbsoluteChildElement" id="child1"></div>
<div class="myAbsoluteChildElement" id="child2"></div>
<div class="myAbsoluteChildElement" id="child3"></div>
<div class="myAbsoluteChildElement" id="child4"></div>
</div>
</div>
I am not sure why you need to absolutely position the children. Is this what you are trying to achieve: http://jsfiddle.net/k65pxydx ?
.myAbsoluteContainer {
text-align: center; /* Centers the elements horizontally */
}
.myAbsoluteChildElement {
display: inline-block;
vertical-align: middle; /* Centers the elements vertically */
}
Everywhere people asks for how to align an element inside a DIV they are told that the container must have a relative position.
In my case, I have a floating dialog, with absolute position. How can I make a button element always stick to the bottom of this dialog?
<div class="dialog">
<div class="dialog-content">
</div>
<button>Close</button>
</div>
Try to use absolute positioning with bottom: 0px for your button. It will position relative to the parent of button which is .dialog.
Something like this: http://jsfiddle.net/0rohooj9/
You would need to give the dialog absolute dimensions, and then set the button's position to absolute, and bottom: 0;
Here's a Fiddle with your code:
http://jsfiddle.net/erlingormar/d8sa43s8/
I have a fixed height scrollable <div id="overlay"> positioned over all the page elements using position:fixed. In the div I have elements higher than the fixed height, so the scrollbar appears. I also have a tooltip that I want to stay with a paragraph even if it is scrolled.
That's what I want to happen here, but unfortunately neither of my solutions work properly:
I add position:absolute to the tooltip and position:relative to #overlay(the tooltip's parent): http://jsfiddle.net/4qTke/
The tooltip scrolls as expected but it is not visible outside of #overlay.
I only add position:absolute to the tooltip: http://jsfiddle.net/Yp6Wf/
The tooltip is visible outside of the parent #overlay but doesn't move when the div is scrolled.
I want the tooltip to always be visible AND for it to move when scrolled.
What you want is not possible using just CSS and HTML.
The main problem you have is that you have set overflow: scroll on the container your #tooltip is relative to. Because this overflow property is stopping any content from appearing outside of its edges when you position #tooltip "outside" of the div it will be hidden and only visible when scrolled to.
The reason it was visible in your second scenario is because without setting position:relative your #tooltip was relative to the page and not the container. Which meant it was not affected by the overflow:scroll property of the container.
HTML:
<div id="overlay">
<div class="elemRel">
<div class="elemAbs">
<!-- Your Code -->
</div>
</div>
</div>
CSS:
#overlay { position:fixed; }
.elemRel { position:relative; }
.elemAbs { position:absolute; }
Maybe this is an alternative for you? See demo fiddle.
I have a div that contains a smaller div with some text. The container div has a webkit transition that moves it off the screen. I want the smaller div to move with it, until it gets to the edge of the page, then remain fixed, almost as if it gets 'stuck' on the side of the page, while the container div continues to move underneath it out of sight. Can this be done?
//CSS
.move{
-webkit-transition-property:left;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-duration:1s;
left:-200px;
}
//HTML
<div onclick="this.className='move'">
<div>
some text here
</div>
</div>
Here's an example for you: http://jsfiddle.net/LjjRM/
A couple points:
1.) jQuery
2.) position: absolute