Add up/down button on jQuery scroll plugin

Add up/down button on jQuery scroll plugin - javascript

HTML:
<div id="scrooly" class="span7">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam et orci dictum sagittis. In hac habitasse platea dictumst. Morbi sed dictum nibh. Nullam felis est, feugiat a ullamcorper sed, iaculis ut ligula. Aliquam erat volutpat. Nam in sapien magna, in feugiat velit. Quisque tellus est, ultricies a euismod sed, consectetur et libero. Quisque ac libero in elit suscipit semper. Cras eget metus quis turpis ultrices aliquam sed at enim. Integer ullamcorper odio consequat nunc egestas tempus. Cras eget orci elit, ac eleifend nunc. Phasellus tincidunt nibh arcu. Donec laoreet ornare nisl, sit amet rutrum sem mollis sed.
</p>
<img src="assets/img/photo01.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam et orci dictum sagittis. In hac habitasse platea dictumst. Morbi sed dictum nibh. Nullam felis est, feugiat a ullamcorper sed, iaculis ut ligula. Aliquam erat volutpat. Nam in sapien magna, in feugiat velit. Quisque tellus est, ultricies a euismod sed, consectetur et libero. Quisque ac libero in elit suscipit semper. Cras eget metus quis turpis ultrices aliquam sed at enim. Integer ullamcorper odio consequat nunc egestas tempus. Cras eget orci elit, ac eleifend nunc. Phasellus tincidunt nibh arcu. Donec laoreet ornare nisl, sit amet rutrum sem mollis sed.
</p>
</div>
And my all structure:
http://jsfiddle.net/2FcZN/
It's working good but I want, UP and DOWN button on my scrollbar. How can I do this?

You can use the following:
Create 2 buttons:
<button id='upClick'>Go Up</button>
<button id='downClick'>Go Down</button>
jQuery:
var scrolled = 0;
$("#downClick").on("click", function() {
scrolled = scrolled + $("#scrooly").scrollHeight; //Edit <<
$("#scrooly").animate({
scrollTop: scrolled
});
});
$("#upClick").on("click", function() {
scrolled = scrolled - $("#scrooly").scrollHeight; //Edit <<
$("#scrooly").animate({
scrollTop: scrolled
});
});
Updated fiddle: http://jsfiddle.net/2FcZN/3/
I hope this helps!

try setting the bottom with a value set to 24px, as the height of the footer

Related

Multiple Readmore Buttons are not working?

I just can't seem to figure out how to make this work. I have tried to look and try several solutions from threads of other people but they just have a totally different code. I tried changing the id's into classes and I tried adding numbers like for example "dots2" - > "dots3" but that wouldn't work either.
As you can see, all the buttons link to the first button when I press 'Read more' or 'Read less'. Only the first text opens.
I know the basics of HTML and CSS but I'm not good with JSS at all so it doesn't make sense right now. Help is very much appreciated.
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
#more {display: none;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

Following should work fine with multiple buttons.
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
var buttons = document.getElementsByClassName("buttonTxt");
for(var i= 0; i< buttons.length; i++) {
buttons[i].addEventListener("click", myFunction)
}
function myFunction(evt) {
var btnText = evt.target;
var dots = btnText.parentNode.getElementsByClassName("dots")[0];
var moreText = btnText.parentNode.getElementsByClassName("more")[0];
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}

