Centering Scroll to Element to via # ? (without modifying the DOM / using refs) - javascript

I would like to scroll to a certain element via #:
Element
<div name="element" />
It accomplishes this quite well, but it goes to the very top of the element. However, I'd like the element scrolled to to be centered for the user.
I am hesitant to use Javascript's scrollTo or other, external libraries, since I will need to use this functionality a lot (very, very much). I am using React and don't want to overuse refs and slow down my app. So I'd like to accomplish this with HTML only, preferably. JS is fine too, of course, but most solutions I came across modify the DOM and/or use refs.

There is probably a better/cleaner way to do it, but with only html/css, the only thing that I think about is to use a hidden span under your div element, like so:
html {
scroll-behavior: smooth;
}
.space {
width: 100%;
height: 400px;
background-color: blue;
}
#element {
position: relative;
top: -50vh;
visibility: hidden;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
Element
<div class="space"></div>
<p> some text </p>
<div class="space"></div>
<p> some text </p>
<div class="space"></div>
<div>
<p>
Your element
</p>
<span id="element">anchor </span>
</div>
<div class="space"></div>
</body>
</html>

AFAIK, no way to achieve your desirable effect without a bit of js. As for "centered", then some calculation is needed.
<html>
<head>
<title>Document</title>
<style>
.placeholder {
height: 1000px;
}
</style>
<script>
function scrollToDest(event) {
var id = event.target.getAttribute("href");
if (id.charAt(0) !== "#") return; // not a valid <a> element
var dest = document.getElementById(id.substr(1));
if (!dest) return; // no destination found;
event.preventDefault();
// calculate the top and bottom margin remained when dest is centered
var margin = window.innerHeight - dest.clientHeight;
// what if the dest's height is larger than viewport?
if (margin < 0) margin = 0;
window.scroll({ left: 0, top: dest.offsetTop - margin / 2, behavior: "smooth" });
}
</script>
</head>
<body>
<div class="placeholder">
Let's go!
</div>
<div id="dest">ARRIVAL</div>
<div class="placeholder"></div>
</body>
</html>

Related

Adjust anchor to other pages with a fixed menu

I'm working on a website with a menu fixed on top. At the home page, I have tags that should anchor to id's from other pages on my website. The anchor to these id's work fine, however, the top part of their content stays behind the fixed menu.
I tried to solve it by using JavaScript animate method and adding the menu's height value. This works well when the anchor's destiny id is from the same page. But it doesn't work in my case, because I want to go to an id in another page from the website.
My HTML:
My JavaScript:
<script src="http://localhost/meu_site/js/jquery-3.4.1.min.js"></script>
$('.psi-block-item').click(function() {
var target = $(this).attr("href")
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100)
})
Apparently, when jumping from the home page to another page, it seems to ignore my last js command and just follow the href, keeping part of the content behind the fixed menu.
I already saw some people suggesting to use pseudo css elements and hiding them to make it works, but I was looking for a clean and more professional solution, using only html and javascript.
Thank y'all.
$(document).load(function() {
var target = this.location.href;
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100);
})
i'm not sure, but this should be the logic to work it out...
Most probable the page is reloaded before it can execute the code. Therefore I would suggest that you include a window onload event listener to every page that looks for the hash and then executes your animation.
EDIT:
Please see the answer by #nengak-dakup. His answer looks pretty good.
The implementation would look like this.
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<header>
Link to Page1 - Anchor 1
Link to Page1 - Anchor 2
Link to Page1 - Anchor 3
</header>
</body>
and page1.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page1</title>
<style type="text/css">
header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background-color: grey;
z-index: 5;
}
.box {
position: relative;
top: 100px;
width: 100%;
height: 800px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).load(function() {
var target = this.location.href;
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100);
})
</script>
</head>
<body>
<header>
Back
</header>
<div id="anchor1" class="box" style="background-color: blue"></div>
<div id="anchor2" class="box" style="background-color: green"></div>
<div id="anchor3" class="box" style="background-color: red"></div>
</body>

After page load bootstrap always changes position of elements with absolute position on phones

Concrete problem is that I want have a page on server with structure of elements with nice positioning, but I couldn´t get it into desired shape, but only with setting them absolute position counted by screen resolution on mobile phones with jquery. After page load bootstrap will move my elements with absolute path more up. All those elements are at the bottom of page. I know that it is bootstrap, because when I will not add bootstrap server links, everything is fine as far as position of my elements is concerned. But naturally I need bootstrap there.
I tried to figure it out in many ways, but I ended with tryings to wait with jquery till the page load and after that try to set position. But no, after all moving in function that is called after page load, bootstrap starts doing it´s job later as last and don´t know how and why, but it trim my elements and push all my circles all up with bad height positions.
$(document).ready(function () {
// script for setting bubble circles in right place on whatever screen
// this is updated question for correct answer below, id=allCircles is id of global div for circles
$width = $('#allCircles').width();
$circleWidth = parseInt($('.circle').css('width'),10);
$circlesDistance = 60;
$leftCircles = ($width)/2 -(($circlesDistance/2)+$circleWidth);
$rightCircles = ($width)/2 + ($circlesDistance/2);
$('.left-circle').css('left', $leftCircles+'px' );
$('.right-circle').css('left', $rightCircles +'px');
$actPosition = $("#leftDownCircle").position();
$heightMargin= $actPosition.top + $circleWidth/2;
$('#leftDownCircle').css('top', $heightMargin+'px' );
$('#rightDownCircle').css('top', $heightMargin+'px' );
$leftMargin = ($width)/2 - ($circleWidth/2);
$heightMargin = ($heightMargin) -($circleWidth/2)-($circleWidth/4);
$('#middleCircle').css('position','absolute');
$('#middleCircle').css('left', $leftMargin +'px' );
$('#middleCircle').css('top', $heightMargin +'px' );
});
* {margin:0;}
.circle {
width: 100px;
height: 100px;
background: lightgrey;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
line-height: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.left-circle {
position: absolute; left: 15%;
}
.right-circle {
position: absolute; left: 60%;
}
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="left-circle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="right-circle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div id="middleCircle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="left-circle" id="leftDownCircle">
<div class="circle">
<h1>9</h1>
<p>Level</p>
</div>
</div>
<div class="right-circle" id="rightDownCircle">
<div class="circle" >
<h1>9</h1>
<p>Level</p>
</div>
</div>
</body>
</html>
When I will add in this code to html header this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Then on phone it will result to this:
Could someone help me to answer how this can be done programmatically correctly? (maybe why this not work or what is better practice to make the desired result as in snippet, thanks in advance for any help and your time!)
Now concrete site whith its code in it. Web emulator looks:
http://mobiletest.me/htc_one_emulator/?u=https://stackoverflowtest.000webhostapp.com/
Concrete site to test with your mobile device:
https://stackoverflowtest.000webhostapp.com/
Notice left-down waiting for bootstrap and after reload:
The basic problem you are having is that by making the elements absolute, they are positioned in relation to the nearest non-static parent element. I don't see any non-static parent elements on your page, so in your case they will be positioned relative to the body. This causes a problem as you have lots of other elements that can be different sizes (e.g. because of text wrapping over multiple lines on mobile screen that would only take one line on desktop size) before you get to the circles so determining the right top value in relation to body is not possible.
Note, two of your circles don't have a top value set, so they are placed in their default static places, which is why you are getting the overlaps.
To fix it, you need to place a non-static element around your absolute elements (e.g. by giving it a position:relative style). Position top and left values the circles in relation to that element and give the element a height that will give the circles enough space.
e.g.
<div style="min-height: 550px;position:relative;">
<div class="left-circle" style="left: 30px;">
<div class="circle">
<h2>345</h2>
<p>Bodov</p>
</div>
</div>
<div class="right-circle" style="left: 190px;">
<div class="circle">
<h2>11</h2>
<p>Best of</p>
</div>
</div>
<div id="middleCircle" style="position: absolute;
left: 110px;
top: 100px;">
<div class="circle">
<h1>9</h1>
<p>Uroven</p>
</div>
</div>
<div class="left-circle" id="leftDownCircle" style="left: 30px;
top: 198px;">
<div class="circle">
<h2>1622</h2>
<p>Zaradenych knih</p>
</div>
</div>
<div class="right-circle" id="rightDownCircle" style="left: 190px;
top: 198px;">
<div class="circle">
<h2>124</h2>
<p>Citatelov</p>
</div>
</div>
</div>
The key things to note here are:
I have put all your circles inside a div with a position:relative and a height:550px;
I have changed the top values of the circles to position themselves in relation to this new parent div.

Arrows besides bootstrap container

I have a bootstrap container. As this is common for it, it doesn't take the hole page width, but is centered with a lot of margin on the left and right side.
What I'm trying to achieve is, that on the left and the right side (so besides the div with the container class, there are 2 centered arrows, left side pointing to left and right side pointing to the right.
You wonder, why I want to do that? I try to make something like a Carousel, but with pages, so when I click on the right arrow, there comes the content of the next page, clicking on the left arrow then, I get back to the other page.. I hope you know what I mean...
What I have is this:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop Upload</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="css/dropzone.css" type="text/css"/>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/dropzone.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container fill">
<form action="upload.php" class="dropzone needsclick dz-clickable full-height">
<div class="dz-message"><b> </b></div>
</form>
</div>
</body>
</html>
You could do it globally as Bootstrap does with the arrow in the carousel :
Having parents containers in each side of the page, fixed to the top AND with the screen's height as fixed height (easy to do with JQuery).
<body>
<div class="parentofarrow left"><div class="parrentofarrow__arrow left"></div></div>
<div class="parentofarrow right"><div class="parrentofarrow__arrow right"></div></div>
<div class="container"></div>
</body>
You could have a another parent for all of them to have a different structure or anything. (in this case change position fixed to position absolute)
And in css :
.parentofarrow {
position: fixed; // or absolute to a specific parent (relative)
top: 0px;
// height fixed with screensheight using Jquery
width: // as you wish;
text-align: center; // or margin auto on arrows
}
.parentofarrow.left { left: 0px; }
.parentofarrow.right { right: 0px; }
.parentofarrow__arrow { //customize and positionning as you wish }
And in these parents, having a vertical and horizontal align arrow with a specific action linked to change page content as you wish.
Should be enough!
Note that this solution is not the easiest but it offers a certain modularity (change height, parent, position...).
The simplest way without taking your elements position in consideration would be using negative margins. (fiddle here)
html:
<div id="arrow">←</div>
css:
#arrow {
margin-left: -100px;
}
Another viable way is to use position: absolute like this:
#container {
position: relative;
}
#left-arrow {
position: absolute;
top: 40%;
bottom: 40%;
height: 10%;
line-height: 100%;
left: -5%;
}
The easiest solution is too use the grid system.
<div class="container fill">
<div class="row">
<div class="col-xs-1">Left</div>
<div class="col-xs-10 main-stage">
<form action="upload.php" class="dropzone needsclick dz-clickable full-height">
<div class="dz-message"><b> </b></div>
</form>
</div>
<div class="col-xs-1">Right</div>
</div>
</div>
</body>

