Saturday, December 7, 2019

HOW TO USE LOAD MORE BUTTON IN JQUERY ??



STEP 1 (WAY 1):-


<!DOCTYPE html>
<html>
<head>
<title>AUTO LOAD CONTENT USING JQUERY</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  body {
    background-color: #f6f6f6;
    width: 400px;
    margin: 20px auto;
    font: normal 13px/100% sans-serif;
    color: #444;
}
div {
    display:none;
    padding: 10px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    margin-bottom: 5px;
    background-color: #f1f1f1;
}
.totop {
    position: fixed;
    bottom: 10px;
    right: 20px;
}
.totop a {
    display: none;
}
a, a:visited {
    color: #33739E;
    text-decoration: none;
    display: block;
    margin: 10px 0;
}
a:hover {
    text-decoration: none;
}
#loadMore {
    padding: 10px;
    text-align: center;
    background-color: #33739E;
    color: #fff;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
}
#loadMore:hover {
    background-color: #fff;
    color: #33739E;
}
</style>
</head>
<body>
<div>Content1</div>
<div>Content2</div>
<div>Content3</div>
<div>Content4</div>
<div>Content5</div>
<div>Content6</div>
<div>Content7</div>
<div>Content8</div>
<div>Content9</div>
<div>Content10</div>
<div>Content11</div>
<div>Content12</div>
<a href="#" id="loadMore">Load More</a>
<p class="totop">
<a href="#top" style="display: none;">Back to top</a>
</p>

<script id="rendered-js">

$(function () {
  $("div").slice(0, 4).show();
  $("#loadMore").on('click', function (e) {
    e.preventDefault();
    $("div:hidden").slice(0, 4).slideDown();
    if ($("div:hidden").length == 0) {
      $("#load").fadeOut('slow');
    }
    $('html,body').animate({
      scrollTop: $(this).offset().top },
    1500);
  });
});

$('a[href=#top]').click(function () {
  $('body,html').animate({
    scrollTop: 0 },
  600);
  return false;
});

$(window).scroll(function () {
  if ($(this).scrollTop() > 50) {
    $('.totop a').fadeIn();
  } else {
    $('.totop a').fadeOut();
  }
});
</script>
</body>
</html>

                                                     STEP 2 (WAY 2):-


load-more-button.css
p {
    margin: 0 0 10px;
    font-family: 'Roboto', sans-serif;
}
p, pre {
    margin: 0 0 1em 0;
}
a, a:link, a:focus, a:active, a:visited {
    outline: 0;
}
a, a:link, a:focus, a:active, a:visited {
    outline: 0;
}
img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.interior.container .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.blogBox {
    margin-bottom: 30px;
    box-sizing: border-box;
}
.blogBox .item {
    background: #f4f4f4;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    max-height: 425px;
}
.blogBox .item:hover {
    background: #e8e8e8;
    cursor: pointer;
}
.blogBox .item img {
    width: 100%;
}
.blogBox .item p {
    padding-bottom: 40px;
}
.blogBox .item .blogTxt {
    padding: 25px;
}
.blogBox .item h2 {
    margin: 15px 0;
    font-family: 'Roboto', sans-serif;
}
.blogBox .item .blogCategory a {
    padding: 5px 10px 2px;
    border: 1px solid #616161;
    color: #616161;
    text-transform: uppercase;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}
.blogBox .item .blogCategory a:hover {
    background: #616161;
    color: #fff;
    text-decoration: none;
}

#loadMore {
    padding-bottom: 30px;
    padding-top: 30px;
    text-align: center;
    width: 100%;
}
#loadMore a {
    background: #042a63;
    border-radius: 3px;
    color: white;
    display: inline-block;
    padding: 10px 30px;
    transition: all 0.25s ease-out;
    -webkit-font-smoothing: antialiased;
}
#loadMore a:hover {
    background-color: #021737;
}

@media screen and (min-width: 1200px) {
.blogBox .featured h2 {
font-size: 42px;
}
}
@media screen and (min-width: 991px) {
.blogBox .featured h2 {
font-size: 30px;
font-style: italic;
}
.blogBox .featured .blogTxt {
max-width: 50%;
width: 100%;
padding: 50px;
float: left;
background: inherit;
min-height: 378px;
}
.blogBox .featured img {
max-width: 50%;
width: 100%;
float: left;
min-height: 378px;
}
}
@media screen and (min-width: 768px) {
.blogBox .item img {
height: 152px;
}
}

load.html

<!DOCTYPE html>
<html>
<head>
<title>AUTO LOAD CONTENT USING JQUERY SECOND</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="load-more-button.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="interior container clearfix">
   <div class="row"> 
      <div class="col-xs-12 col-sm-6 col-md-12 blogBox">
         <div class="item featured">
            <img src="3.jpg">
            <div class="blogTxt">
               <div class="blogCategory">
                  <a href="/">Business Intelligence</a>
               </div>
               <h2>
                  Eu qui dolore altera, saepe molestie accusamus
               </h2>
               <p class="post_intro hidden-xs">
                  An erant partem albucius quo, ad graece latine atomorum sea, sit dicant laoreet at. Id has chor...
               </p>
            </div>
         </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 blogBox moreBox" >
         <div class="item">
            <img src="5.jpg">
            <div class="blogTxt">
               <div class="blogCategory">
                  <a href="/">Virtual Reality</a>
               </div>
               <h2>
                  Ea delicata deterru isset concluda turque
               </h2>
               <p class="post_intro hidden-xs">
                  Mel ut enim atqui, ne eum tation populo delectus. Vim soluta insolens phaedrum et, lucilius par...
               </p>
            </div>
         </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 blogBox moreBox" >
         <div class="item">
            <img src="6.jpg">
            <div class="blogTxt">
               <div class="blogCategory">
                  <a href="/">Internet of Things (IoT)</a>
               </div>
               <h2>
                  No vim quis quodsi, etiam quaestio euripidis
               </h2>
               <p class="post_intro hidden-xs">
                  Sed possim nonumes no, iuvaret similique quo no. Ut sea idque option aliquando. Ei mea choro ap...
               </p>
            </div>
         </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 blogBox moreBox" >
         <div class="item">
            <img src="9.jpg">
            <div class="blogTxt">
               <div class="blogCategory">
                  <a href="/">Artifical Intelligence</a>
               </div>
               <h2>
                  Qui an alii magna consectetuer
               </h2>
               <p class="post_intro hidden-xs">
                  Ad populo appareat vulputate vix, ex fastidii signiferumque pro. In sea doming reprehendunt. Na...
               </p>
            </div>
         </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 blogBox moreBox" style="display: none;">
         <div class="item">
            <img src="7.jpg">
            <div class="blogTxt">
               <div class="blogCategory">
                  <a href="/">Big Data</a>
               </div>
               <h2>
                  Integre voluptatum cu quo iriure docendi senserit
               </h2>
               <p class="post_intro hidden-xs">
                  Delicata inciderint at per, eu partem principes eum, illud nobis appetere ex his. Ei vix melior...
               </p>
            </div>
         </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 blogBox moreBox" style="display: none;">
         <div class="item">
            <img src="8.jpg">
            <div class="blogTxt">
               <div class="blogCategory">
                  <a href="/">Growth Hacking</a>
               </div>
               <h2>
                  Pro brute causae aliquip ad
               </h2>
               <p class="post_intro hidden-xs">
                  No ipsum invidunt eos, ei ius dicit platonem perpetua. Mea te feugait ocurreret aliquando, ei i...
               </p>
            </div>
         </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 blogBox moreBox" style="display: none;">
         <div class="item">
            <img src="2.jpg">
            <div class="blogTxt">
               <div class="blogCategory">
                  <a href="/">Content Marketing</a>
               </div>
               <h2>
                  Lorem ipsum dolor sit amet, consect adipiscing elit
               </h2>
               <p class="post_intro hidden-xs">
                  Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ...
               </p>
            </div>
         </div>
      </div>
      <div id="loadMore" style="">
         <a href="#">Load More</a>
      </div>
   </div>
</div>
<script>
$( document ).ready(function () {
$(".moreBox").slice(0, 3).show();
if ($(".blogBox:hidden").length != 0) {
$("#loadMore").show();
}
$("#loadMore").on('click', function (e) {
e.preventDefault();
$(".moreBox:hidden").slice(0, 6).slideDown();
if ($(".moreBox:hidden").length == 0) {
$("#loadMore").fadeOut('slow');
}
});
});
</script>
</body>
</html>

No comments:

Post a Comment

If you have any problem please let me know.