The attribute id must be unique in a document, use class instead.
Please notice the changes in the function to match the right element with the index of the currently clicked button.
Try the following way:
var allButtons = document.querySelectorAll('.myBtn');
allButtons.forEach(function(btn){
btn.addEventListener('click', myFunction);
});
function myFunction() {
var allBtns = document.querySelectorAll(".myBtn");
var allDots = document.querySelectorAll(".dots");
var allMore = document.querySelectorAll(".more");
var btnText = allBtns[[...allBtns].indexOf(this)];
var dots = allDots[[...allBtns].indexOf(this)];
var moreText = allMore[[...allBtns].indexOf(this)];
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
.more {display: none;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="myBtn">Read more</button>

You have to use just 1 id per tag and also the #dots display like block.
So this solution works. You have to work on ids when click. Use maybe the function in script tags in your html. Or import it correctly
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
console.log('ok');
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
#more {display: none;}
#dots{display:block;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn1">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn2">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn3">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn4">Read more</button>
<script>
</script>

Auto change the height of arrow according to content height (Liquid slider)

From the screenshots, you can see the arrows are not auto adjust according to the content height when I press to next slide.
I want the dynamic height for arrow, to be displayed in the middle of the content.
I refer the code from Liquid Slider, you can check here or see my issue below. Hoping that some of you could provide me with some advice. Thanks!
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
width: 25px;
height: 25px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
margin-top: 40% !important;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>

By overiding the arows css , setting the margin-top to 0 and top to 50% as follow :
[class$="-arrow"] {
....
top:50%;
margin-top:0 !important;
...
}
See below snippet :
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
width: 25px;
height: 25px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
top:50%;
margin-top:0 !important;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>

Hope this is helpful to you. Here i removed margin from top and added position to slider arrows.
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
width: 25px;
height: 25px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
margin-top: 0;
position:relative;
top: 50%;
}
.liquid-slider-wrapper .liquid-nav-left-arrow, .liquid-slider-wrapper .liquid-nav-right-arrow {
margin-top: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>

Bootstrap Affix triggered once past certain div

I'm trying to get the bootstrap affix top offset to work without using the number of pxiels, but by triggering it after it goes past a certain div. I've got the affix to stop being triggered once it gets to the bottom, but I'm having an issue getting it started in the correct place.
Below is my code and here is a JSFiddle. I would like the sidebar to not be triggered until the user goes past the div #content-header and then the sidebar sits on the top right side of the page. However the sidebar currently just sits at the top.
$('#sidebar-wrapper').affix({
offset: {
top: function() {
return $('#content-header').height(true)
},
bottom: function() {
return (this.bottom = $('#footer-wrapper').outerHeight(true))
}
}
})
#sidebar-wrapper {
max-width: 395px;
}
#sidebar-wrapper.affix {
top: 30px;
}
#content-header {
height: 300px;
background: red;
}
#footer-wrapper {
height: 500px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div id="content-header"></div>
<div class="row">
<div id="content-wrapper" class="col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
</div>
<div class="col-md-3">
<div id="sidebar-wrapper">
<p>
In neque tortor, hendrerit nec porta ac, auctor in ex. Mauris elementum, risus vel facilisis fringilla, felis dui sodales velit, vitae hendrerit nulla odio eget arcu. Suspendisse id enim felis. In hac habitasse platea dictumst. Suspendisse mollis, quam
in dapibus sagittis, mi urna sodales tortor, eu egestas nisi ligula et est. Integer eget lorem nec diam vehicula malesuada. Donec tempor viverra eros eu eleifend. Suspendisse nec risus ac augue iaculis porttitor vel sed justo. Sed et ligula
aliquam, consequat mi vitae, rutrum turpis. Donec id arcu dolor. Nam vulputate, est in tincidunt laoreet, urna urna aliquet arcu, eleifend ultrices purus purus nec libero.
</p>
</div>
</div>
</div>
</div>
<div id="footer-wrapper"></div>
Updated:
Removed true from .height(true) so it now triggers after #content-header. However it only works the first time and once you reach the bottom of the page the sidebar seems to jump back up to the top.
Updated JSFiddle here.

