I would like to set a position fixed and relative. I have a large div for all my content. When i set the position of div inside to relative it aligns to the left of my content div. when i change that position to fixed it aligns to my browser side. I have been told that there is no css solution, but is there any other way.
basically im trying to get the same effect as the right hand bar on this website:
http://www.nytimes.com/interactive/us/sept-11-reckoning/viewer.html
Code:
#content{
width: 1000px;
margin-right: auto;
margin-left: auto;
}
#text{
position: fixed;
}
<div id='content'>
<div id='text'>Welcome to the site</div>
</div>
The function isScrolledIntoView() used below is from another question Check if element is visible after scrolling
Explanation of Example
First off we have the function isScrolledIntoView() which simply returns true or false if an element is visible inside your browsers viewing area.
You need to use two divs or some kind of anchor point and a follow div. Your anchor div is used to determine when we should switch the follow div to a fixed style to follow on scrolling or switch back to an absolute position if the anchor is back in view to return the follow div to its original position on the page.
With your anchor point, following div, the function to check if an element is visible in the viewing area, we can make use of the jQuery .scroll() event binding method on the window to fire an event when the user scrolls on the page.
Example Script
$(window).scroll(function () {
if (! isScrolledIntoView($('#anchor')))
{
// anchor div isn't visible in view so apply new style to follow div to follow on scroll
$('#follow').css({ position: 'fixed', top: '10px' });
}
else
{
// anchor div is visible in view so apply default style back to follow div to place in default position
$('#follow').css({ position: 'absolute', top: '100px' });
}
});
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
Fiddle demo
Related
I have a div with a relative position and inside this a chart from the recharts library is placed.
When the mouse point is hovered on the edges of the chart, the tooltip gets cut by the frame of the div. The parent div which the chart is placed has a relative position, So i gave the tooltip a fixed position, so that it would come on top of the parent div without getting cut by the frame of the div. But the tooltip doesn't take the position fixed according to the parent div instead takes the browser's view port and adjusts the position as fixed.
.parent-div {
position: relative;
cursor: default;
width: 313px;
height: 240px;
}
.tooltip {
pointer-events: none;
position: fixed;
top: 0px;
}
<Tooltip
cursor={{ fill: "#F2EFED" }}
content={<CustomTooltip />}
formatter={value => new Intl.NumberFormat("en").format(value)}
/>
function CustomTooltip({ payload, label, active }) {
if (active) {
return (
<div className={styles.customtooltip}>
{!payload[0].payload.extra && <h6 className={styles.label}>{`${label} : ${payload[0].value}`}</h6>}
Intl.NumberFormat("en").format(`${payload[0].value}`)}</h6>
)}
</div>
);
}
current result : The tooltip of the chart gets placed on the top of the
screen
expected result : tooltip should be placed inside the parent div with a
fixed position.
Is it possible to achieve this just through css or is there something that i've missed in the recharts library ?
Help would be greatly appreciated.
Here is my JS fiddle: https://jsfiddle.net/apasric4/ao7rLx0d/
Hi, so basically when I press roll, I want the dice visuals that appear to span the full width and height of the span element that it is within. I also want that span element to take up 100% of its parent container div, with the class name "dice".
Here is my JS:
const btn=document.querySelector("button")
const player=document.querySelectorAll('.player')
player.forEach(player=> {
diceDiv=document.createElement("div")
span=document.createElement("span")
player.appendChild(diceDiv)
diceDiv.appendChild(span)
})
const diceRoll=(span)=> {
let numOfDots = Math.floor(Math.random() * 6) + 1
span.innerHTML='⚀'
}
btn.addEventListener('click', ()=> {
player.forEach(player=> player.firstElementChild.classList.add("dice"))
const spans=document.querySelectorAll('span')
spans.forEach(span=> {
diceRoll(span)
})
})
However, I tried doing this and the unicode dice face is still appearing at the bottom of my div. Why is that?
I hope the main purpose of this game is JS and not CSS,
After playing with your fiddle, If you add following properties to your span element, it would take the space of parent div i.e "dice"
display: inline-block;
font-size: 202px;
margin-top: -72px;
Fiddle: http://jsfiddle.net/EzuTT/
CSS
#bottomfadebar {
position:fixed;
z-index: 2;
bottom: 0px;
width:267px;
height:84px;
background-color:#666;
}
#content{
width:2000px;
background-color:#ccc;
}
HTML
<div id="content">
This is all of the data. Theres lots of it. so the user will have to scroll horizontally. the bottom bar should go out of view as you scroll further to the right because there's so much data. the bottom bar should only stay "fixed" to the bottom, not to the left hand corner.
</div>
<div id="bottomfadebar">
THIS SHOULD SCROLL HORIZONALLY AS THE PAGE DOES
</div>
Ultimately, the #bottomfadebar div continues to stick in the bottom-left hand corner as you scroll to the right to see more of the content div. I'm trying to figure out how to allow the bottomfadebar DIV to scroll off to the left of the screen, but still fix at the bottom of the window as it's currently doing.
------EDIT!!!
Ok, so I kinda blew it on this because I thought it would be easily explained but then I realized the absolute factor would come in. It actually should reside inside of a NAV div thats centered.
http://jsfiddle.net/u5GuG/4/
It DOES need to stick to the absolute left:0 inside the "container" area....I should have specified, I apologize. Not sure how to do that.
I would use a little jQuery for that, if you don't mind ;)
$(window).scroll(function() {
$("#bottomfadebar").css("left", (-1 * $(window).scrollLeft()) + "px");
});
Fiddle: http://jsfiddle.net/inti/Gqpmf/
Update: now I think I got it, you want the #bottomfadebar to scroll along the bottom of the screen while you scroll the page.
$(window).scroll(function() {
var window_width = $(window).width(),
window_scrollleft = $(window).scrollLeft(),
content_width = $("#content").width(),
bottomfadebar_width = $("#bottomfadebar").width(),
content_path = content_width - window_width,
bottomfadebar_path = window_width - bottomfadebar_width,
bottomfadebar_left = 0;
// Equations:
// content_pos = window_scrollleft / content_path;
// bottomfadebar_pos = bottomfadebar_left / bottomfadebar_path;
// content_pos = bottomfadebar_pos;
bottomfadebar_left = window_scrollleft / content_path * bottomfadebar_path;
$("#bottomfadebar").css("left", bottomfadebar_left + "px");
});
Fiddle: http://jsfiddle.net/inti/Gqpmf/2/
Update 2: I think I still donn't get it, but if you want it to stick to the [bottom,center] screen position, then this css is a go:
#object {
position: fixed;
bottom: 0;
left: 50%;
width: 200px;
margin-left: -100px; /* half of the width in negative */
}
Fiddle: http://jsfiddle.net/inti/Gqpmf/3/
Update 3: really my last guess. If you want an item to be absolute positioned inside another element and relative to it, you have to set the container element's position to relative (or absolute).
#container {
position: realtive;
}
#object { /* inside #container */
position: absolute;
left: 0; /* will stick to the left side of #container */
bottom: 0; /* will stick to the bottom side of #container */
}
I modified the code in your Fiddle.
I moved bottomfadebar inside of content, change the height of content to 100% and changed the bottomfadebar to absolute
http://jsfiddle.net/EzuTT/1/ - Is that what you are looking for?
Just switch bottomfadebar position to 'absolute'. As you already have 'bottom:0' set it will stick to the bottom of the page. It will not remain visible when you scroll horizontally as an absolutely positioned element will default to 'left:0' unless you specify otherwise (except in older versions of IE (7 and under I think) where you may need to declare 'left:0;' to avoid odd rendering.
Instead of using fixed positioning, use absolute and set your left and bottom attributes to 0.
This will position the div at the bottom left of the page, instead of the bottom left of the browser viewport.
#bottomfadebar {
position:absolute;
z-index: 2;
left: 0;
bottom: 0;
width:267px;
height:84px;
background-color:#666;
}
Fiddle is here: http://jsfiddle.net/u5GuG/3/
I have a website like this one: >> website <<. It is built from 2 frames - main and a footer. I was trying to get it working without frames (don't work on mobile phones). Is there any simple CSS or jQuery method to stick the footer on the bottom to be visible always? so the effect is like on the website above? I was trying to use css, but the footer appears only when I scroll down to it. I want the footer to cover the actual content, so it's always for example 50pixels high and is always visible on the bottom of the screen. even if the page is 10000px high. I believe it's something simple, but I got lost somewhere there. Thank you for your help in advance
Yes. It's the position: fixed property.
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
}
Demo: http://jsfiddle.net/ZsnuZ/
(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
Continuing on from Sam Jones:
Basically this checks to see if the height of the document will fill the window, if it is less than the window, it will attach to the bottom of the window, if the document is larger than the window size it will attach to the bottom of the document (so it is only visible when you scroll to the bottom).
If you resize the window it will recalculate and everything should work properly!
CSS
#footer {
bottom: 0px;
}
HTML
<div id="footer">
Footer content
</div>
<script>
var footerResize = function() {
$('#footer').css('position', $("body").height() + $("#footer").innerHeight() > $(window).height() ? "inherit" : "fixed");
};
$(window).resize(footerResize).ready(footerResize);
</script>
We can even compare the heights and set the footer at the bottom using below code.
$(document).ready(function(){
if($("body").height() < $(window).innerHeight()) {
$('#footer').css('position','fixed');
$('#footer').css('bottom',0);
}
});
For me this works better, because body height includes the footer when position is static or inherit:
var footerResize = function() {
if ($('#footer').css('position') == "fixed")
$('#footer').css('position', $("body").height() + $("#footer").height() > $(window).innerHeight() ? "inherit" : "fixed");
else
$('#footer').css('position', $("body").height() > $(window).innerHeight() ? "inherit" : "fixed");
};
It stays on the bottom when growing the window now.
How do I put a div position: fixed; bottom: 0; until the scroll reaches the footer, then it's position: absolute; bottom: 0; of the content div.
I want the div to always stick to the bottom of the viewport, then stick to the bottom of the content div and not cover up my footer.
Bonus points for compass/sass solution!
In this fiddle (I used yours as a base, forked it though) you can see a working example of what you want, with a supposed footer height of 100px.
Here's the JS needed:
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
$('div#scrolled').css({'bottom' : '100px'});
} else {
$('div#scrolled').css({'bottom' : '0px'});
}
});
It checks, on scroll, if the scroll reached the bottom plus 100 pixels, and if so, it sets the bottom of the fixed element to 100px. The bad point is that it's not progressive, and the fixed element jumps when the footer appears. You cant just remove the 100 in the if statement if you want the footer to pop when the user reaches the absolute bottom: if ($(window).scrollTop() + $(window).height() >= $(document).height()) { ...
UPDATE:
Here is the "progressive" version of the above code.
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
var bottom = 100 - ($(document).height() - ($(window).scrollTop() + $(window).height())) + "px";
$('div#scrolled').css({'bottom' : bottom});
} else {
$('div#scrolled').css({'bottom' : '0px'});
}
});
Now, instead of changing the bottom to 100px whenever the user scroll is under 101px from the bottom, it calculates the position the fixed element should have depending on the scroll
Hope it helps!
Stick to position:fixed, and add margin-bottom:100px (when your div has a height of 100px) to your footer, so that that div doesn't cover up your footer.
An alternative (not recommended), would involve JavaScript, detecting whether scrollHeight == scrollTop + offsetHeight.