Hopefully, this will be an easy answer for someone with Javascript time behind them...
I have a log file that is being watched by a script that feeds new lines in the log out to any connected browsers. A couple people have commented that what they want to see is more of a 'tail -f' behavior - the latest lines will always be at the bottom of the browser page until the viewer scrolls back up to see something. Scrolling back to the bottom should return you to the auto-scrolling behavior.
My google strikeout on this one is - hopefully - just a matter of not knowing anything at all about javascript and therefore, not knowing what keywords to search for. I don't need a complete solution - just a 'close enough' that lets me jump in and get my hands dirty.
EDIT:
I've been attempting the scrollTop/scrollHeight idea, but am clearly missing something. I've done next to nothing with Javascript, so again I'm probably asking very low-level questions:
<html><body>
<script type="text/javascript">
for (i=0; i<100; i++)
{
document.write("" + i + "<br />");
document.scrollTop = document.scrollHeight;
}
</script>
</body></html>
This was one of many permutations. Obviously, I can't output the log line-by-line in javascript, but I'm just trying to see the correct behavior. What's the missing link I need here?
EDIT AGAIN:
This has turned into a far more interesting problem that I first expected. The code suggestion using window.scroll does do the trick. I started playing with restricting the scroll to only take place when the browser was at the bottom of the document body. This is easy enough to do in theory, but in practice it hits a snag:
Every time you get new text from the server, the size of the body increases and your current scroll position is no longer at the bottom of the document. You can no longer tell the difference (using scrollHeight, clientHeight and scrollTop) whether the user has scrolled up or if the text has just shot beyond their view.
I think that if this is going to work, I'm going to have to commit myself to having a JS event that fires when the user scrolls and turns off scrolling if they are above the bottom of the window, but turns it back on if they have scrolled down to the point where they are effectively at the bottom of the view. I'm looking at the onScroll event and, given that the math on the variables I mentioned works out pretty well, I think I am on the right path here. Thanks for your input, everyone!
x = 0; //horizontal coord
y = document.height; //vertical coord
window.scroll(x,y);
To scroll the whole document use this:
window.scrollTo(0, document.body.scrollHeight);
if you have just a single scrollable div or something then the process is different:
var obj = $('id');
obj.scrollTop = obj.scrollHeight;
for (i = 0; i < 100; i++) {
document.write("" + i + "<br />");
window.scroll(0,document.body.offsetHeight);
}
Nice jQuery function gets this done
$('html,body').animate({ scrollTop: element.offset().top }, 'slow');
This worked for me, used it to AutoScroll to a dropdown menu to bring it into focus
This Explains What set time interval is - http://www.w3schools.com/jsref/met_win_setinterval.asp
This Explains What set time out is - http://www.w3schools.com/jsref/met_win_settimeout.asp
This will scroll the page with javascript and will stop after 6 seconds
<script type = "text/javascript" >
var x;
function autoscroll(){
self.scrollBy(0,x)
}
function playautoscroll(){
x = 1;
setInterval('autoscroll()',0.01);
stop();}
function onetozero(){
x=0;
}
function stop(){
setTimeout ("onetozero()",6000);
}
window.onload=playautoscroll
</script>
obj.scrollTop = obj.scrollHeight;
Related
I have a carousel (Owl Carousel) with vertically centered controls. Because of the structure, I have to absolutely position the previous and next arrow. Because the page is responsive, their position is dynamic. The size of the controls may also change.
I've written a function that runs on load and resize. It gets the height of the image and the height of the controls, subtracts the latter from the former, divides by two, and then uses that number as the controls' margin-top.
It works, but I'm questioning if I'm getting and using all the variables correctly. Does JavaScript read in order? Where it runs the first line, then the next, then the next... I'm strong in CSS but JS has always been a crutch.
Can I write this more efficiently?
function centerCarouselControls() {
var carouselImage = $('.carousel-card > img');
var carouselControls = $('.owl-nav > div');
var carouselHeight = carouselImage.outerHeight();
var controlHeight = carouselControls.outerHeight();
var controlMargin = (carouselHeight - controlHeight) / 2;
carouselControls.css('margin-top', controlMargin);
}
$('.carousel-card > img').load(centerCarouselControls);
$(window).on('resize', centerCarouselControls);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I feel like this might be the type of question that gets flagged on here for not being specific enough. If that's the case, could someone please point me to a community where this would be more appropriate? Thanks!
In some browsers your code works like firefox 51, but it is more complete code this:
carouselControls.css('margin-top', controlMargin + 'px');
Im fairly new to JS... please be gentle.
Can anyone suggest a way to pull off a delayed autoscroll effect on a block of text?
It's important to mention that my ultimate goal is to use this on a popup modal window, on iOS devices. And because iOS browsers do not display the scrollbar until user interaction, I am resorting to the auto-scroll.
In effect: I would like the page to load, wait a couple of seconds, then have begin to slowly scroll down. The scroll is intended to be a hint to the user that there is more content available, therefore if there is any way to stop or temporarily pause the auto-scroll on user interaction- that would be optimal.
I have searched for my answers a couple of hours now, but between not being able to initialize the found code to my design (again, I'm fairly green), and not being able to find a solution that achieves everything I need - I am turning to brighter minds.
I have set up a fiddle with my HTML and CSS: http://jsfiddle.net/zfMsQ/
Any help is greatly appreciated!
ps: This is my very first post on StackOverflow :)
My code:
Extensive. Linked above.
Here you go: http://jsfiddle.net/zfMsQ/3/
var roll = true;
var max = 0;
var text = $("#content");
function scroll() {
text.scrollTop(text.scrollTop() + 1)
var top = text.scrollTop()
if (top > max) {
max = top
if (roll) {
setTimeout(scroll, 50)
}
}
}
text.on("mouseenter mouseover mousedown", function(){
roll = false;
})
setTimeout(scroll, 2000)
I want a solution either using a hashtag pointing at the name of an anchor tag or javascript.
The javascript I am currently using looks like this window.scroll(0, 20000);. The problem is that this causes the window jerk down when a user arrives on the page.
I know there are jQuery animations that make this movement more gradual. However, what I want is something that makes the movement of the window imperceptible to the user. I want to be as if the user landed at the bottom of the page.
The problem you face is that you wish to go to the bottom of your page which has not loaded yet. I would consider loading the page in a hidden format then show it when it has all loaded and after scrolling the user at the location you want. Use the focus or scroll to methods.
Take a look at the filament group website.
http://filamentgroup.com/
they hide the page with a loading screen until it is ready.
This way there is no jerk.
Hope this helps.
In loop it works, if the page is fully loaded and shown:
for(var n=0;n<1000;n++) window.scrollBy(0,20);
(Notice that 20*1000=20000, which was the original place to scroll.)
Teemu's answer doesn't seem to work for me (it goes straight to the bottom, making the loop with scrollBy stepping invisible), because it doesn't implement a delay.
If you mean to animate from top to bottom of the page in a 1000ms, try something more like this:
for (var n = 0; n < 1000; n += 1) {
setTimeout(function () {
window.scrollBy(0, document.height / 1000);
}, n);
}
That will give a 1 second (1000ms) animation, scrolling to the bottom in roughly 1000 steps.
I have a horizontally scrolling website, and I have a block that I want to stay in frame at all times as the user scrolls right. It looks perfectly smooth in webkit browsers, but is crazy jagged in Firefox and I don't really care about IEs.
function fixMyId(){
$('#myId').css({'margin-left': 150 + $(window).scrollLeft()});
}
function fixMyIdAlt(){
$('#myId').stop().animate({'margin-left': 150 + $(window).scrollLeft()}, 300);
}
And then I have it triggered on window scroll.
What would be a best way to average out the scrolling, so that maybe every so many seconds or pixels of scrolling it fires the function, or upon stopping the scrolling it animates the block into place? I tried playing with delay() but that doesn't do anything. And this one just looks stupid (plus I have no idea what the overhead of this kind of crunching is):
function fixMyIdStupid(){
window.scrollCounter++;
if(window.scrollCounter % 20 == 0) $('#myId').stop().animate({'margin-left': 150 + $(window).scrollLeft()}, 300);
}
So what do I do? setTimeout and setInterval may be required, but those always make my head hurt.
EDIT: Here's a jsfiddle of it in action: http://jsfiddle.net/xsxSq/
The #f0f square is the #myId.
I tried to do such things as well, problem is that the scroll event isn't fired as much as you want. A nice workaround was subscribing the calculation function to the mousemove event, so it triggers A LOT. But on the other hand, I came up with another solution.
Why not turn things around and ask yourself:
Lets make it a position:fixed object and calculate what happens on resize. Because you actually are trying to create a position-x:fixed; and a position-y:absolute;
I actually did the following for the opposite kind of thing. A block that has to be exactly in the middle of the x-document, but in the y it was fixed.
$(document).ready(function ()
{
replaceFixed();
$(window).resize(replaceFixed);
$('#content').ajaxSuccess(replaceFixed);
$(window).scroll(replaceFixed);
function replaceFixed()
{
var jEl = $('#centeredFixedContainer');
var winW = $(window).width();
var docW = $(document).width();
var scrL = $(window).scrollLeft();
var divW = jEl.width();
var result = 0;
// window bigger than the element
if(winW > divW)
{
result = -scrL + ((docW-winW)/2);
}
else
{
result = $('#mainContainer').offset().left - scrL;
}
jEl.css('left',result);
}
});
Copying this code will not give you the solution, but will indicate another way to look at your problem.
I am looking for advice on how to create an autoscrolling effect using jQuery which would enable an entire div within a page to begin scrolling vertically upon loading at a constant slow speed. This would be a div with a large amount of content of which only a small amount was visible on the screen at any one time.
The scroll needs to be automatic, smooth and at a defined rate for example 10 pixels per second. Additionally when the scroll gets to the bottom of the page I need to be able to call a function.
I have tried a few different jQuery plugins but found nothing yet that worked reliably. Can anybody suggest an approach to take here?
Thanks
Simon
This can easily be done without jquery.
function init() {
var div = document.getElementById("myDiv");
// increase the scroll position by 10 px every 10th of a second
setInterval(function() {
// make sure it's not at the bottom
if (div.scrollTop < div.scrollHeight - div.clientHeight)
div.scrollTop += 10; // move down
}, 100); // 100 milliseconds
}
Try this technique
try this plugin : scrollTo
especially the onAfter