1

I'm looking to update the below section if possible.

I need to have a div 250px high but lets you scroll through all of the content. Once you have scrolled to the bottom of the 250px window, it automatically expands to show the full content.

Also there would be a button below which if clicked expanded the section if you don't scroll down.

Does anyone know if this is possible?

I can only get it to expand when you click on the window at present.

https://codepen.io/sharpy24ws/pen/QWWrOoz

div {
width: 100%;
height: 250px;
background: #ccc;
overflow-y: auto;
}

#container{
margin:0px auto;
border:1px solid red;
}

#container div{
position:relative;
float:left;
margin-right:5px;
}
#container div span{
position:absolute;
bottom:0;
right:0;
}

$(window).load(function(){
$("div").css("overflow", "hidden");
$('div').click(function() {
$(this).animate({
height: '100vh'
})
})
});
help-info.de
  • 6,695
  • 16
  • 39
  • 41
Richard
  • 35
  • 1
  • 8

3 Answers3

0

Here is what you can do, to show full content on click of button: 

  $(window).load(function(){
      // container will be your div which you want to expand on click of button.
      $("#container").css("overflow", "hidden");
      $("#container").css("height", "250px");

    // expand-button will be button which will let you expand container on click.
    $('#expand-button').click(function() {
      $("#container").css("height", "auto")
    })
});

And for scroll end you can do this:

  • Here I've used document as an scrolling container, you can use your own if scroll isn't whole page scroll.
window.onscroll = function() {
  var d = document.documentElement;
  var offset = d.scrollTop + window.innerHeight;
  var height = d.offsetHeight;

  console.log('offset = ' + offset);
  console.log('height = ' + height);

  if (offset === height) {
    console.log('At the bottom');
  }
};

I Hope this will help you.

TutorialSpot
  • 89
  • 2
0

Thank you for taking the time to reply.

Unfortunately i'm a bit of a novice with JS, so i'm not sure how to implement it properly.

What would I need the button or link format to be to expand the area?

https://codepen.io/sharpy24ws/pen/YzzLYra

  $(window).load(function(){
  // container will be your div which you want to expand on click of button.
  $("#container").css("overflow", "hidden");
  $("#container").css("height", "250px");

// expand-button will be button which will let you expand container on click.
$('#expand-button').click(function() {
  $("#container").css("height", "auto")
})
});

Would it be something like the?

Click me

Kind Regards.

Richard
  • 35
  • 1
  • 8
0

Copy and paste this and run once.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Scroll Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
    .is_box{
      height:250px;
      text-align:center;
      overflow:auto;
    }
    </style>
</head>
<body>
  <div class="is_box" id="box">
    <h3>Lorem Ipsuum Dummy Text & COntent1</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent2</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent3</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent4</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent5</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent6</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent7</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent8</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent9</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent10</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent11</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent12</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent13</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent14</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent15</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent16</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent17</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent18</h3>
    <h3>Lorem Ipsuum Dummy Text & COntent19</h3>
  </div>

  <div>
    <button id="expand">CLick me</button>
  </div>
  <div>
    <h3>Other COntent</h3>
    <h3>Other COntent</h3>
    <h3>Other COntent</h3>

  </div>
</body>

<script>
  $(function($) {
    $('#box').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
          $(this).css('height','max-content');
        }
    })

    $('#expand').on('click',function(e){
      e.preventDefault();
      $('#box').css('height','max-content');
    });
});
</script>
</html>

I hope it will help you

Khalid Khan
  • 3,017
  • 1
  • 11
  • 27