Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript JavaScript help

A

anuraa

Legendary Coder
Hi: I want the overlay window to appear only when the user scroll up. Now, the overlay window appear when user scroll down as well as up. Thanks for your helps Regards Anura

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="collapsible.css">
<style>
    html,
    body {
    margin: 0;
        }
    .sidenav {
        height: 72%;
        width: 0;
        position: fixed;
        top: 0;
        right:0;
        scroll-margin-right: 0;
        background-color: #6a6c6d;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top:50px;
        }
    .sidenav a {
        padding: 8px 8px 10px 15px;
        text-decoration: none;
        font-size: 16px;
        color: black ;
        display: block;
        transition: 0.3s;
        }
    .sidenav a:hover {
        color: #f1f1f1;
        }
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 50px;
        }
    #container{
        display: flex;
        padding: 0px 0px 0px 0px;
        }
    @media screen and (max-height: 450px) {
        .sidenav {padding-top: 0px;}
        .sidenav a {font-size: 60px;}
        }
    .mtext {
        color: black;
        float: right; 
        margin: .00rem 0.2375rem 0 0;
        font-family: "Merriweather Sans", sans-serif; 
        text-transform: uppercase;
       font-size: 24px;}
        
</style>
</head>
<body>

<div class="sidenav" id="sidenav">
    <a href="javascript:void(0)"  id="closebtn" class="closebtn" onclick="closeNav()"> &times;</a>
    <a href="xx.html">  Mission</a>
    <a href="#">Services</a>
</div>

<div  id="menu">
    <span class="mtext" style="font-size:30px;cursor:pointer" onclick="openNav()">
        &#9776;Menu</span>
</div>

<button class="collapsible">Learning javascript 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Learning javascript 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Learning javascript 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Learning javascript 4</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.</p><br>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Learning javascript 5</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Learning javascript 6</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
  var sidenav = document.getElementById("sidenav");
    
  menu.onclick = function(event){
  openNav();
  event.stopPropagation();
  }

  function openNav() {
    document.getElementById("sidenav").style.width = "30%";
  }
  function closeNav() {
    document.getElementById("sidenav").style.width = "0";
  }
  window.onclick = function(event) {
    if ( sidenav.style.width != 0 && event.target != sidenav )  {
    closeNav();
    }
  }
</script>
<script>
    var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>
<script>
  // Need only to appear the overlay window, only when user scroll up
  window.onscroll = function() {scrollFunction()};
 
  function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20)
      openNav()
  }
</script>
</body>
</html>
 
Sort by date Sort by votes
Hi.

You can use the wheel properties.
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com

This example is not tested but should give you at least idea how to do it.

JavaScript: 
window.addEventListener('wheel', function(event) {
  if (event.deltaY > 0) {
    console.log('You scrolled down');
  } else if (event.deltaY < 0) {
    console.log('You scrolled ip');
  }
});
 
Upvote 0 Downvote
EkBass said:
Hi.

You can use the wheel properties.

This example is not tested but should give you at least idea how to do it.

JavaScript: 
window.addEventListener('wheel', function(event) {
  if (event.deltaY > 0) {
    console.log('You scrolled down');
  } else if (event.deltaY < 0) {
    console.log('You scrolled ip');
  }
});
Click to expand...
Thanks. I replaced the your code to following to see nothing happening.

<script>
// Need only to appear the overlay window, only when user scroll up
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20)
openNav()
}
</script>

I was looking for exactly like above logic to place openNav, closeNav in two areas of "if and else". Unfortunately, it didn't show the two messages as one would expect. regards
 
Upvote 0 Downvote
Well, i tested your code and did some changes. With this code, Nav opens when scrolled up and closes when scrolled down.
You can adjust this example to get the behavior you wanted for your page.


JavaScript: 
  // Need only to appear the overlay window, only when user scroll up
  window.addEventListener('wheel', function(event) {
  if (event.deltaY > 0) {
    console.log('You scrolled down');
    closeNav();
  } else if (event.deltaY < 0) {
    console.log('You scrolled up');
    openNav();
  }
});
 
Upvote 0 Downvote
EkBass said:
Well, i tested your code and did some changes. With this code, Nav opens when scrolled up and closes when scrolled down.
You can adjust this example to get the behavior you wanted for your page.


JavaScript: 
  // Need only to appear the overlay window, only when user scroll up
  window.addEventListener('wheel', function(event) {
  if (event.deltaY > 0) {
    console.log('You scrolled down');
    closeNav();
  } else if (event.deltaY < 0) {
    console.log('You scrolled up');
    openNav();
  }
});
Click to expand...
Thank you very much. It worked well. My apologies for not testing with inclusion of closeNav, openNav. Sorry to say it was not working. I expected the "You scrolled down, "You scrolled up". It didn't appear on my screen. You may have got an idea as to why it didn't appear which I like to know. Thanks again. Anura
 
Upvote 0 Downvote
Hi: There is a problem with "window.addEventListener('wheel', function(event)" in my handphone. In the computer, it is fine. But, it didn't work in my Iphone. You may check here. www.sis.anura7.ca navigate to poems from Menu. I included there only as it goes to many pages.

Looking forward to your guidance please. Thanks Regards Anura
 
Upvote 0 Downvote
anuraa said:
Hi: There is a problem with "window.addEventListener('wheel', function(event)" in my handphone. In the computer, it is fine. But, it didn't work in my Iphone. You may check here. www.sis.anura7.ca navigate to poems from Menu. I included there only as it goes to many pages.

Looking forward to your guidance please. Thanks Regards Anura
Click to expand...
I would not expect the wheel event to work on an iPhone 🙂
 
Upvote 0 Downvote
anuraa said:
Yes, from the sound "wheel" and looking at the phone to see a something related to it.

Is there a suggestion for to overcome to work both on phone as well as on the computer. Thanks Regards Anura
Click to expand...
You'll have to use the scroll event instead.
 
Upvote 0 Downvote
cbreemer said:
You'll have to use the scroll event instead.
Click to expand...
Thanks

I copied the following from a Google search.
var lastSrollTop = 0;
window.addEventListener("scroll", function(){
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

It is working now. However, I really appreciate if one of you could explain the following line.

lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

Thanks. Regards Anura
 
Upvote 0 Downvote
anuraa said:
I really appreciate if one of you could explain the following line.

lastScrollTop = st <= 0 ? 0 : st;
Click to expand...
That is a ternary expression. It may look cryptic at first sight but it's just a shorthand for this
JavaScript: 
if ( st <= 0 )
   lastScrollTop = 0;
else
   lastScrollTop = st;
 
Upvote 0 Downvote
Thank you very much.

Could please expand that shorthand code to reflect the normal way and have the full set codes. Hope, that will help me to understand the real flow of checks and branching out. Thanks again. Regards Anura
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom