I am trying to lock the green box to the very top of the when a user scrolls through the content. However, when you scroll there is a gap on top of the green box (as shown in the demonstration)
I've tried to set position to fixed for the green box, but it jumps out of the red box. So it needs to remain absolute.
Please look at the example I've set it up live here http://jsfiddle.net/jpXjH/839/
OR look at the code here
<div style="padding: 20px 0px; background-color:cyan;">
This is a header with some random content
</div>
<div style="width:480px; height:1400px; overflow:hidden; margin:auto;
border:1px solid gray; position:relative; background-color: #ff5d5d; ">
<div id="locked">
This element needs to be on the very top LOCKED when scrolled down.
However you can see there is a gap in the very top when you scroll.
</div>
</div>
<style>
#locked{
background-color: limegreen;
padding:10px;
width:150px;
position:absolute;
top:0;
right:0;
}
</style>
<script>
window.onscroll = changePos;
function changePos() {
var locked = document.getElementById("locked");
if (window.pageYOffset > 30) {
locked.style.position = "absolute";
locked.style.float = "right";
locked.style.top = pageYOffset + "px"
} else {
locked.style.position = "";
locked.style.top = "";
}
}
<script>
Thanks in advance
Simplest solution I can think of is to subtract the height of the locked bar at the top from the header.style.top you alter in your JS:
header.style.top = pageYOffset - 76 + "px"
obviously you can get the height directly from the element instead of hardcoding it.
Your body or html tag probably has some padding/margin on it. Check if it does, and then account for it by substracting the amount from the window.pageYOffset global.
You also need to account for the height of any element that comes before the red div.
Why you don't try to use position fixed, like:
#header{
background-color: limegreen;
padding:10px;
width:150px;
position:fixed;
top:0;
right:0;
}
window.onscroll = changePos;
function changePos() {
var header = document.getElementById("header");
if (window.pageYOffset > 30) {
//header.style.position = "absolute";
header.style.float = "right";
//header.style.top = pageYOffset + "px"
} else {
header.style.position = "";
header.style.top = "";
}
}
And if you and to be aligned with red container you can calculate with JS.
Related
I'm developing a page where during the scroll, elements, at breakpoints, will stop on the screen and animate, once the final point in the scroll is reached they go back to normal scrolling page behavior.
Basically, once div X gets to the middle of the screen it position changes to fixed, and will stop at middle of the screen expanding, moving etc, as the user scrolls, and reached the final scroll point, it will stop and change from position fixed to relative staying in the same spot.
I did a prototype where once the element got to the point on the screen I wanted it to start animate, i would measure its position on the screen with the browser ruler and get the fixed position it should take from then on.
BUT this is a poor and ugly solution, with a lot of hand work.
We can get the scroll and sum up things to get the Y position, but the x position messes up for making the design responsive.
How to do with JS This change?
How to get the Fixed equivalent position of a Relative element dynamically?
🤔
I dont have much experience with JS, but I'm sure there are good solutions for this.
I think that IS the solution, to use js for changing instantaneously the position (x,y) and the position (absolute/fixed). Also I think there's a library for that but here's a sketch of a solution.
var div = document.querySelector(".dog");
var div_status = document.querySelector("#div_status");
var start = 100;
var stop = 800;
var swap = false;
window.addEventListener("scroll", function() {
var y = window.scrollY
var rect = div.getBoundingClientRect();
div_status.innerText = rect.top.toFixed() + " " + y.toFixed()
if (y >= start && y <= stop) {
div_status.style.background = "green"
if (!swap) {
div.style.position = "fixed";
div.style.top = rect.top + "px"
swap = true
}
} else {
div_status.style.background = "red"
if (swap) {
div.style.position = "absolute";
div.style.top = (y + rect.top) + "px"
swap = false;
}
}
})
body {
height: 2000px;
}
.dog {
height: 50px;
width: 200px;
border: 1px solid gray;
background: lightyellow;
line-height: 50px;
text-align: center;
position: relative;
}
#div_status {
background: red;
color: white;
position: fixed;
right: 100px;
}
<body>
<pre id="div_status">0 0</pre>
<br>
<br>
<br>
<br> keep scrolling
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="dog">Dog</div>
</body>
Answering my own question... But just learned about position:sticky,
this seems to resolve the problem with just CSS, very easy and way more smooth.
#wrap{
margin:15px;
padding:10px;
}
.d1{
width:400px;
height:500px;
}
#d2{
//background-color:red;
height:900px;
}
#d3{
width:100px;
height:50px;
border: 10px solid black;
background-color:green;
position: sticky;
top: 70px;
}
<body>
<div id="wrap">
<div class="d1"><div>Scroll Down</div></div>
<div id="d2" >
<div id="d3" class="content">I'm the guy...</div>
</div>
<div class="d1"><div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
Scroll Up</div></div>
</div>
</body>
i am trying to set the position of a div to right 100% of the body. How-ever it needs to be done in JavaScript(or jQuery).
This is how i imagined the code would look...
const div = document.getElementById("div");
div.style.right = 100 + "%";
Any information or documentation for me to research would be greatly appreciated thank you. For clarification i want to move a div to the right side of the body, but i want to do it in percentages in javaScript.
You are looking for the width CSS property to set to 100%.
const div = document.getElementById("div");
div.style.width = "100%";
<div id="div" style="border: 1px solid black;"></div>
However, with the div tag, explicitly making its width 100% is unnecessary as it is a block level element (having display: block) and will automatically inherit the width of its parent.
For a progress bar, you just need to set its width to 0% at the start and gradually increase the width with a setInterval. Reference: https://www.w3schools.com/howto/howto_js_progressbar.asp
.progress {
width: 100%;
background-color: #ddd;
}
.bar {
width: 0%;
height: 20px;
background-color: #4CAF50;
}
<div class="progress">
<div class="bar"></div>
</div>
<p/>
<button onClick="run()">Start</button>
<script>
var bar = document.querySelector('.bar');
function run(){
var width = 0;
var intvl = setInterval(function(){
width ++
bar.style.width = width + "%";
if(width>=100){
clearInterval(intvl);
}
}, 10);
}
</script>
Set position:absolute in this element and
Set position:relative in parent element
for css position property, percentage(%) works only for absolute position.
jQuery(document).ready(function(){
jQuery("#child").css({
"position":"absolute",
"right":"0"
});
});
#parent{
position:relative;
width:100%;
border:1px solid #000;
height:100px;
}
#child{
width:50px;
height:50px;
background-color:red;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child"></div>
</div>
#vp_arth: In new question edition - is it just right: 0?
#kanna: I cant believe i did not try that already. You did fix my issue.
So, yes, right CSS property is a distance from right side.
Zero means «move a div to the right side of the parent»
Answer Revisions
I am working on a website that while mouse over a DVD shows the details like you see in picture 1, however, it doesn't work on those DVD placed to the right of the screen as you can see in picture 2, the content got chopped.
How to let it automatically choose which direction to display the content? Like if this DVD is close to the right screen, show content to the left?
Many thanks!
.imgbox .imgbox_content{
display: none;
}
.imgbox:hover .cover{
display: none;
}
.imgbox:hover .imgbox_content{
display: block;
z-index:2;
width:600px;
border-radius: 1%;
border:1px solid gray;
-webkit-transition: 1s;
position:absolute;
background: black;
color:white;
}
Here's a quick solution using JS. Not seeing any JS/HTML though, so you'll need to adapt it to whatever your code looks like:
var imgboxes = document.querySelectorAll('.imgbox');
imgboxes.forEach(function (imgbox) {
var rect = imgbox.getBoundingClientRect(),
screen_width = document.body.clientWidth,
popup_width = <<POPUP_CONTENT_WIDTH>>;
if (rect.right + popup_width > screen_width) {
imgbox.classList.add('to_left');
}
});
and then change your CSS to something like this for the popup:
.imgbox:hover .imgbox_content{
display: block;
z-index:2;
width:600px;
border-radius: 1%;
border:1px solid gray;
-webkit-transition: 1s;
position:absolute;
background: black;
color:white;
}
imgbox:hover .imgbox_content.to_left {
/* this assumes you've got a position:relative item wrapping the imgbox and that .imgbox_content is a child */
right: 0;
}
In order to get even more complete, you can handle screen resizes too:
window.addEventListener('resize', calculate_pos_imgboxes)
var calculate_pos_imgboxes = function() {
var imgboxes = document.querySelectorAll('.imgbox');
imgboxes.forEach(function (imgbox) {
var rect = imgbox.getBoundingClientRect(),
screen_width = document.body.clientWidth,
popup_width = <<POPUP_CONTENT_WIDTH>>;
if (rect.right + popup_width > screen_width) {
imgbox.classList.add('to_left');
} else {
imgbox.classList.remove('to_left');
}
});
}
calculate_pos_imgboxes();
The easiest way to do this is to just force your popups to appear at the center of the screen. You can do this using position:absolute. However, if you want the popups bounded to the location of the item - then you have to do some calculations.
It would look like this.
Get width of your popup.
Get distance from left edge of target to right edge of screen.
Compare 1 and 2
If dist < width, then offset to the left. Otherwise, offset to the right.
The code for this would look something like (using jQuery).
var padding = 20;
var elem = $(yourpopup);
var popupwidth = elem.width();
var position = p.position();
var dist = position.left - popupwidth;
// if the popup is wider than distance to edge plus padding, then offset margin using negative value.
if (dist < popupwidth){
elem.css('margin-left', "'-" + popupwidth + padding + "px'" );
}
issue:
http://jsfiddle.net/um2b98we/5/
I have a small problem. I try to create a navigation where the child (blue box) div is 75% screen height. I have no problems at all, as long as the parent (green box) is in relative position.
However, when I scroll down, I want the parent to be fixed on top of the screen. However then the child changes the height to 75% of the parent but I need it to keep being 75% height of the screen
for sample code, go to the link above:
#scroll, #header, #one, #two {width: 100%}
#scroll {height: 2000px;}
#one {
background: red;
height:50px;
}
#two {
background: green;
height:50px;
}
#two.fixed{
position:fixed;
top:0;
}
#sub {
position: absolute;
height: 75%;
width: 80%;
background: blue;
margin-top:50px;
}
<div id="scroll">
<div id="header">
<div id="one"></div>
<div id="two">
<div id="sub"></div>
</div>
</div>
</div>
I have been trying to fix it for a long time without any success. I would appreciate the help.
You could give the div height with javascript:
$(window).bind('scroll', function(){
var windowHeight = $(window).height();
$('#two').toggleClass('fixed',$(window).scrollTop() > 50);
$('#sub').css('height',windowHeight *.75);
});
or add it after you applied the fixed class to it:
$(window).scroll(function() {
var scroll = $(window).scrollTop(),
windowHeight = $(window).height();
if (scroll >= 50) {
$("#two").addClass("fixed");
$('#sub').css('height', windowHeight *.75);
} else {
$("#two").removeClass("fixed");
}
});
I want to show the text text masking effect with animation
Here is my fiddle for what I am trying to achieve: http://jsfiddle.net/qTWTH/2/
I am not able to position the Red text in "center" above theblack text so the efffect should be something like this: http://jsfiddle.net/qTWTH/1/ *BUT aligned Center*
Also how to repeat the animation, this as per the JS, it just animate only once, I want to repeat the JS once the effect is done.
Code: HTML
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<span id="red">Waiting for the task!</span>
</div>
CSS
#mainbox {
width:600px;
text-align:center;
}
#black {
color:black;
font-weight:bold;
font-size:2em;
}
#red {
position:absolute;
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
}
JS
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function () {
console.log(red.style.width);
if (red.style.width == "290px") clearInterval(animation);
red.style.width = parseInt(red.style.width, 10) + 1 + "px";
}, 50);
Let me know if you need any other information.
Please suggest.
Check this fiddle
By centering the div itself, and positioning the red according to that, you'll ensure they line up.
#mainbox {
display: inline-block;
position: relative;
}
html {
text-align: center;
}
#red {
left: 0;
}
To run it again and again change like this:
var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function(){
console.log(red.style.width);
if(red.style.width == "290px")
{
red.style.width = "0px"; // here i have changed
}
red.style.width = parseInt(red.style.width,10)+1 +"px";},50);
Correct fiddle: http://jsfiddle.net/arjun_chaudhary/qTWTH/22/
I altered your code slightly, you almost had it
http://codepen.io/nighrage/pen/EAmeF/
<div id="mainbox">
<span id="black">Waiting for the task!</span>
<div id="red">Waiting for the task!</div>
</div>
#red {
z-index:10;
left:8px;
width:0px;
overflow:hidden;
font-weight:bold;
font-size:2em;
color:red;
white-space:nowrap;
margin: 0 auto;
margin-top: -37px;
}
change the second span for a div