I'm working on a page in our project.
I want div element with class attribute "site-info" put in bottom of page. I try {position:absolute;bottom:0} this element put in center of page. div with class called "modal-dialog" don't get height of page and div element called "site-info"
is in below this element but Appeared on center of page.
You can use css for this.
.site-info{
position: fixed;
bottom: 0;
width: 100%;}
There is a SO resource related to this... Make div stay at bottom of page's content all the time even when there are scrollbars
Related
I currently have this JS, which is injected into foreign pages using a Chrome Extension. The following code adds a div element as the first child of the body element:
const div = document.createElement('div');
div.id = 'suman-per-tab-controls';
div.innerHTML = '<b>foooooo</b>';
document.body.insertBefore(div, document.body.firstChild);
I also tried:
document.body.prepend(div);
With the following screenshot in mind:
If you look at the screenshot of the Quora website, you will notice that the div that I created is hidden behind their header.
I am assuming that the only way to get my div above the Quora is CSS? Does anyone know of some handy CSS that nearly always if not always put a div above any existing content on a page?
Try please following codes inside your css file,
.suman-per-tab-controls {
position: absolute;
z-index:9999;
}
or
.suman-per-tab-controls {
position: fixed;
z-index:9999;
}
or
.suman-per-tab-controls {
position: relative;
z-index:9999;
}
Inspect the Quora navigation bar. and change it position property from fixed to relative.
change position fixed to relative. Then you will see your newly added div.
Currently on my single page site when you click on the Bootstrap navbar menu items it takes you to the section of the page with that div #ID. However, naturally because the top of the navbar lines up with the top of the new section my content is overlapped by the width of the navbar (80px or 50px when collapsed).
Screenshot of issue:
"Ready to book" heading is actually centered in the middle of that div but overlapped by 80px of navbar.
Screenshot showing top of page:
The issue is that I do not wish for the navbar to overlap the content in the section I have linked to. Put in other words, I would like the top of bottom of the navbar to line up with the top of the new section div.
Surely this can be handled using some JS to offset the navbar up by the height of the the navbar?
I have had a suggestion to use CSS to add padding into the top of section but this adds an extra 80px of padding that I don't want, when normally scrolling the page.
Okay so I found two solution to this finally using JS and CSS
here.
My preference is for this CSS solution:
#id:before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
}
Obviously, replace ID with the ID of the anchor.
The actual JS snippet solution:
var shiftWindow = function() { scrollBy(0, -50) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }
However, it is still a bit clunky as you can actually see the the browser scroll to the anchor point and then back up by the scrollBy offset amount of 80px.
I am not sure if this problem has been solved yet, but I had the same problem and adding the appropriate heading worked (by appropriate padding I mean the height of your navbar element).
For example:
#id { padding:50px }
I'm using angularjs to develop a web application. I have several nested div. Each of them correspond to an item that the user can select.
A good example of my div display is in the official angularJs documentation :
http://plnkr.co/edit/qncMfyJpuP2r0VUz0ax8?p=preview
In my code each div have a ng-click="gotoAnchor(x)" event so when I click on a div if it is partially hidden, it pull it up on the page and the user can see all the clicked div.
But I have a header in my page so the first div with an anchor and a click event is not directly at the top of the page. And if I click on the first div, it will scroll and the header won't be visible.
So my question is, is there a way to activate the anchor only if the div isn't fully displayed on the screen ?
If you have an other solution than anchors, I take it.
Thank you in advance.
If I understand your question correctly the issue is that when using $anchorScroll your header is either
a: Being covered up by the div scrolled into frame,
or
b Partially covering up the div that is scrolled into frame.
Either way there are two solutions you should review:
First
make sure you're employing CSS to properly layer your elements, your header (if fixed) should have a z-index that supersedes your divs.
.header { position: fixed; top:0; width: 100%; z-index: 99}
.content { position: relative; margin-top: 10px; z-index: 1;}
REMEMBER Z-index only works on positional elements (See ref)
Second
Employ $anchorScroll.yOffset to make sure your scroll distance is bumped down to compensate for the header height. As seen in the Angular docs, you can use this method in your application:
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
Update 50 to be the pixel height of your header.
Regarding visibility
There are a few great libraries and directives for checking the visibility of an element - try https://github.com/thenikso/angular-inview as you can specify whether you want to enable an action when only the top, bottom or none of the div is visible.
Note Posistioning the first div correctly on the page will prevent any scroll from being necessary as seen in this plunkr.
I have a parent div that has a height set on it.
There are child divs inside of it with initial visibility turned off.
When I make it visible, the parent div expands vertically. I dont want that.
Background:
I'm using DataTables, with the scroller and filterColumn plugins.
The header of my table has an action on it assigned by jQuery that when I click on the a column header, a div is to appear below it and show some content.
Issue is, when it appears, the header div expands.
I've tried overflow: hidden, auto, etc, but the closest i can get is the scrolling body seems to cover the floating div. I also set the z-index to above the scroller, but that doesnt do anything either.
Any suggestions?
You can give the parent div a fixed height
.parent {
height: 400px;
}
and make your child div have absolute position
.child {
position: absolute;
}
use position:absolute on the element being shown to remove it from the page's flow. this will prevent it from affecting the width of the parent div.
How would I have a DIV stay at the top of the page visually as the user scrolls down a web page?
A simple Javascript framework would be great!
it's for this web site: http://BiblePro.BibleOcean.com
If you don't care about IE6, you can use position: fixed:
div {
top: 0;
position: fixed
}
Using jQuery, see this question: What is the simplest jQuery way to have a ‘position:fixed’ (always at top) div?
That is simple, just make the top Div position and it will work fixed
e.g
Start div tag
<div style="position: fixed;background: #336699; width: 100%;">
Be at the top end div tag