0

I have been making a project and i have seen some modern websites showing <div> or <ul> after certain amount of pixels are scrolled, instead of seperating them into different index pages.

For that, i have been able to do the first step, wrap every 16 elements into different <ul>, but i couldn't figure out how to hide other <ul> element before <ul> is fully scrolled and then show up other <ul> and continue doing so until final <ul> element (final page) is reached by scrolling.

HTML:

<div class="product_container">
    <ul class="products" style="list-style-type:none">
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
    </ul>
</div>

CSS:

.product_container {
  position: relative;
  top: 420px;
  height: 1000px;
}
.products {
  display: flex;
  display: -ms-flex;
  flex-direction: row;
  -ms-flex-direction: row;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: center;
  -ms-justify-content: center;
  align-items: center;
  -ms-align-items: center;
}
.products li {
  display: inline-block;
  margin-left: 3%;
  margin-bottom: 3%;
}
.product {
  background-color: black;
  border: solid 2px white;
  border-radius: 5px;
  height: 18%;
  width: 15%;
  min-height: 310px;
  min-width: 250px;
}

And Javascript i used to wrap up all 16 elements in every <ul> (pages):

$(document).ready(function() {
    var lis = $(".products li");
    for(var i = 0; i < lis.length; i+=16) {
      lis.slice(i, i+16)
         .wrapAll("<div class='products'></div>");
    }

});

Is it possible to do something relevant to this? I have been researching for long and i have only found out how to show div when only specific amount of height is scrolled, for example: 400px, but how could is there any solution so it display's other ul after every ul is scrolled.

For example:

There are 10 ul elements with 16 li elements inside all of them: ul1, ul2, ul3, ul4, ul5, ul6, ul7, ul8, ul9, ul10.

When user scrolls down to at the end of ul1, ul2 will be displayed, when user scrolls down to at the end of ul2, ul3 will be displayed, and etc.

In short, it's called "Lazy Loading" or "Infinite Scrolling" as well.

What's the best strategy for doing this? Thanks!

ShellRox
  • 2,532
  • 6
  • 42
  • 90
  • I still cannot clearly understand what you're trying to build? Scroll... show.... what? when? huh? Index pages... what? Do you have any link example? – Roko C. Buljan Feb 18 '17 at 10:13
  • @Roko C. Buljan I am trying to make a pages for products, but not with page indexes with links, but with scrolling, so instead of user manually switching to page2, It would automatically switch it when scrolled down at the end of the page1, sorry for making it too bad question. – ShellRox Feb 18 '17 at 10:19
  • 1
    I don't recall to have seen such pages... or I still cannot picture what it looks like.... For example... you scroll to bottom.... a new pages appears... what happens with the old one? It stays above or?.. – Roko C. Buljan Feb 18 '17 at 10:26
  • 1
    Also what I'm not clear is: at what point should the new page appear, and where. Really, do you have any link to show? Just out of curiosity – Roko C. Buljan Feb 18 '17 at 10:29
  • @Roko C. Buljan It should appear at the end of the page1 and page2 will appear, but page1 stays, on Pinterest.com there is following version of this i believe. – ShellRox Feb 18 '17 at 10:33
  • 1
    Ahaa so like: https://www.youtube.com/watch?v=YK2RUC2biAk - like "**Lazy Loading**" (yep... there's a name for that) – Roko C. Buljan Feb 18 '17 at 10:39
  • @RokoC.Buljan Yes, i wasn't able to find that name after 1 hour research. – ShellRox Feb 18 '17 at 10:48

2 Answers2

2

 $(document).ready(function(){

var divHeight = $('.products').height();
alert(divHeight);
 var scroll = $(window).scrollTop();
 alert(scroll);

 if (scroll> divHeight)
 {
  console.log('hieght');
    $('.products').css("visibility", "visible")
 }
 });
