Continuing this example, I want to centralize the image in the top div, so that, as the page is scrolled, the center of the image always appear on it.
To achieve this, I need to resize the top div, instead of just shifting it. But as I resize, the image overflows the div, unless I use overflow:hidden. The problem is, overflow:hidden only works with position:relative. But this breaks the whole layout.
How can I center the image in the top div and still have it scrolling like here?
HTML
<body onscroll='scroll(event)'>
<div class='top' id='top'><img src='http://www.vejanomapa.net.br/wp-content/uploads/2013/03/Maria-Fuma%C3%A7a-em-Tiradentes-MG.jpg'></div>
<div class='bottom' id='bottom'>
<div class='menu'>Menu</div>
<div class='main'><img src='http://tvulavras.com.br/wp-content/uploads/2017/04/maria-fuma%C3%A7a.jpg'></div>
</div>
</body>
JavaScript
function scroll(e) {
var T = document.getElementById('top');
var B = document.getElementById('bottom');
var imgH = T.clientHeight; // header image height
var hH = 200; // fixed header height
if (imgH-e.pageY > hH) { // image is scrolling
T.classList.remove('active')
T.style.top = '-'+e.pageY+'px';
T.style.position = 'sticky';
B.style['margin-top'] = '0';
} else { // image should remain fixed
T.classList.add('active')
T.style.top = '-'+(imgH-hH)+'px';
}
}
CSS
html, body {
margin:0;
}
body {
overflow-y:scroll;
overflow-x:hidden;
}
img {
display:block;
}
.top {
background:#FCC;
display:block;
top:0;
position: sticky;
}
.active{
position: fixed;
}
.active ~ .bottom {
margin-top: 386px;
padding-left: 100px;
}
.active ~ .bottom .menu {
position: fixed;
top: 200px;
bottom: 0;
left: 0;
}
.bottom {
display:flex;
min-height:1500px;
background:#CFC;
}
.menu {
min-width:100px;
background:#CCF;
}
Like so, with absolute positioning
.yourElementGoesHere {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
I finally managed to solve it!
HTML
<body onscroll='scroll(event)'>
<div class='top' id='top'><img id='imgTop' src='http://www.vejanomapa.net.br/wp-content/uploads/2013/03/Maria-Fuma%C3%A7a-em-Tiradentes-MG.jpg'></div>
<div class='bottom' id='bottom'>
<div class='menu' id='menu'>Menu</div>
<div class='main' id='main'><img src='http://tvulavras.com.br/wp-content/uploads/2017/04/maria-fuma%C3%A7a.jpg'></div>
</div>
</body>
JavaScript
function scroll(e) {
var T = document.getElementById('top');
var B = document.getElementById('bottom');
var M = document.getElementById('menu');
var A = document.getElementById('main');
var I = document.getElementById('imgTop');
var imgH = T.clientHeight; // header image height
var hH = 100; // fixed header height
if (imgH-e.pageY > hH) { // scrolling
T.style.top = '-'+e.pageY+'px';
I.style.top = (e.pageY/2)+'px';
A.style.paddingLeft = 0;
B.style.marginTop = 0;
M.style.position = 'sticky';
} else { // fixed
T.style.top = '-'+(imgH-hH)+'px';
A.style.paddingLeft = '100px';
M.style.position = 'fixed';
M.style.top = hH+'px';
M.style.bottom = 0;
}
}
CSS
html, body {
margin:0;
}
body {
overflow-y:scroll;
overflow-x:hidden;
}
#imgTop {
display:block;
position:relative;
}
.top {
background:#FCC;
display:block;
top:0;
position: sticky;
overflow:hidden;
}
.bottom {
display:flex;
background:#CFC;
}
.menu {
min-width:100px;
background:#CCF;
}
JSFiddle: https://jsfiddle.net/aor0abhf/3/
Related
I am trying to fit a slide nav on the right side of the splitter, which is able to split when dragging the separator based on the width of the right side. https://jsfiddle.net/74bewsdu/
I tried modifying the width to auto as well as the z-index, it still doesn't work well.
index
<div class="splitter">
<div id="first">
<iframe src="{{ route('child') }}" style="width:100%; height:100%" frameBorder="0">
Your browser isn't compatible
</iframe>
</div>
<div id="separator"></div>
<div id="second">
<div id="mySidenav" class="sidenav"></div>
<div style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</div>
</div>
</div>
</div>
javascript
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
css
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
You could get the offsetWidth of the right side div (#second) plus the offsetWidth of the separator, and set the sliding nav width to that value. If you don't want to completely overlap the menu button, you could subtract it by the width of the menu button (or some arbitrary constant).
Example (see comments in lines between /* added */ and /* end added */ areas in the snippet below). Update: I also added code to check to see if the slider nav is open. Now, if you drag the slider when the side nav is open, it should be dynamically resized.
let navIsOpen = false; // variable to keep track of if the slider nav is open
function openNav() {
/* added */
// calculate width of right side div + separator
let width = second.offsetWidth + separator.offsetWidth;
// uncomment below line to subtract a value so the slider doesn't obscure the menu button/text
//width = width - 95;
document.getElementById("mySidenav").style.width = width + "px";
navIsOpen = true; // slider nav is open
/* end added */
}
// function is used for dragging and moving
function dragElement(element, direction) {
var md; // remember mouse down info
const first = document.getElementById("first");
const second = document.getElementById("second");
element.onmousedown = onMouseDown;
element.onmousedown = onMouseDown;
function onMouseDown(e) {
//console.log("mouse down: " + e.clientX);
md = {
e,
offsetLeft: element.offsetLeft,
offsetTop: element.offsetTop,
firstWidth: first.offsetWidth,
secondWidth: second.offsetWidth
};
first.style.pointerEvents = 'none';
document.onmousemove = onMouseMove;
document.onmouseup = () => {
//console.log("mouse up");
document.onmousemove = document.onmouseup = null;
}
}
function onMouseMove(e) {
//console.log("mouse move: " + e.clientX);
var delta = {
x: e.clientX - md.e.clientX,
y: e.clientY - md.e.clientY
};
if (direction === "H") // Horizontal
{
// prevent negative-sized elements
delta.x = Math.min(Math.max(delta.x, -md.firstWidth),
md.secondWidth);
element.style.left = md.offsetLeft + delta.x + "px";
first.style.width = (md.firstWidth + delta.x) + "px";
second.style.width = (md.secondWidth - delta.x) + "px";
}
/* added */
if (navIsOpen) { // check if slider nav is open, if so resize
openNav();
}
/* end added */
}
}
dragElement(document.getElementById("separator"), "H");
.splitter {
width: 100%;
height: 300px;
display: flex;
}
#separator {
cursor: col-resize;
background-color: #aaa;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
background-repeat: no-repeat;
background-position: center;
width: 10px;
height: 100%;
/* prevent browser's built-in drag from interfering */
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#first {
background-color: #dde;
width: 20%;
height: 100%;
min-width: 10px;
}
#second {
background-color: #eee;
width: 80%;
height: 100%;
min-width: 10px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
<div class="splitter">
<div id="first">
<iframe src="{{ route('child') }}" style="width:100%; height:100%" frameBorder="0">
Your browser isn't compatible
</iframe>
</div>
<div id="separator"></div>
<div id="second">
<div id="mySidenav" class="sidenav"></div>
<div style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</div>
</div>
</div>
I'm trying to make a header that has a margin on the top, left, and right until being scrolled, at which point it should smoothly grow until there is no longer any margin.
I've taken care of the margin-top with 'position: sticky' and have tried using scroll-linked positioning to progressively grow the header horizontally.
HTML
<header id = "header">
<h1>Hi there</h1>
</header>
JS
window.onscroll = function() { /* wait until page loaded */
var margin = 15;
var borderOffset = 1.875; /* 15/8 */
var scrollStatus = window.pageYOffset;
var header = document.getElementById("header");
if (scrollStatus <= margin) {
header.style.marginLeft = (margin - scrollStatus) + "px";
header.style.marginRight = (margin - scrollStatus) + "px";
header.style.borderRadius = ((margin - scrollStatus) / borderOffset) + "px";
}
};
CSS
header {
background-color: blue;
margin: 15px;
position: sticky;
top: 0;
border-radius: 8px;
padding: 8px;
}
codepen: https://codepen.io/anon/pen/yryZBb
However, when I scroll the page too fast, the header doesn't completely grow. How can I make this work?
If you not want JQuery:
let header = document.getElementById("header");
let nav = document.getElementById("nav");
window.addEventListener("scroll", function ()
{
let marginTop = 10;
if (window.scrollY >= (header.clientHeight + marginTop))
{
nav.style.position = "fixed";
nav.style.width = "100%";
nav.style.margin = "0";
}
else
{
nav.style.position = "";
nav.style.width = "";
nav.style.margin = "";
}
});
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { height: 1200px; }
img { width: 100%; }
#header { background: #a3b0b0; }
#nav { background: #cad7d7; padding: 8px; top: 0; margin: 10px 40px; }
ul { margin: 0; padding: 0; list-style: none; }
ul li { display: inline; }
<header id="header">
<img src="https://www.lagaleramagazine.es/rucab/img/1400_slider1.jpg">
</header>
<nav id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
So I just added
else {
header.style.marginLeft = "0";
header.style.marginRight = "0";
header.style.borderRadius = "0";
}
right after if (scrollStatus <= margin) {...} to make sure the header grows completely. Probably not the best way to do this, so I won't mark this as accepted just yet.
Over the responsive calendar image I would like to have a text with the date. When the screen is resized to that point that the image will start to resize, the text over that image should resize as well, so that it stays the same relative to the image width and height.
I have achieved that by using javascript as I was unable to do it only with CSS. My question is, how can I do that only with CSS. Is it possible? If yes, please show that in the code that I have created on fiddle:
https://jsfiddle.net/bej0od7r/
HTML:
<div class="datePictureHolder">
<img class="img-responsive" alt="News Icon" src="http://shrani.si/f/u/13K/4rB6HshN/news-icon.png"/>
<div class="datePictureText">
<div class="year">2017</div>
<div class="day">25. Feb</div>
</div>
</div>
JAVASCRIPT
ResizeDateIcons();
window.onresize = function () {
ResizeDateIcons();
};
function ResizeDateIcons() {
// constants
var imageWidth = 150; // width and height must be the same
var dayTextSize = 36; // text size on maximum image width
var yearTextSize = 23; // text size on maximum image width
var yearLineHeigh = 70;
//
var allImages = document.getElementsByTagName("img");
var allDayTexts = document.getElementsByClassName("day");
var allYearTexts = document.getElementsByClassName("year");
var j = 0;
for (var i = 0; i < allImages.length; i++) {
if (allImages[i].alt === "News Icon") {
allDayTexts[j].style.fontSize = (allImages[i].width / imageWidth) * dayTextSize + "px";
allYearTexts[j].style.fontSize = (allImages[i].width / imageWidth) * yearTextSize + "px";
allYearTexts[j].style.lineHeight = (allImages[i].width / imageWidth) * yearLineHeigh + "px";
j++;
}
}
}
CSS:
.datePictureHolder {
position: relative;
display: inline-block;
}
.datePictureText {
position: absolute;
left: 0;
top: 5%;
width: 100%;
text-align: center;
color: white;
}
.datePictureText .year {
font-size: 23px;
line-height: 70px;
}
.datePictureText .day {
font-size: 36px;
font-weight: bold;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
Sorry, this is a bit rushed, but it might help! The green container is only there for testing purposes.
https://codepen.io/anon/pen/gxwZge
.container {
width:20%;
float:left;
background:green;
}
.datePictureHolder {
width:auto;
float:left;
position:relative;
}
.datePictureHolder img {
width:100%;
float:left;
}
.datePictureText {
top:0;
left:0;
position:absolute;
color:white;
width:100%;
text-align:center;
padding:40% 0;
box-sizing:border-box;
font-size:1.2rem;
}
<div class="container">
<div class="datePictureHolder">
<img class="img-responsive" alt="News Icon" src="http://shrani.si/f/u/13K/4rB6HshN/news-icon.png"/>
<div class="datePictureText">
<div class="year">2017</div>
<div class="day">25. Feb</div>
</div>
</div>
</div>
You can achieve your result using either media query or using em for fonts
html {
font-size: 16px;
#media (min-width: 800px) {
font-size: 18px;
}
#media (min-width: 1200px) {
font-size: 20px;
}
}
<!--- or try em for mobile web dev. 1em is 16px-->
.font-resize {
font-size : 0.5 em;
}
<div>Text Text</div>
I have been trying to use this fading slideshow code that I have found from this website.. http://blog.crondesign.com/2012/01/free-javascript-for-rotating-website.html
My main problem is that my divs will not stack on top of each other and I have researched of different ways like z-indexing and position:absolute and none of them seem to work. Can someone please have a look at my code to see what isn't working!
HTML:
<div id="slideshow_container">
<div id="banner2" class="banner"></div>
<div id="banner3" class="banner"></div>
<div id="banner4" class="banner"></div>
<div id="banner5" class="banner"></div>
<div id="banner1" class="banner"></div>
</div>
CSS
#slideshow_container
{
height:486px;
width: 806px;
margin-top: 0%;
margin:auto;
background-color:green;
display:block;
}
.banner
{
z-index:1;
height:486px;
width:806px;
top:0px;
background:#FFF;
border:solid 1px #CCC
position: absolute;
}
#banner1
{
background:green;
z-index: 5;
}
#banner2
{
background: blue;
z-index:6;
}
#banner3
{
background:#F90;
}
#banner4
{
background:#FFC;
}
#banner5
{
background:#99CCFF;
}
#slideshow_container
{
height:486px;
width: 806px;
margin-top: 0%;
margin:auto;
background-color:green;
display:block;
}
.banner
{
z-index:1;
height:486px;
width:806px;
top:0px;
background:#FFF;
border:solid 1px #CCC
position: absolute;
}
#banner1
{
background:green;
z-index: 5;
}
#banner2
{
background: blue;
z-index:6;
}
#banner3
{
background:#F90;
}
#banner4
{
background:#FFC;
}
#banner5
{
background:#99CCFF;
}
Javascript
var imageCount = 5; //how many images in total?
var changeSpeed = 3; //how many seconds between fades?
var fadeSpeed = 0.5; //how many seconds should the fade take?
var fps = 25; //animation frames per second
//BANNER FUNCTIONS:
var topImgID
var changeInterval
function $(id)
{
return(document.getElementById(id));
}
function changeOpac(obj, opacity)
{
obj = obj.style;
obj.opacity = (opacity / 100);
obj.MozOpacity = (opacity / 100);
obj.KhtmlOpacity = (opacity / 100);
obj.filter = "alpha(opacity=" + opacity + ")";
}
function changeImage()
{
var nextImgID = ( topImgID+1 <= imageCount ? topImgID+1 : 1 ); //get id number of next image in list
var nextImg = $('banner'+nextImgID);
var lastImg = $('banner'+topImgID);
var opac = 0;
changeOpac( nextImg, opac) //make next image invisible, then bring it to the top:
lastImg.style.zIndex = 2;
nextImg.style.zIndex = 3;
var fadeInterval = setInterval(function()
{
if(opac < 100)
{
opac += Math.ceil(100/(fadeSpeed*fps));
changeOpac(nextImg, opac);
}
else
{
lastImg.style.zIndex = 1;
clearInterval(fadeInterval);
}
}, 1000/fps);
topImgID = nextImgID;
}
function startBanner(firstImageID)
{
topImgID = (firstImageID==undefined ? 1+Math.floor(Math.random()*(imageCount)) : firstImageID);
$('banner'+topImgID).style.zIndex = 2;
changeInterval = setInterval(changeImage, changeSpeed*1000);
}
you forgot to close your border styles, so position:absolute isn't being read:
.banner
{
z-index:1;
height:486px;
width:806px;
top:0px;
background:#FFF;
border:solid 1px #CCC <----------- missing ';'
position: absolute;
}
Hide/show nav bar when user scrolls up/down
Here's the example I'm trying to achieve:
http://haraldurthorleifsson.com/
or
http://www.teehanlax.com/story/readability/
The navigation bar slides up off screen when you scroll down and slides back down on screen when you scroll up. I've figured out how to do it with fade in/fade out but I would like to achieve it with the exact same animation as in the example. Note: I already tried SlideIn() and like the way that it does the stretching animation...
JQUERY:
var previousScroll = 0,
headerOrgOffset = $('#header').offset().top;
$('#header-wrap').height($('#header').height());
$(window).scroll(function() {
var currentScroll = $(this).scrollTop();
console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
if(currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('#header').fadeOut();
} else {
$('#header').fadeIn();
$('#header').addClass('fixed');
}
} else {
$('#header').removeClass('fixed');
}
previousScroll = currentScroll;
});
CSS:
#header {
width: 100%;
z-index: 100;
}
.fixed {
position: fixed;
top: 0;
}
#header-wrap {
position: relative;
}
HTML:
<div id="header-wrap">
<div id="header" class="clear">
<nav>
<h1>Prototype</h1>
</nav>
</div>
</div>
To get the inner content of the nav to slide up instead of being progressively hidden, you need to do the animation on the parent element, and keep the inner element at the bottom of the parent, like so:
jsfiddle
<div id="header-wrap">
<div id="header" class="clear">
<nav><h1>Prototype</h1>another line<br/>another line
</nav>
</div>
</div>
css
body {
height: 1000px;
}
#header {
width: 100%;
position: absolute;
bottom: 0;
}
#header-wrap {
width: 100%;
position: fixed;
background-color: #e0e0e0;
}
js
var previousScroll = 0,
headerOrgOffset = $('#header').height();
$('#header-wrap').height($('#header').height());
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('#header-wrap').slideUp();
} else {
$('#header-wrap').slideDown();
}
} else {
$('#header-wrap').slideDown();
}
previousScroll = currentScroll;
});
Have you tried animate? but replace the -60px with the height of the navbar. But negative.
$(window).scroll(function() {
var currentScroll = $(this).scrollTop();
console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
if(currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('#header').animate({
top: '-60px' //Change to Height of navbar
}, 250); //Mess with animate time
} else {
$('#header').animate({
top: '0px'
},250);
$('#header').addClass('fixed');
}
} else {
$('#header').removeClass('fixed');
}
previousScroll = currentScroll;
});
Whatever navbar element you use, it has to include a transition: transform 0.3s on it, and a base transform of 0.
#navbar {
position: fixed;
right: 0; left: 0; top: 0;
/* your height */
height: 40px;
/* .... */
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;
-o-transition: transform .3s;
transition: transform .3s;
}
#navbar.scrolled {
/* subtract your height */
-webkit-transform: translate3d(0,-40px,0);
-moz-transform: translate3d(0,-40px,0);
transform: translate3d(0,-40px,0);
}
Then your javascript needs to watch the user's scrolling:
;(function (){
var previousScroll = 0;
var navbar = document.getElementById('navbar'),
navClasses = navbar.classList; // classList doesn't work <IE10
window.addEventListener('scroll', function(e){
var currentScroll = window.scrollY;
var isDown = currentScroll > previousScroll;
if ( isDown && !navClasses.contains('scrolled') ){
// scrolling down, didn't add class yet
navClasses.add('scrolled'); // we hide the navbar
} else if ( !isDown ){
// scrolling up
navClasses.remove('scrolled'); // won't error if no class found
}
// always update position
previousScroll = currentScroll;
});
}()); //run this anonymous function immediately
Try headroom js.
Also you can edit the CSS classes and deploy the transition effect.
http://wicky.nillia.ms/headroom.js
css
#media(min-width: 1079px){
#header{
width:100%;
height:82px;
border:1px solid grey;
background-color: lightgreen;
margin:0 auto;
position:fixed;
transition-property: all;
transition-duration: 0.3s;
transition-delay: 0s;
transition-timing-function: ease-out;
}
nav{
display: flex;
justify-content: space-between;
}
nav .nav1{
list-style-type: none;
padding: 0px;
}
nav a{
text-decoration: none;
color:grey;
padding: 13px;
display: block;
color: grey;
margin-top: 15px;
}
a{
text-decoration: none !important;
}
nav a:hover{
color: red;
}
nav .nav1{
display: flex;
justify-content: flex-end;
}
.row2{
background-color: skyblue;
height:2000px;
margin-top: 82px;
}
}
html
<!DOCTYPE html>
<html>
<head>
<title>header2</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/header-larger1.css">
</head>
<body>
<!--<div id="header">-->
<nav>
<ul class="nav1" id="header">
<li>HOME</li>
<li>ABOUT</li>
<li>INFO</li>
<li>DISCOUNTS</li>
<li>BUSINESS</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
<!--</div>-->
<div class="container row2">
<h3>this is row2</h3>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/head1.js"></script>
</html>
js
function fun1()
{
var documentElem=$(document),
lastScrollTop=0;
scrollabc=80;
documentElem.on('scroll',function()
{
var currentScrollTop=$(this).scrollTop();
console.log(window.pageYOffset);
if(currentScrollTop > scrollabc)
{
if(currentScrollTop>lastScrollTop)
{
//nav.addClass('hidden');
document.getElementById("header").style.marginTop = "-80px";
console.log("first if block");
}
else
{
// nav.removeClass('hidden');
document.getElementById("header").style.marginTop = "0px";
console.log("2nd if block");
}
}
lastScrollTop=currentScrollTop;
})
}
fun1();
I found a similar and simpler implementation of #Dom Day written about by Saijo George.
NOTE: I renamed Saijo's variables so it would be easier for me to read.
CSS
/* This class will be attached to your nav by the below */
.scrollUp {
transform: translateY(-100%);
}
jQuery
const navbar = document.querySelector("nav"); //Select your nav element here
let previousScroll = 0;
$(window).scroll(function handleNav() {
let currentScroll = $(window).scrollTop(); //Distance scrolled down the page
let navHeight = $(navbar).height(); //Height of navbar
//When scrolling down AND you've scrolled past navHeight * 2.25, add .scrollUp
if (currentScroll > previousScroll && currentScroll > navHeight * 2.25) {
$(navbar).addClass("scrollUp");
//When scrolling up AND you've scrolled less than navHeight, remove .scrollUp
} else if (previousScroll > currentScroll && !(currentScroll <= navHeight)) {
$(navbar).removeClass("scrollUp");
}
previousScroll = currentScroll;
});