I have two div in site body.I want to have fixed position to the left div...
but when scrolling to bottom it comes on my contact us div..this is the sample page:http://www.runsensible.com/legal/privacypolicy
here is my code:
.sticky {
position: fixed;
}
<div id="menu-privacy">
<div class="fusion-text">
<p>
– What information we collect from you
– How your information is used
– How your information is shared
– Terms of service
</p>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("menu-privacy").getElementsByClassName("fusion-text")[0];
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
What I suggest is instead of having a JavaScript function, we can use a CSS class for it.
NOTE: Based on the requirements of your specification, you can vary the size of width & height. And you can put this as class="fixed" for the div tag containing id="menu-privacy" as you can see below.
.fixed{
position: fixed;
top: 80px;
right: 0px;
width: 100px;
height: 150px;
}
1) give an id to footer or add a wrapper for footer section
2) let your function like this - you need to let condition by footer position
function myFunction() {
if (sticky < footerIdOffset) {// footerIdOffset is an offset for footer section
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
3) you need to subtract margin/gabs between footer and upper section to work in your point truth.
Good luck
I suggest you use position:sticky instead so this effect can be achieved with pure CSS rather than adding javascript. Looking at your site it's rather possible to do this
Here's what you need to do
Remove the javascript that add/remove the sticky class
Add this style in your div with id="menu-privacy", something like this
CSS
#menu-privacy {
position: sticky;
top: 80px;
}
note that you can play around the top value to achieve the gap that you like. Hope this helps!
You can try adding the attribute "z-index" to the contact div.
On "Contact Us" div set (z-index:10) .
Related
I have this page like image below:
The filter has a dynamic width and is an external angular component
the table is inside the "parent" component
FYI:
The table component has a [height]="something" that accepts either string or number as parameters.
The table is a pivot table using a custom component called Dev-Extreme
All i want is to assign a value inside the [height]="" in the HTML component page that is dynamic so that the height of the table resizes based on how much space there is left in the page.
Could also use TypeScript to do that and maybe calculate the height each components takes in the page except the table and do calculations on that.
Can anyone help me here, i've been stuck on this for two hours.
You could use some css for what you need.
Use display: flex to distribute the sections as you need (top section fixed and bottom section with dynamic height).
And use overflow: auto to set the scroll in the table container only.
Example:
https://codepen.io/bcngr/pen/wvXdWBE
<div class="main">
<div class="filters-container">
<span>Filters</span>
</div>
<div class="table-container">
<div class="table">
<span>Table</span>
</div>
</div>
</div>
html, body {
padding: 0;
margin: 0;
}
.main {
height: 100vh;
display: flex;
flex-direction: column;
}
.filters-container {
background-color: #edf2f4;
height: 100px;
}
.table-container {
flex: 1;
overflow: auto;
}
.table {
background-image: linear-gradient(#8d99ae, #2b2d42);
height: 600px
}
I found a solution to this here's what i did:
Creating a #ViewChild() to gather the div element in my .ts:
#ViewChild('pivotFilter', { static: false }) stickyHeader?: ElementRef;
Here:
The div has an id="pivotFilter"
Using ViewChild we can get the HTML element
Declaring getter to calculate table height:
get filterHeight() { return window.innerHeight - (this.stickyHeader?.nativeElement.offsetHeight + 88); }
Here:
window.innerHeight is the height of the page
this.stickyHeader?.nativeElement.offsetHeight is the height of my component
That + 88 is the rest of the page height (the title, and the space between filter and table)
I had to run change detection on content initialization to prevent errors like so:
ngAfterContentInit(): void {
this.cd.detectChanges();
}
Then i just applied the height to the html page.
Hope this helps someone, cheers !
I am using window.print function to print a div content and I need to add custom header and footer which shows on every page. can some one please guide me on this ?
I able to add a header and a footer but thats only at top and bottom of the print document
what i can do
I want to repeat them in each page
what I want
Usualy you are not allowed to overwrite header and footer. (defaulted by browser - optional on users choice)
Did you try something like this?
.footer { position: absolute; bottom: 0; }
.header { position: absolute; top: 0; }
try this:
var pageHeight = parseInt($('body').css('height'))
var offsetHeight=1230;
for(var i=0;i<pageHeight;i++){
if(i%offsetHeight==0 || i==0){
$('body').append('<div style="position: absolute;top:'+i+';">your header</div>')
}
}
yue can play with offsetHeight
My div has a styling position:absolute, and as a result, it doesn't expand if the content is higher than it's height.
Therefore, I thought that a solution would be if I find what the is the actual content's height, and assign the height to the div with the position:absolute styling.
Any idea how to do it? or maybe an idea how to make an absolute div to expand according to its content.
Thanks in advance!
Element.scrollHeight should do the job.
Here's an awful way to get the height of the container. We're basically cloning the whole div, setting the position so that it has height, checking that height, and then removing it:
$(function () {
var clone = null;
alert( clone = $('.test').clone().css('position', 'static').appendTo(".container").height());
clone.remove();
});
Here's the fiddle: http://jsfiddle.net/vPMDh/1/
It should expand even if being absolute.
check you don't have a height: xxpx
if so, change it to min-height
As you've said "it doesn't expand if the content is higher than it's height." I guess you have a fixed height set on it.. if you do need this for some reason try using min-height instead.
Have a look at this fiddle.
<div class="classname">
Some content....
<p style="clear:both"> </p>
</div>
use a clearfix hack. heres the link
and add clearfix to you div
example
in your style sheet
<style>
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
...
and in your div add clearfix the class
<div class="clearfix">
//some html tags
</div>
Thanks for contributing your question. If you use this:
$(document).ready(function(){
var x = $("#container").height();
alert(x);
//if not works then
var y = $("#container").outerHeight();
alert(y);
});
I think it is easy as clean code to find the height of any div if you do not apply the div's height too.
similar solution to #MattDiamant, but with vanilla JS and without creating a clone:
function getDivHeight(posAbsoluteDiv) {
const heightBackup = posAbsoluteDiv.style.height;
posAbsoluteDiv.style.height = 'auto';
const contentHeight = posAbsoluteDiv.getBoundingClientRect().height;
posAbsoluteDiv.style.height = heightBackup;
return contentHeight;
}
I'm trying to fix a div at the top of a layout that will contain a blog post's information (date posted, # of notes, permalink, etc.) and change this information as you scroll down past posts. I'm not sure if it would require any kind of javascript or just some intricate positioning using css. Here's how I would layout the posts. How can I get the specific post information from each post to change within that fixed div as the posts scroll past it?
#container {
width: 960px;
margin: 0px auto;
}
#changingpostinformation {
position: fixed;
margin: 0px auto;
}
<div id="container">
<div id="changingpostinformation">fixed post information div that's information changes as each post below reaches the top of #container</div>
<div class="post">
<h3>Post Title>
<p>This is the body of this example post.</p>
</div>
<div class="post">
<h3>Post Title>
<p>This is the body of this example post.</p>
</div>
</div>
Like #ShankarSangoli says, you should add top: 0;, and also left: 0; to #changingpostinformation (or other values to position it however you like)
You'll need some javascript to find out which post appears first on the page and show its info.
$(function() {
$(window).bind('load resize scroll', function() {
var doctop = $('body').scrollTop();
// loop over all posts, from top to bottom
$('.post').each(function() {
if ($(this).position().top > doctop) {
put_postinfo_in_fixed_div($(this));
return false; // breaks from the loop
}
});
});
});
This function runs once when page is loaded, and also when the window is resized or scrolled.
You need to implement put_postinfo_in_fixed_div() which gets an post div, and does what it says.
Use this CSS:
#changingpostinformation {
position: fixed;
top: 0px;
}
I'm writing my own small pager control in Javascript and jQuery and having trouble positioning it properly.
The pager is set to only be a specific width (340px in this case) which allows it to display roughly ten page buttons. If the user has selected a higher page, I'd like the reel to slide to the left and show the selected page in the center. Since the number of pages is set dynamically (I build the pager in js when the page is loaded) and their width is not constant (double-digit page number buttons are wider than single-digit buttons) how can I determine and then set the pager to the correct position?
I was attempting to use the following code:
(where my buttons are labeled "#Nav1", "#Nav2", etc...)
if (currentPage < 7) {
newPos = 0;
}
else {
newPos = $('#Nav' + (currentPage-5)).position().left;
}
$('#reel').animate({left: newPos*-1}, 700);
But the #reel div is wrapping so position().left doesn't return the position I need.
Suggestions?
Here is my HTML/CSS markup:
<style type="text/css">
div#pager div
{
display: inline-block;
}
#navContainer
{
width: 340px;
height: 28px;
overflow: hidden;
position: relative;
}
#reel
{
position: absolute;
top: 0;
left: 0;
}
</style>
<div id="pager" class="buttons">
<div id="preButtons"></div>
<div id="navContainer">
<div id="reel">
</div>
</div>
<div id="postButtons"></div>
</div>
You'll need to manually give #reel a width equivalent to the number of items * the width of each item.
A dynamic way to do this is to load in all of the items, place them in a hidden, unbounded div, then set the width of #reel equal to the width of that div.
Try this before your carousel code:
var dummyDiv = $('<div id="dummy" class="buttons" style="position:absolute;display:none"></div>');
dummyDiv.appendTo('body');
dummyDiv.html($('#reel').html());
var reelWidth = dummyDiv.css('width');
$('#reel').css({'width':reelWidth});
This will allow you to dynamically set the width of the #reel div so it doesn't wrap without knowing the exact size of the contents statically.