.product_container {
  position: relative;
  top: 420px;
  height: 2000px;
}
.products {
  visibility: hidden;
  display: flex;
  display: -ms-flex;
  flex-direction: row;
  -ms-flex-direction: row;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: center;
  -ms-justify-content: center;
  align-items: center;
  -ms-align-items: center;
}
.products li {
  display: inline-block;
  margin-left: 3%;
  margin-bottom: 3%;
}
.product {
  background-color: black;
  border: solid 2px white;
  border-radius: 5px;
  height: 18%;
  width: 15%;
  min-height: 310px;
  min-width: 250px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           
           <style type="text/css">
             
           </style>
           </head>
           <body>
           <div class="product_container">
    <ul class="products" style="">
        <li><div class="product">vggggggggggggg</div></li>
        <li><div class="product">hjjjjjjjjb</div></li>
        <li><div class="product">vhhhhhhhhhhhhhhh,</div></li>
        <li><div class="product">b m   vhg</div></li>
        <li><div class="product">gvvvvvvvvv</div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        
    </ul>
    <ul class="products1" style="">
        <li><div class="product">vggggggggggggg</div></li>
        <li><div class="product">hjjjjjjjjb</div></li>
        <li><div class="product">vhhhhhhhhhhhhhhh,</div></li>
        <li><div class="product">b m   vhg</div></li>
        <li><div class="product">gvvvvvvvvv</div></li>
        <li><div class="product"></div></li>
        <li><div class="product"></div></li>
        
    </ul>
</div>
 <script type="text/javascript">
            

           </script>
           </body>
           </html>

You just give all the elements css rule : visibility:hidden.

Then check whether the full height of the 1st ul has been scrolled or not

Code to do that:

$(document).ready(function(){

$('div').bind('scroll',chk_scroll);
 });


 function chk_scroll(e)
 {
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) 
{
    // here change the visibility property of next ul i.e ul2
}

}

Code courtesy:

Note

Wrap the whole thing inside a loop to perform the function simultaneously

https://stackoverflow.com/questions/1473584/need-to-find-height-of-hidden-div-on-page-set-to-displaynone--this might help you to solve the problem(the page height one)

Hope this helps!

edit how to use loop

 $(document).ready(function(){
          var i = 0;
  var ul_elements = document.getElementsByTagName("ul");

    for (var i = 0, len = ul_elements.length; i < len; i++ ) {

     var divHeight = $(ul_elements[i]).height();
     alert(divHeight);
    var scroll = $(window).scrollTop();
        alert(scroll);

        if (scroll> divHeight)
    {

   $(ul_elements[i+1]).css("visibility", "visible")
   }
    }
    });
Community
  • 1
  • 1
neophyte
  • 6,540
  • 2
  • 28
  • 43
  • You can't get the height of elements with a `display: none` applied to them. – Soviut Feb 18 '17 at 10:03
  • In my case, can i use `visibility: hidden` on `.products` div only? but then the page would be still enlarged... – ShellRox Feb 18 '17 at 10:04
  • I researched about it I think visibility:hidden is the way to go.. modifying my answer – neophyte Feb 18 '17 at 10:07
  • I have tried updated answer for my case, and for some reason elements would still not show up: https://jsfiddle.net/q3L5vwy8/ sorry if i made some wrong mistake, i am not very experienced in Jquery. – ShellRox Feb 18 '17 at 10:15
  • 1
    I checked your fiddle this is happening because your ul height is less than scroll height . – neophyte Feb 18 '17 at 10:40
  • 1
    I have added a different code snippet with a bit different approach see if this helps – neophyte Feb 18 '17 at 10:49
  • @neophyte thanks and sorry for late response, tried it here: https://jsfiddle.net/uuvjvucs/2/embedded/result/ and lazy loading doesn't seem to work, should i put it in some loop? Thanks again. – ShellRox Feb 18 '17 at 11:42
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/136019/discussion-between-neophyte-and-shellrox). – neophyte Feb 18 '17 at 11:55
1

check this code it will show ul on 500px scroll:

 var height=500;

        $(window).scroll(function(){
            var ul= $('#yourId'),
                 scroll = $(window).scrollTop();
            if (scroll >= height)
            {
                height+=500;
                ul.show();
            }
            else {
                ul.hide();
            }
        });
Fateh singh Jagdeo
  • 173
  • 1
  • 10
  • Yes, that code displays new code after 500px height is reached by scrolling, but what i'm trying to do is for example: when every 500px height is reached by scrolling, so 500px, 1000px, 1500px, etc. until end of the product pages. – ShellRox Feb 18 '17 at 10:21
  • Thanks for the answer, but i gave 500px height as example, can you make it so it shows up after end of div? – ShellRox Feb 18 '17 at 12:07