If I understand you correctly, remove the true param from the method height. .hight(true) returns the jQuery element itself but not the height.
$('#sidebar-wrapper').affix({
offset: {
top: function() {
var a = $('#content-header').height();
return a;
},
bottom: function() {
var a = $('#footer-wrapper').outerHeight(true);
//console.log(a);
return a;
}
}
})
#sidebar-wrapper {
max-width: 395px;
}
#sidebar-wrapper {
padding-top: 30px;
}
#sidebar-wrapper.affix {
top: 0;
}
#content-header {
height: 300px;
background: red;
}
#footer-wrapper {
height: 500px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div id="content-header"></div>
<div class="row">
<div id="content-wrapper" class="col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
</div>
<div class="col-md-3">
<div id="sidebar-wrapper">
<p>
In neque tortor, hendrerit nec porta ac, auctor in ex. Mauris elementum, risus vel facilisis fringilla, felis dui sodales velit, vitae hendrerit nulla odio eget arcu. Suspendisse id enim felis. In hac habitasse platea dictumst. Suspendisse mollis, quam
in dapibus sagittis, mi urna sodales tortor, eu egestas nisi ligula et est. Integer eget lorem nec diam vehicula malesuada. Donec tempor viverra eros eu eleifend. Suspendisse nec risus ac augue iaculis porttitor vel sed justo. Sed et ligula
aliquam, consequat mi vitae, rutrum turpis. Donec id arcu dolor. Nam vulputate, est in tincidunt laoreet, urna urna aliquet arcu, eleifend ultrices purus purus nec libero.
</p>
</div>
</div>
</div>
</div>
<div id="footer-wrapper"></div>

Enable checkbox when the user has scrolled to the bottom of a T&C page?

my html sample div class :
<div id="terms">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
</div>
<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>
my css :
#terms {width: 780px;height: 150px;overflow-y: scroll;border:2px solid #ccc;}
Can someone tell me the JS or JQuery for enabling the checkbox when the user has scrolled to the bottom of the T&C page ? I have tried other answers too but none of them worked. The checkbox remains disabled whatever I do.

use below script,
<script>
$( document ).ready( function() {
$('#terms').scroll(function () {
if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
$('#payment').removeAttr('disabled');
}
});
});
</script>
here is runnable demo : https://jsbin.com/cajusebera/edit?html,js,output

Im not a Jquery Expert but just by googling I created this example. I hope it helps!
jQuery(function($) {
$('#terms').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
$('#payment').removeAttr("disabled")
}
})
});
#terms {
width: 780px;
height: 150px;
overflow-y: scroll;
border: 2px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="terms">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
</div>
<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>

view hidden div text on hover

I have a div like this:
<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.
</div>
As you can see, my div has a fixed width and the rest of the content is hidden. I would like to show all the content of my div when I hover the cursor on it (In like a bubble or something). Is this possible with plain HTML, or do I have no other choice but to use JavaScript to do this?

Yes, it's possible, if you use hover. You have to move your inline style into a class. See here for an example:
http://jsfiddle.net/buC6t/
.exdiv {
width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.exdiv:hover {
overflow:visible;
}
<div class="exdiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.
</div>

As a very basic non-CSS non-JavaScript approach you can use tooltip:
<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt. ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.
</div>
Waving mouse over this div will display text in the tooltip. You can also keep initally title blank and populate it in JavaScript with something like
myDivObj.title = myDivObj.innerHTML;

If you want to have bubble, with no js would be duplicated content, but possible:
http://jsfiddle.net/7e4hC/
<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" class="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.</span></div>
.test span {
display: none;
}
.test:hover span {
display: block;
width: 500px;
background-color: #ddd;
overflow: visible;
white-space: normal;
}
or even cleaner:
<div style="width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" class="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis pulvinar dui. Nulla ut metus molestie, dignissim metus et, tincidunt tellus. Fusce porttitor erat ut vestibulum fermentum. Mauris odio nisl, mattis sit amet fermentum sed, consequat non dui. Nullam porta posuere augue eu luctus. Phasellus vulputate, nisl et sagittis consequat, massa nunc pharetra massa, vitae rhoncus elit nisl non mauris. Phasellus sollicitudin venenatis dapibus. Aliquam molestie magna et adipiscing hendrerit. In tempus nulla ut tellus dictum laoreet. Phasellus non nulla tortor. Suspendisse sit amet diam sed velit dignissim tincidunt.</div>
.test:hover {
display: block;
background-color: #ddd;
overflow: visible;
white-space: normal !important;
}

We Keep Coding

JavaScript is the programming language of the Web.