I want to show a progress bar for a pdf-reading module. I want to show the progress as the reader scrolls down the container having PDF files. Now I have applied jquery ofcourse for this but there is some issues emerging and not obtaining the desired result. Issue here is the progress bar does show progress but it works on the whole window scroll only. What I want is to have show the progress on bar when the pdf container is scrolled down in that window. I have made codes for that but somehow its unresponsive for pdf-container. Any suggestions and help will be highly appreciated.
Here is my <div> that is showing the PDF,
<div id="viewer" class="pdf-viewer" oncontextmenu="return false" data-url="../sadmin/studyMaterial/<?php echo $db->idToField("tbl_studymaterials", "file_ppt", $chapterId) ; ?>"></div>
<span><progress id="progressbar" value="0" max="100"></progress></span>
And the jquery that I am using is,
$(".pdf-viewer").scroll(function () {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d-c)) * 100;
var position = scrollPercent;
$("#progressbar").attr('value', position);
});
You are referencing the incorrect DOM node for the scrollTop() values in your script. Since you want to track the scroll position of the PDF container, you should simply reference it's own scrollTop() value, i.e. $(this).scrollTop().
Also, instead of checking the document height, you should check the scrollHeight of the element to get its full content height. The property is native to a DOM node, so you can simply use this.scrollHeight.
Here's the updated code:
$(".pdf-viewer").scroll(function () {
var s = $(this).scrollTop(),
d = this.scrollHeight,
c = $(this).height(),
position = (s / (d-c)) * 100;
$("#progressbar").attr('value', position);
});
And actually, you don't even really need to use jQuery methods to retrieve the dimensions:
Use Element.scrollTop instead of .scrollTop() to retrieve the scroll position
Use Element.clientHeight instead of .height() to retrieve the element's defined height (sans bottom scrollbar, if any)
And you get this:
$(".pdf-viewer").scroll(function() {
var s = this.scrollTop,
d = this.scrollHeight,
c = this.clientHeight,
position = (s / (d - c)) * 100;
$("#progressbar").attr('value', position);
});
jQuery-based solution
A proof-of-concept example with a dummy DOM:
$(function() {
$(".pdf-viewer").scroll(function() {
var s = this.scrollTop,
d = this.scrollHeight,
c = this.clientHeight,
position = (s / (d - c)) * 100;
$("#progressbar").attr('value', position);
});
});
#viewer {
width: 500px;
height: 100px;
overflow-y: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewer" class="pdf-viewer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
</div>
<span><progress id="progressbar" value="0" max="100"></progress></span>
Native JS solution
If you do not want to use jQuery, that is also entirely possible:
var viewer = document.getElementById('viewer');
viewer.addEventListener('scroll', function() {
var s = this.scrollTop,
d = this.scrollHeight,
c = this.clientHeight,
position = (s / (d - c)) * 100;
document.getElementById('progressbar').value = position;
});
#viewer {
width: 500px;
height: 100px;
overflow-y: auto;
}
<div id="viewer" class="pdf-viewer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
<p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero
venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
</div>
<span><progress id="progressbar" value="0" max="100"></progress></span>
Related
I have a navigation bar to scroll down to anchor elements. The navbar is inside the body.
My css :
body {
scroll-behavior: smooth;
}
In the page, I also use some javascript. One is a javascript with the following function to navigate to other page elements :
window.scroll({
top : pos,
left : 0,
behavior : 'smooth'
});
With Chrome, when I call the javascript function, the scroll is smooth. But when I navigate to anchors through navigation bar links, it is not smooth.
Would someone care to explain me why ?
Also with Firefox both scroll from navigation bar & javascript function are smooth. I think it's a bit wierd that one work but not the other.
EDIT : my workaround is as follow (vanilla JS / works with all modern browsers) :
let pos = document.querySelector(element).offsetTop;
if ('scrollBehavior' in document.documentElement.style) { //Checks if browser supports scroll function
window.scroll({
top : pos,
left : 0,
behavior : 'smooth'
});
} else {
smoothScrollTo(0, pos, 500); //polyfill below
}
And the fallback scroll function :
window.smoothScrollTo = function(endX, endY, duration) {
let startX = window.scrollX || window.pageXOffset,
startY = window.scrollY || window.pageYOffset,
distanceX = endX - startX,
distanceY = endY - startY,
startTime = new Date().getTime();
// Easing function
let easeInOutQuart = function(time, from, distance, duration) {
if ((time /= duration / 2) < 1) return distance / 2 * time * time * time * time + from;
return -distance / 2 * ((time -= 2) * time * time * time - 2) + from;
};
let timer = window.setInterval(function() {
let time = new Date().getTime() - startTime,
newX = easeInOutQuart(time, startX, distanceX, duration),
newY = easeInOutQuart(time, startY, distanceY, duration);
if (time >= duration) {
window.clearInterval(timer);
}
window.scrollTo(newX, newY);
}, 1000 / 60); // 60 fps
};
Based on documentation, scroll-behavior: smooth not working on body element (try it):
The scroll-behavior property of the HTML body element is not
propagated to the viewport.
But it works on other selectors like html (try here).
Also you can try pure JavaScript solution (example):
function scrollToTop() {
window.scrollTo({
top: 1000,
behavior: 'smooth'
});
}
This worked for me:
* {
scroll-behavior: smooth;
}
It's been some time, but some people have their JavaScript disabled on browsers, so I don't think that would be the best option. The problem with adding: body {scroll-behavior: smooth;} is that it won't work unless you add it to the html. For example:
On body:
body {
scroll-behavior: smooth;
}
a {
background-color: lightgray;
padding: 10px 20px;
color: black;
right: 10px;
margin-bottom: 10px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>No Scroll Effect On Body</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida varius turpis, ac dignissim purus molestie quis. Aliquam erat volutpat. Aenean ipsum neque, faucibus ut imperdiet nec, aliquam eget purus. Phasellus ultricies porttitor neque, a porttitor tortor pulvinar non. Phasellus in orci porttitor nulla mattis cursus nec ut ex. Vivamus non elit at dolor imperdiet bibendum. Ut leo dolor, aliquet ut magna eu, hendrerit consequat quam. Pellentesque eget odio felis. Integer id posuere mi. Ut quis velit pulvinar, auctor sem nec, consectetur diam. Fusce sed ex eu sem bibendum aliquam ultrices ut ipsum. In hac habitasse platea dictumst. Aenean imperdiet ex eu velit malesuada volutpat. Sed molestie imperdiet condimentum. In suscipit, nulla nec viverra tristique, dui tellus tristique mi, eget laoreet tortor nunc vel nunc. Nam tristique rutrum vulputate.
Donec imperdiet nisl non ligula ultricies condimentum. Suspendisse nisi est, lobortis vitae enim at, porta mollis erat. Sed in orci nunc. Aliquam non dui et urna volutpat dignissim varius sed nulla. Duis fringilla vestibulum ipsum, a fringilla sapien bibendum vel. Pellentesque non viverra magna, sed laoreet orci. Donec elit eros, imperdiet sit amet risus sed, placerat fermentum sem. In porta felis vulputate, suscipit nisi maximus, fringilla tellus. Vivamus nec dui accumsan, suscipit eros nec, sodales sapien. Mauris et viverra lectus. Curabitur massa quam, lacinia aliquam ante eget, auctor sollicitudin turpis. Phasellus imperdiet eros ornare arcu pulvinar, id cursus arcu volutpat. Nam sit amet magna eu magna suscipit posuere id quis nisi.
Quisque a diam sed magna luctus dignissim sit amet et elit. Vivamus fringilla posuere sapien eu posuere. Proin bibendum libero ac eros maximus vehicula. Sed et diam eu lorem gravida pharetra at sed mauris. Cras dictum urna fringilla quam luctus elementum. Maecenas tincidunt arcu dolor, eget venenatis ex ornare eu. Vestibulum tempor tempus finibus. Mauris posuere, enim eu ornare molestie, quam urna iaculis massa, eu lacinia eros odio ac quam. Sed sem nunc, sollicitudin in imperdiet eu, molestie vel libero. Morbi in dui ut enim pharetra dictum egestas tempus velit. Morbi accumsan justo nec faucibus pulvinar. Ut pellentesque auctor purus. Maecenas id sagittis enim, tempor tristique quam.
Proin condimentum posuere scelerisque. Maecenas egestas vehicula vestibulum. Vestibulum pharetra nunc nec orci scelerisque, fermentum pellentesque quam pretium. Nam odio tortor, aliquet nec sem quis, rutrum ornare lectus. Fusce scelerisque ullamcorper lacus vitae hendrerit. Donec tincidunt quis dolor ut sollicitudin. Vestibulum feugiat diam at odio fringilla, id ullamcorper diam scelerisque. Aenean tempor tincidunt turpis id porttitor. Mauris gravida eleifend lorem, pellentesque cursus odio volutpat et. Mauris est nunc, bibendum congue purus vitae, luctus elementum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<br />
<br />
<br />
Go to top
</body>
</html>
As you can see, it is not possible to work if it set on the body. But it will work if it set on the html:
html {
scroll-behavior: smooth;
}
a {
background-color: lightgray;
padding: 10px 20px;
color: black;
right: 10px;
margin-bottom: 10px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>No Scroll Effect On Body</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida varius turpis, ac dignissim purus molestie quis. Aliquam erat volutpat. Aenean ipsum neque, faucibus ut imperdiet nec, aliquam eget purus. Phasellus ultricies porttitor neque, a
porttitor tortor pulvinar non. Phasellus in orci porttitor nulla mattis cursus nec ut ex. Vivamus non elit at dolor imperdiet bibendum. Ut leo dolor, aliquet ut magna eu, hendrerit consequat quam. Pellentesque eget odio felis. Integer id posuere mi.
Ut quis velit pulvinar, auctor sem nec, consectetur diam. Fusce sed ex eu sem bibendum aliquam ultrices ut ipsum. In hac habitasse platea dictumst. Aenean imperdiet ex eu velit malesuada volutpat. Sed molestie imperdiet condimentum. In suscipit, nulla
nec viverra tristique, dui tellus tristique mi, eget laoreet tortor nunc vel nunc. Nam tristique rutrum vulputate. Donec imperdiet nisl non ligula ultricies condimentum. Suspendisse nisi est, lobortis vitae enim at, porta mollis erat. Sed in orci nunc.
Aliquam non dui et urna volutpat dignissim varius sed nulla. Duis fringilla vestibulum ipsum, a fringilla sapien bibendum vel. Pellentesque non viverra magna, sed laoreet orci. Donec elit eros, imperdiet sit amet risus sed, placerat fermentum sem. In
porta felis vulputate, suscipit nisi maximus, fringilla tellus. Vivamus nec dui accumsan, suscipit eros nec, sodales sapien. Mauris et viverra lectus. Curabitur massa quam, lacinia aliquam ante eget, auctor sollicitudin turpis. Phasellus imperdiet eros
ornare arcu pulvinar, id cursus arcu volutpat. Nam sit amet magna eu magna suscipit posuere id quis nisi. Quisque a diam sed magna luctus dignissim sit amet et elit. Vivamus fringilla posuere sapien eu posuere. Proin bibendum libero ac eros maximus
vehicula. Sed et diam eu lorem gravida pharetra at sed mauris. Cras dictum urna fringilla quam luctus elementum. Maecenas tincidunt arcu dolor, eget venenatis ex ornare eu. Vestibulum tempor tempus finibus. Mauris posuere, enim eu ornare molestie, quam
urna iaculis massa, eu lacinia eros odio ac quam. Sed sem nunc, sollicitudin in imperdiet eu, molestie vel libero. Morbi in dui ut enim pharetra dictum egestas tempus velit. Morbi accumsan justo nec faucibus pulvinar. Ut pellentesque auctor purus. Maecenas
id sagittis enim, tempor tristique quam. Proin condimentum posuere scelerisque. Maecenas egestas vehicula vestibulum. Vestibulum pharetra nunc nec orci scelerisque, fermentum pellentesque quam pretium. Nam odio tortor, aliquet nec sem quis, rutrum ornare
lectus. Fusce scelerisque ullamcorper lacus vitae hendrerit. Donec tincidunt quis dolor ut sollicitudin. Vestibulum feugiat diam at odio fringilla, id ullamcorper diam scelerisque. Aenean tempor tincidunt turpis id porttitor. Mauris gravida eleifend
lorem, pellentesque cursus odio volutpat et. Mauris est nunc, bibendum congue purus vitae, luctus elementum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Maecenas gravida varius turpis, ac dignissim purus molestie quis. Aliquam erat volutpat. Aenean ipsum neque, faucibus ut imperdiet nec, aliquam eget purus. Phasellus ultricies porttitor neque, a porttitor tortor pulvinar non. Phasellus in orci
porttitor nulla mattis cursus nec ut ex. Vivamus non elit at dolor imperdiet bibendum. Ut leo dolor, aliquet ut magna eu, hendrerit consequat quam. Pellentesque eget odio felis. Integer id posuere mi. Ut quis velit pulvinar, auctor sem nec, consectetur
diam. Fusce sed ex eu sem bibendum aliquam ultrices ut ipsum. In hac habitasse platea dictumst. Aenean imperdiet ex eu velit malesuada volutpat. Sed molestie imperdiet condimentum. In suscipit, nulla nec viverra tristique, dui tellus tristique mi, eget
laoreet tortor nunc vel nunc. Nam tristique rutrum vulputate. Donec imperdiet nisl non ligula ultricies condimentum. Suspendisse nisi est, lobortis vitae enim at, porta mollis erat. Sed in orci nunc. Aliquam non dui et urna volutpat dignissim varius
sed nulla. Duis fringilla vestibulum ipsum, a fringilla sapien bibendum vel. Pellentesque non viverra magna, sed laoreet orci. Donec elit eros, imperdiet sit amet risus sed, placerat fermentum sem. In porta felis vulputate, suscipit nisi maximus, fringilla
tellus. Vivamus nec dui accumsan, suscipit eros nec, sodales sapien. Mauris et viverra lectus. Curabitur massa quam, lacinia aliquam ante eget, auctor sollicitudin turpis. Phasellus imperdiet eros ornare arcu pulvinar, id cursus arcu volutpat. Nam sit
amet magna eu magna suscipit posuere id quis nisi. Quisque a diam sed magna luctus dignissim sit amet et elit. Vivamus fringilla posuere sapien eu posuere. Proin bibendum libero ac eros maximus vehicula. Sed et diam eu lorem gravida pharetra at sed
mauris. Cras dictum urna fringilla quam luctus elementum. Maecenas tincidunt arcu dolor, eget venenatis ex ornare eu. Vestibulum tempor tempus finibus. Mauris posuere, enim eu ornare molestie, quam urna iaculis massa, eu lacinia eros odio ac quam. Sed
sem nunc, sollicitudin in imperdiet eu, molestie vel libero. Morbi in dui ut enim pharetra dictum egestas tempus velit. Morbi accumsan justo nec faucibus pulvinar. Ut pellentesque auctor purus. Maecenas id sagittis enim, tempor tristique quam. Proin
condimentum posuere scelerisque. Maecenas egestas vehicula vestibulum. Vestibulum pharetra nunc nec orci scelerisque, fermentum pellentesque quam pretium. Nam odio tortor, aliquet nec sem quis, rutrum ornare lectus. Fusce scelerisque ullamcorper lacus
vitae hendrerit. Donec tincidunt quis dolor ut sollicitudin. Vestibulum feugiat diam at odio fringilla, id ullamcorper diam scelerisque. Aenean tempor tincidunt turpis id porttitor. Mauris gravida eleifend lorem, pellentesque cursus odio volutpat et.
Mauris est nunc, bibendum congue purus vitae, luctus elementum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<br />
<br />
<br />
Go to top </body>
</html>
The good thing about this is that it is a cross-browser solution, as it is very uncommon to find a browser that disabled CSS. I hope this helps.
Maybe you want to try to smooth scroll using jQuery. I think native scrolling might not always support the smooth scroll. You'd be much safer using jQuery.
$("html, body").animate({ scrollTop: 0 }, "slow");
If you are using other anchors, you need to make sure they prevent default jumping and scroll. I'd use jQuery also.
Ref: https://css-tricks.com/snippets/jquery/smooth-scrolling/
I don't know if you still need an answer to this, but I came across an article that fixed it for me with just css: https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/
enter code here
setInterval(myTimer, 1);
var isTimerEnable = false;
var scroll_position = 0;
var getSelected_position =0;
var getCurrent_position =0;
var scroll_speed = 5;
function Current_Position(){
getCurrent_position = window.pageYOffset;
}
function myTimer() {
if(isTimerEnable == true){
if(scroll_position < getSelected_position){
scroll_position +=scroll_speed;
getCurrent_position =scroll_position;
window.scroll(0,scroll_position);
if(scroll_position >= getSelected_position){
isTimerEnable = false;
}
}
else{
scroll_position -=scroll_speed;
getCurrent_position =scroll_position;
window.scroll(0,scroll_position);
if(scroll_position <= getSelected_position){
isTimerEnable = false;
}
}
}
}
//NOTE ASSIGN THE Y POSITION OF YOUR DIV
function topNav_btn(setPosition){
scroll_position = getCurrent_position;
getSelected_position = setPosition;
isTimerEnable =true;
}
<!DOCTYPE HTML>
<html>
<head>
<title>No Scroll Effect On Body</title>
</head>
<body>
<button style="position:fixed; left:200px;" onclick="topNav_btn(0);">Go to form 1 </button>
<button style="position:fixed; left:300px;" onclick="topNav_btn(450);">Go to form 2 </button>
<button style="position:fixed; left:400px;" onclick="topNav_btn(900);">Go to form 3 </button>
<div id="form1"> Form 1 </div>
<br> <br> <br><br> <br> <br><br><br> <br> <br> <br><br> <br> <br><br><br>
<br> <br> <br><br> <br> <br><br><br>
<div id="form2"> Form 2 </div>
<br> <br> <br><br> <br> <br><br><br> <br> <br> <br><br> <br> <br><br><br>
<br> <br> <br><br> <br> <br><br><br>
<div id="form2"> Form 3 </div>
<br> <br> <br><br> <br> <br><br><br> <br> <br> <br><br> <br> <br><br><br>
<br> <br> <br><br> <br> <br><br><br>
</body>
</html>
I do not want to use normal fixed positioning because then the text below the nav bar will get pushed to the top, blocked by the nav bar itself. I am looking for an alternate method using jQuery that will keep the nav bar in the same position despite how much the window has scrolled.
My current code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$('nav').on('scroll', function(e) { //Cancel the normal course of action for the nav bar
e.preventDefault();
});
var y = $('nav').offset().top;
$('nav').on('scroll', function() { //Continuously update top value to remain at top of window
var z = y + $(window).scrollTop();
$(nav).css("top", z + "px");
});
});
</script>
</head>
<body>
<nav>
<a>
Link1
</a>
<a>
Link2
</a>
</nav>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus.
</body>
</html>
All help will be appreciated.
You don't need the preventDefault part
The scroll event is triggered on window
Use variables
The nav needs a position:absolute
Here is a working fiddle: http://codepen.io/anon/pen/jPeQMp
$(function(){
var $window = $(window),
$nav = $('nav').css('position', 'absolute'),
initialTop = $nav.offset().top;
$window.on('scroll', function() {
$nav.css('top', initialTop + $window.scrollTop() + 'px');
});
});
The code can already scroll to the bottom after a submission, but the scroll bar does not update when there is a page update.
Here is how I want the scrollbar to behave:
1) The scroll bar starts at the bottom of the div.
2) The scroll bar scrolls to the bottom of the div only if you are at the bottom of the div before the content in the php file is updated.
3) The scroll bar does not scroll to the bottom of the div if you are not at the bottom of the div before an update was made to the content in the php file.
I searched Google and here for a method to get this to work, but what I have found does not work for me in my case.
Here's the code for the div:
<div id="div1" style="position: absolute; width: 70%; height: 80%; overflow-y: auto; right: 0px; top: 0px;" >
<?php include ('content.php'); ?>
</div>
And here's the code for the javascript:
$(document).ready(function() {
$('#msg').ajaxForm({
target: '#message',
success: function() {
$("#msg")[0].reset();
$("#div1").animate({ scrollTop: $("#div1")[0].scrollHeight}, 1000);
$('#message').fadeIn('slow');
}
});
});
To detect that the scroll bar is at the bottom you can use the following
function isScrolledToBottom(el) {
return el.scrollTop == el.scrollHeight - el.clientHeight;
}
Here's an example where
Div starts scrolled down
When content is added, it checks if the div was scrolled all the way down before updating content
If it was scrolled to the bottom, it scrolls it again after updating
var div = document.getElementById('content');
// Set it to go the bottom initially
scrollToBottom(div);
document.querySelector('button').addEventListener('click', function() {
var wasAtBottom = isScrolledToBottom(div);
var scrambledText = div.innerHTML.split('').sort(function() {
return Math.random() - .5
}).join('');
div.appendChild(document.createTextNode(scrambledText));
if (wasAtBottom) {
scrollToBottom(div);
}
});
function isScrolledToBottom(el) {
return el.scrollTop == el.scrollHeight - el.clientHeight;
}
function scrollToBottom(el) {
el.scrollTop = el.scrollHeight - el.clientHeight;
}
#content {
height: 150px;
overflow: scroll;
}
<div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus imperdiet venenatis. Etiam lorem nisi, ullamcorper nec neque non, ultrices elementum lectus. Ut dapibus venenatis quam sit amet imperdiet. Proin scelerisque, nunc vitae ultricies aliquam, diam ligula venenatis purus, id egestas elit turpis sit amet velit. Suspendisse facilisis vel arcu eget hendrerit. Donec non nunc aliquam, finibus ante vitae, venenatis dolor. Suspendisse pulvinar fermentum rhoncus. Proin pulvinar lectus et purus consectetur rutrum. Phasellus rutrum dolor risus, non consectetur erat posuere eget. Etiam viverra congue laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet ullamcorper finibus. Nulla ac vehicula risus. Phasellus nec fermentum quam. Donec blandit ornare ipsum ut dignissim. Etiam nec velit maximus, mollis nibh id, elementum nisi. Donec arcu nisi, sollicitudin sit amet metus sed, aliquet convallis eros. Sed lacus metus, aliquet sed sodales vitae, rutrum sollicitudin dolor. Nunc dictum, mi id egestas luctus, mi erat finibus enim, a imperdiet orci est ac elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Sed dignissim viverra finibus. Ut quis nulla a sapien bibendum sodales at ut nunc. Etiam volutpat ante varius tellus vulputate blandit. Aliquam turpis purus, efficitur vel lacus imperdiet, viverra auctor nisl. Aenean nunc est, tempus nec tincidunt in, malesuada in mauris. Nam dui risus, maximus et placerat in, elementum tristique leo. Fusce quis viverra enim. Curabitur congue fringilla accumsan. Curabitur vehicula aliquet malesuada. Aliquam pharetra ante vel nulla elementum, sit amet auctor mi porttitor. Mauris id varius leo. Vestibulum ac dolor id ligula iaculis aliquam. Donec porta euismod quam, eu sollicitudin nisi interdum egestas. Vestibulum et ligula velit. Nulla vel iaculis purus. Integer et est ut ipsum fringilla rhoncus. Aliquam auctor eu arcu rhoncus maximus. Sed vulputate, ipsum nec tempus sodales, neque leo hendrerit elit, a faucibus nisl ex nec lorem. Praesent varius dictum felis, sed sollicitudin diam tempor vitae. Mauris tempus justo non egestas mollis. Etiam congue odio eget velit vulputate, sit amet pharetra nulla faucibus. Cras a lorem sed ante imperdiet dapibus id blandit risus. Pellentesque nec tincidunt lacus.</div>
<button>Add content</button>
I am using nicEdit for a project, I have a problem as my project is completely dynamic the client wants, when they copy paste any text to the nicEdit text editor the div has to auto resize, for that I need the to find the height of which i am not able to get. I have done a jsFiddle
I have not used any jquery to find the height thinking it might conflict with nicEdit script file
<div id="StatusEntry" rows=10 cols=50 contenteditable="true">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
This is just the html i have used. Please anyone can help me on this would be thankfull.
Thanks in advance
you can get div height by using js as like this
var height=$('#StatusEntry').height();
var height=$('#StatusEntry').height();
$div.on('resize',function(){
clearTimeout(timer);
timer = setTimeout(function(){
$("#StatusEntry").height(height());
});
});``
HAVE FOUND THE SOLUTION FOR BELOW PROBLEM : here is the Js Fiddle
special thanks to jonhkr
I have been working on reverse scroll in jquery and i need help with it. My stuff/code : Js Fiddle
Achieved:
when the content is scrolled down the rocket moves up.
Problem:
When the rocket is dragged up the content has to scroll down.
adding "containment" to the drag-able doesn't seem to work.
this has to work with overflow as hidden.
For those without Fiddle:
HTML:
<div id="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget nisi ipsum. Donec semper, justo at fringilla condimentum, felis tellus ultricies dolor, id convallis metus nulla quis est. Vivamus facilisis orci vel lectus blandit commodo blandit sem tempor. Curabitur condimentum, diam quis pretium feugiat, sem ante pretium tortor, in lobortis massa eros vitae dui. Nullam nisi mauris, condimentum a feugiat in, euismod quis augue. Maecenas euismod adipiscing tellus. Aliquam elementum egestas dolor, vel aliquam nulla tincidunt eget. Etiam risus elit, scelerisque eu volutpat sed, faucibus non ante. Donec sed nunc erat, eget facilisis risus. Etiam id odio tortor. Sed aliquam viverra volutpat. Sed gravida lectus eu mi ornare in feugiat magna elementum. Pellentesque in dolor ligula.
Maecenas condimentum nisl eget arcu elementum nec imperdiet risus lobortis. Suspendisse id placerat turpis. Etiam dolor quam, placerat et volutpat nec, ultricies sed lorem. Fusce volutpat lobortis est ut pellentesque. Donec enim mauris, pretium quis gravida vitae, pellentesque ac nibh. Proin condimentum aliquam scelerisque. Vestibulum aliquet pharetra dapibus. Donec id nisi non nibh fringilla auctor et eget erat. Morbi pretium mauris sed orci pretium aliquam. Nulla pharetra venenatis nunc, in venenatis purus tempor vitae. Vivamus tincidunt dui non eros gravida sit amet consectetur nibh lacinia.
Maecenas semper ligula et urna tincidunt placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse arcu urna, facilisis at tempus id, posuere sed lacus. Vestibulum in feugiat tellus. Nullam suscipit, velit nec tincidunt pellentesque, enim odio ornare mauris, quis faucibus sem sapien sed turpis. Nulla sit amet risus in magna iaculis scelerisque sit amet vel erat. Morbi eu vestibulum nulla. Etiam auctor auctor felis, nec sodales velit condimentum non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis eu massa diam, eu porttitor eros. Etiam blandit, turpis ac volutpat gravida, massa lorem congue orci, eget fringilla eros felis quis elit. Suspendisse quam tellus, pretium non mattis ut, laoreet in diam. Suspendisse ante odio, venenatis vel condimentum vitae, varius id sapien. Quisque ac nunc ipsum. Mauris porttitor blandit magna, id rutrum ipsum pellentesque non. In suscipit diam ligula, non tristique diam.
Aliquam interdum ante at nisl sagittis vel luctus eros fringilla. Vestibulum purus orci, ultrices at tristique et, malesuada eget enim. Praesent commodo erat vel massa auctor id elementum elit elementum. Duis diam urna, mollis ut imperdiet aliquam, commodo id dui. Etiam vulputate facilisis dui id convall
</div>
<div id="track">
<div id="rocket">
</div>
</div>
<div id="xpos" style="clear:both">
</div>
CSS:
#track {
height: 400px;
width: 48px;
overflow: hidden;
margin: 10px 0 0 10px;
background:#ccc;
float:left;
}
#rocket{
height:48px;
width:48px;
background:#ccc url('http://www.veryicon.com/icon/preview/System/GANT%203/Rocket,%20This%20is%20a%20damn%20good%20Icon.jpg');
}
JS (JQuery 1.8.2 & Jquery UI):
$(document).ready(function() {
$(function() {
var left = parseInt($('#track').css('margin-left'), 10);
var top = parseInt($('#track').css('margin-top'), 10);
$("#rocket").draggable({
containment: "#track",
axis: "y",
scroll: false,
drag: function(event, ui) {
// Show the current dragged position of image
var currentPos = $(this).position();
$("div#xpos").text("CURRENT: \nLeft: " + (currentPos.left - left) + "\nTop: " + (currentPos.top - top));
}
});
});
});
I changed a bit your code to solve these problems:
Adding "containment" to the drag-able doesn't seem to work.
var draggingRocket = false;
$("#test").scroll(function(event) {
if(!draggingRocket){
var st = $(this).scrollTop();
var pos = iHeight - (st / cr);
$("#rocket").css("top", pos);
}
});
//rocket drag
$("#rocket").draggable({
containment: $('#track'),
axis: "y",
scroll: false,
start: function(event, ui) {
draggingRocket = true;
},
drag: function(event, ui) {
// Show the current dragged position of image
var currentPos = $(this).position();
$("div#xpos").text("CURRENT: \nLeft: " + (currentPos.left - left) + "\nTop: " + (currentPos.top - top));
$("#test").scrollTop(currentPos.top);
},
stop: function(event, ui) {
draggingRocket = false;
}
});
First of all, good work.
Well I don't think your solution is far-fetched. Basically you need to use
$("#test").scrollTop((top - currentPos.top)*cr);
to set the scrollTop of the div test. The equation I have used it not accurate, but you can change it accordingly.
Hope this gives you lead:
Demo: http://jsfiddle.net/CZvWC/7/