Change the background of a div depending on the position of the scrollbar without it looking like it loaded

Basically I saw this page THIS PAGE and if you scroll up and down you can see the glass of drink becoming full and empty depeing on where your scrollbar is. Any idea how this is done?
It's pretty complex to do stuff like that but not particularly hard.
First, you'll need to manage this using something like jQuery. You got that already so good...
The html below is a working example that assumes the user has an image:
it is 700 x 100. The code is pretty simple. Round the window's scrollTop() value and figure the right frame offset based on the results. No need to fully explain, the code below says it all.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test</title>
<meta name="viewport" content="width=device-width">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<style>
#main{position:relative;}
.dummy{height:500px;}
#glass{
height:200px;
width:100px;
background:url(http://www.hep-g.com/glass.jpg) no-repeat;
background-position:0 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var frame = 0;
$(window).scroll(function(){
if($(window).scrollTop() % 100 < 10)
frame = Math.floor($(window).scrollTop() / 100) * 100;
if(frame > 700)
frame = 700;
$('#glass').css('background-position', '-' + frame + 'px 0');
});
});
</script>
<body>
<div id="main">
<section class="dummy">
This is dummy content
</section>
<section id="glass"></section>
<section class="dummy">
This is dummy content
</section>
<section class="dummy">
This is dummy content
</section>
</div>
</body>
</html>
It is actually one image with the background-position changing. The image is completely loaded by the time you see the glass originally.
http://www.smokeybones.com/static/img/tv/beer_sprite_lrg.jpg?e3e4e50f54ea

How to apply 100% height to div?

I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
In jQuery, you can try something like this:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
Assuming you want the div 30px from the bottom of the window.
On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;
You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. You could add this image to the div that wraps the three columns or to the body tag.
If these columns a going to have content in them it's probably worth adding some as the columns will behave differently.
You can hide the overflow in the containing DIV:
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Note that content might dissapear when resizing the window using this technique.
You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!
html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Perhaps this could work?! But I don't know whats happens if there is to mutch text...
Simply don't worry about it if your goal is to have the colour fill the bottom.
Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
The property 'height: 100%;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it.
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that div.
it a bit ugly, but it works..
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
Here's a litle jquery fix I have done:
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
$(window).resize(function(){
$('.elastic').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
put the following on on your script tag or external javascript.
then change
when you resize the window... it will automatically fit its height to available space on the bottom. you could have as many divs as you like however you can only have one elastic inside that parent. couldnt be bothered to calculate multiple elastics :) hope it helps
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
This should be included in case the browser is resized....
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}

Categories

Resources