I'm confused as to how to make an element be visible when scrolled by the user, here is my code:
var benefitpub = document.getElementById('pubbox');
var advbox2 = document.getElementById('advbox');
if (document.body.scrollTop > benefitpub.getBoundingClientRect().top + 'px') {
benefitpub.style.visibility = 'visible';
}
if (document.body.scrollTop > advbox2.getBoundingClientRect().top + 'px') {
advbox2.style.visibility = 'visible';
}
#advbox, #pubbox{
margin-top: 500px;
visibility: hidden;
}
<div id="advbox">
Hello This is advbox
</div>
<div id="pubbox">
Hello this is Pubbox
</div>
You will need to change a few things, firstly, you need a onscroll event handler so you can check when the user is scrolling the window.
var benefitpub = document.getElementById('pubbox');
var advbox2 = document.getElementById('advbox');
window.onscroll = function () {
if (document.documentElement.scrollTop > benefitpub.getBoundingClientRect().top) {
benefitpub.style.visibility = 'visible';
} else {
benefitpub.style.visibility = 'hidden';
}
if (document.documentElement.scrollTop > advbox2.getBoundingClientRect().top) {
advbox2.style.visibility = 'visible';
} else {
advbox2.style.visibility = 'hidden';
}
}
#advbox, #pubbox{
margin-top: 500px;
visibility: hidden;
}
<div id="advbox">
Hello This is advbox
</div>
<div id="pubbox">
Hello this is Pubbox
</div>
Also, note that I am getting the scrollTop of the documentElement which is the <html> tag, not the body since that returns 0.
Try this , i have made few changes to your code snipet
onscroll event added
changed benefitpub.style.visibility = 'visible'; to benefitpub.style.visibility = 'inherit';
var benefitpub = document.getElementById('pubbox');
var advbox2 = document.getElementById('advbox');
window.addEventListener('scroll', function(e) {
if (document.body.scrollTop > benefitpub.getBoundingClientRect().top - 200) {
benefitpub.style.visibility = 'inherit';
}
if (document.body.scrollTop > advbox2.getBoundingClientRect().top - 200) {
advbox2.style.visibility = 'inherit';
}
});
#advbox, #pubbox,#pubbox1{
margin-top: 500px;
visibility: hidden;
}
<div id="advbox">
Hello This is advbox
</div>
<div id="pubbox">
Hello this is Pubbox
</div>
<div id="pubbox1">
Hello this is Pubbox
</div>
Related
I want to trigger a function or loop when onwheel scroll up or scroll down.
Please see my snippet.
let demo = document.querySelector('#demo');
let c = 0;
window.onwheel = function() {
c ++;
demo.innerHTML = c;
}
body{
height: 300vh;
}
h1{
position: fixed;
text-align: center;
width: 100vw;
}
<h1 id="demo" > Hello World </h1>
I need when it will scroll up the number should be increment and
when scroll down number should be decrements. but it's just increment the number, I need js clear solution. Thanks.
You can use wheel event listener and get the direction with event.deltaY :
let demo = document.querySelector('#demo');
let c = 0;
window.addEventListener('wheel', function(event) {
if (event.deltaY < 0) {
console.log('scrolling up');
if (c == 0) { // no negative values
demo.innerHTML = 0;
} else {;
c--;
demo.innerHTML = c;
}
} else if (event.deltaY > 0) {
console.log('scrolling down');
//if (c != 0) {
c++;
demo.innerHTML = c;
// }
}
});
body {
height: 300vh;
}
h1 {
position: fixed;
text-align: center;
width: 100vw;
}
<h1 id="demo"> Hello World </h1>
window.onwheel = function(event) {
if (event.deltaY > 0) {
// down
} else {
// up
}
}
You could also just remember window.pageYOffset and check if you actually scrolled down (must be greater than remembered value)
let demo = document.querySelector('#demo');
let c = 0;
let last_scroll= window.pageYOffset;
window.onwheel = function() {
if(window.pageYOffset >= last_scroll && last_scroll != 0){
c ++;
demo.innerHTML = c;
}
last_scroll = window.pageYOffset;
}
body{
height: 300vh;
}
h1{
position: fixed;
text-align: center;
width: 100vw;
}
<h1 id="demo" > Hello World </h1>
var demoHeight = demo.offsetHeight;
demo.onscroll = function(){}
I have created a simple slider that on scroll scrolls down 100vh. It works perfectly in Safari but it doesn't seem to fire at all in both Chrome or Firefox.
Really appreciate it if anyone could point out to me where i may have gone wrong. I'm sure it's something simple but I just can't figure it out.
I have uploaded the files to my test web server so you can see the issue.
test.liamcrane.co.uk
var slider = document.querySelector('.section__wrapper__inner');
var sections = document.querySelectorAll('.section');
var currentTransform = 0;
var activeSection = 0;
function slideDown() {
if (!(activeSection === sections.length - 1)) {
sectionReset();
currentTransform -= 100;
slider.style.transform = "translate3d(0," + currentTransform + "vh, 0)";
activeSection++;
sections[activeSection].classList.add('active');
}
setTimeout(function() {
ready = true;
}, 2000);
}
function slideUp() {
if (!(activeSection === 0)) {
sectionReset();
currentTransform += 100;
slider.style.transform = "translate3d(0," + currentTransform + "vh, 0)";
activeSection--;
sections[activeSection].classList.add('active');
}
setTimeout(function() {
ready = true;
}, 2000);
}
function sectionReset() {
sections[activeSection].classList.remove('active');
}
var ready = true;
document.addEventListener('scroll', function() {
if (ready && window.pageYOffset > 0) {
ready = false;
slideDown();
} else if (ready && window.pageYOffset <= 0) {
ready = false;
slideUp();
}
});
.section__wrapper {
height: 100vh;
overflow: hidden;
}
.section__wrapper__inner {
height: 100%;
transform: translate3d(0, 0, 0);
transition: transform 1s;
}
.section {
position: relative;
height: 100vh;
color: black;
text-align: center;
}
.section span {
line-height: 100vh;
display:block;
}
<div class="section__wrapper">
<div class="section__wrapper__inner">
<section class="section"><span>1</span></section>
<section class="section"><span>2</span></section>
<section class="section"><span>3</span></section>
<section class="section"><span>4</span></section>
<section class="section"><span>5</span></section>
</div>
</div>
I think is that what you want
I have made a little workarround to force scroll ... maybe a little bit ugly but work see fakeScroll() function bellow.
That force the scrollbar to does not reach the beggining and the end. Because in your example above if the scroll bar reach the end ... scroll event can't be triggered (same if reach the begining).
I have also changed the conditions and the timming from setTimeout (ready = true) to 500. You can change it as you want
Sory for my English.
var slider = document.querySelector('.section__wrapper__inner');
var sections = document.querySelectorAll('.section');
var currentTransform = 0;
var activeSection = 0;
var lastOffset = window.pageYOffset;
var actualOffset = lastOffset;
function fakeScroll(){
if(lastOffset > 1){
window.scrollTo(0,lastOffset - 1);
}else{
window.scrollTo(0,1);
}
}
function slideDown() {
if (!(activeSection === sections.length - 1)) {
sectionReset();
currentTransform -= 100;
slider.style.transform = "translate3d(0," + currentTransform + "vh, 0)";
activeSection++;
sections[activeSection].classList.add('active');
}
fakeScroll();
setTimeout(function() {
ready = true;
}, 500);
}
function slideUp() {
if (!(activeSection === 0)) {
sectionReset();
currentTransform += 100;
slider.style.transform = "translate3d(0," + currentTransform + "vh, 0)";
activeSection--;
sections[activeSection].classList.add('active');
}
fakeScroll();
setTimeout(function() {
ready = true;
}, 500);
}
function sectionReset() {
sections[activeSection].classList.remove('active');
}
var ready = true;
window.addEventListener('scroll', function() {
actualOffset = window.pageYOffset;
if (actualOffset > lastOffset) {
if(ready){
ready = false;
slideDown();
}else{
fakeScroll();
}
} else if (window.pageYOffset <= lastOffset) {
if(ready){
ready = false;
slideUp();
}else{
fakeScroll();
}
}
lastOffset = window.pageYOffset;
});
.section__wrapper {
height: 100vh;
position:relative;
overflow: hidden;
}
.section__wrapper__inner {
height: 100%;
position:relative;
transform: translate3d(0, 0, 0);
transition: transform 1s;
}
.section {
position: relative;
height: 100vh;
color: black;
text-align: center;
}
.section span {
line-height: 100vh;
display:block;
}
<div class="section__wrapper">
<div class="section__wrapper__inner">
<section class="section"><span>1</span></section>
<section class="section"><span>2</span></section>
<section class="section"><span>3</span></section>
<section class="section"><span>4</span></section>
<section class="section"><span>5</span></section>
</div>
</div>
window.addEventListener('scroll', function() {
if (ready && window.pageYOffset > 0) {
ready = false;
slideDown();
} else if (ready && window.pageYOffset <= 0) {
ready = false;
slideUp();
}
});
I've some trouble with my script, I'm trying to figure out how I can make a mask/filter over the website when the menu is opened. In the HTML is a class called cmask and there is also a class called cmask is-active
It only has to do this when the screen is smaller than 900px. I've been trying to use cmask.addClass("is-active") and removeclass but its not working like that and it keeps crashing(makes the other part of the script not working anymore). Does someone knows what im doing wrong?
//scrolling----------------
//scrolling----------------
//scrolling----------------
var nav = $("#nav_id");
var nav_overflow = $("#nav_overflow");
var page_end_logo_nav = $("#page_end_logo_nav").visible();
var logo_container = $("#logo_container");
var nav_ani_speed = 200 //in ms
var nav_state = 0 // 0 is nav 1 is hamburger visable
var hamburger = $("#hamburgermenu") //hamburger elemnt
var distanceY;
var shrinkOn;
var winkel_mand = $("#winkel_mand")
//set scroll for desktop nav
function nav_desktop_check() {
distanceY = window.pageYOffset || document.documentElement.scrollTop;
shrinkOn = 100;
//run the header script
if (distanceY > shrinkOn) {
if (nav_state === 0) {
nav_hamburger();
}
} else {
if (nav_state === 1 ){
if ($(window).width() >= 900){
nav_normal_desktop();
}
}
}
}
//tablet nav check
function tablet_nav_check() {
if (nav_state === 0){
if ($(window).width() <= 900){
nav_hamburger();
}
}
}
tablet_nav_check()
//hambutton onclikc
hamburger.click(function() {
if (nav_state === 1){
if ($(window).width() >= 900){
nav_normal_desktop();
} else {
nav_normal_mobile();
}
logo_animation();
remove_winkel_icon_check()
} else{
nav_hamburger()
}
});
//nav to hamburger
function nav_hamburger() {
hamburger.removeClass("active")
nav_overflow.animate({
width: 0
}, nav_ani_speed, function() {
hamburger.addClass("active")
});
nav_state = 1;
logo_animation();
}
//hamburger to nav
function nav_normal_desktop() {
hamburger.addClass("active");
hamburger.removeClass("active");
nav_overflow.css("width", "auto");
nav_witdh = nav_overflow.innerWidth();
nav_overflow.css("width", 0);
nav_overflow.animate({
width: nav_witdh
}, nav_ani_speed, function() {
hamburger.removeClass("active")
});
nav_state = 0;
}
function nav_normal_mobile() {
nav_overflow.animate({
width: "100%"
}, nav_ani_speed, function() {
hamburger.removeClass("active")
});
nav_state = 0;
}
First I would add semicolons to all statements where it could fit, just to be sure you are not missing a mandatory one.
I've made a small overlay mask example
Javascript
$('#element').on("click",function() {
if($('#overlay').length == 0) {
$(this).wrap('<div id="overlay"><div>');
} else {
$(this).unwrap();
}
});
CSS
#element {
width:200px;
height:200px;
background-color:#f00;
}
#inner {
width:100px;
height:100px;
background-color:#0ff;
}
#overlay
{
background-color:#000;
opacity:0.3;
width:200px;
height:200px;
}
http://jsfiddle.net/5aw0wsy4/
I'm trying to check when a div is reached from scrollbar with jquery.
I read some similar question on stackoverflow, but all are on one div only.
I have 4 div, with height: 100% and I want know when the scroll bar pass every div.
I tried, but only works with the first div.
HTML:
<body>
<div id="main"></div>
<div id="service"></div>
<div id="clients"></div>
<div id="about"></div>
</body>
CSS:
body, html {
height: 100%;
padding: 0px;
margin: 0px;
}
#main {
background: red;
height: 100%;
}
#service {
background: green;
height: 100%;
}
#clients {
background: blue;
height: 100%;
}
#about {
background: yellow;
height: 100%;
}
JS:
$(document).ready(function() {
var passed_service = false;
var passed_service = false;
$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(event){
if($(window).scrollTop() >= ($("#service").height())){
if(!passed_service){
alert("To #service");
passed_service = true;
}
}
if($(window).scrollTop() >= ($("#service").height() + $("#clients").height())){
if(!passed_clients){
alert("To #clients");
passed_clients = true;
}
}
});
});
SORRY TO ALL, WAS A MY STUPID ERROR, I CAN'T DELETE THE QUESTION :(
var passed_service = false;
var passed_service = false; /* should be 'passed_clients' */
^ There's your problem
Also, instead of adding up the divs' heights, use the top offset instead.
DEMO
$(window).scrollTop() >= $("#service").offset().top
$(window).scrollTop() >= $("#clients").offset().top
...
You never declare the passed_clients variable.
Change this:
var passed_service = false;
var passed_service = false;
to this:
var passed_service = false;
var passed_clients = false;
Working fiddle: http://jsfiddle.net/XUEfD/8/
Working Demo link
use this: (parseInt($("#service").height()) + parseInt($("#clients").height()))
$(document).ready(function() {
var passed_service = false;
var passed_clients = false;
$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(event){
if($(window).scrollTop() >= ($("#service").height())){
if(!passed_service){
alert("To #service");
passed_service = true;
}
}
//console.log($(window).scrollTop());
if($(window).scrollTop() >= (parseInt($("#service").height()) + parseInt($("#clients").height()))){
if(!passed_clients){
alert("To #clients");
passed_clients = true;
}
}
});
});
http://jsfiddle.net/xNnQ5/
I am trying to use JavaScript (and HTML) to create a collapsible menu (c_menu) for my website. I would like it to be opened when the user clicks on the div menu_open, and to close when the user clicks menu_close. However, when I load the page, all that happens is the menu simply scrolls up, as if I have clicked menu_close, which I haven't. What should I do?
Code:
index.html (Only a snippet)
<style type = "text/css">
#c_menu {
position: absolute;
width: 435px;
height: 250px;
z-index: 2;
left: 6px;
top: 294px;
background-color: #0099CC;
margin: auto;
</style>
<div id="menu_open"><img src="images/open.jpg" width="200" height="88" /></div>
<input type="button" name="menu_close" id="menu_close" value="Close"/>
<div id="c_menu"></div>
<script type = "text/javascript" src = "menu.js"> </script>
menu.js (Full code)
document.getElementById("c_menu").style.height = "0px";
document.getElementById("menu_open").onclick = menu_view(true);
document.getElementById("menu_close").onclick = menu_view(false);
function menu_view(toggle)
{
if(toggle == true)
{
document.getElementById("c_menu").style.height = "0px";
changeheight(5, 250, 0);
}
if(toggle == false)
{
document.getElementById("c_menu").height = "250px";
changeheight(-5, 0, 250);
}
}
function changeheight(incr, maxheight, init)
{
setTimeout(function () {
var total = init;
total += incr;
var h = total + "px";
document.getElementById("c_menu").style.height = h;
if (total != maxheight) {
changeheight(incr, maxheight, total);
}
}, 5)
}
Try this:
document.getElementById("menu_open").onclick = function() {menu_view(true)};
document.getElementById("menu_close").onclick = function() {menu_view(false)};
When you define the function with a parenthesis ( ...onclick = menu_view(true) ), the function is called automatically.
When you have a function with no parameters, you can use it like you did, but without the parenthesis:
document.getElementById("menu_open").onclick = menu_view;
document.getElementById("menu_close").onclick = menu_view;