On my page I have new comment box's that stack on top each other every couple of seconds. is their a way to follow the comment box I click on. currently if i click it that box gets pushed off the screen when the other box's load on top and have to scroll down manually to it. I would like to auto follow that box I click on... Focus?
You can use an anchor:
<div id="aDiv"></div>
then
location.href = "#";
location.href = "#aDiv";
Or you can use jquery scrollTop: scrollTop: $(this).offset().top
Or you can use javascript scrollTo: window.scrollTo(elementPos,0)
So, to set the scroll, https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollTop
I would implement this 2 ways
An observer pattern with the boxes, that knows when new boxes are added, which checks a flag. The flag itself is set true when there is focus on any comment box, and false when there is not.
Scrolltop can be jarring in a UI, but perhaps you can figure out a way to animate it, I won't spoon feed you further.
Check out Addy Osmanis book if you need help with design patterns!
http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/
You can use the scrolltop function in jQuery.
//Everytime, you add a comment, scroll the page to the element
$('html, body').animate({
scrollTop: $("#clickedComment").offset().top
}, 500);
Here's a complete fiddle but you will see that there is a logic problem. It's not possible to scroll up when you have many comment above.
Related
I have a simple blog, and each blog post has a number of images ranging from 1 to 10. If you click on any of the images in the post, it should scroll you down to the next post. I thought something as simple as this would've worked:
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function () {
var $this = $(this);
$('.journal-container').animate({
scrollTop: $this.closest('.each-journal-entry').next().offset().top
}, 500);
});
But when I click another image, except for the first one, it just scrolls to an odd position.
I managed to achieve this with some help, and you can see the output here: http://jsfiddle.net/w7rtcmp0/3/ which works great, but the difference for me is that my content is in a scrollable div (hence .journal-container and not html, body.
Any ideas why I am having this issue? I have created a jsFiddle with the scrollable div, and if you click an image further down... it replicates this issue... so hopefully this helps.
http://jsfiddle.net/w7rtcmp0/5/
Thanks.
jQuery adjusts offset().top() based on the current scroll position.
Using JavaScript's offsetTop property should fix the problem:
scrollTop: $this.closest('.each-journal-entry').next()[0].offsetTop
Fiddle: http://jsfiddle.net/m7cm5oL6/
So I think you were trying to use the wrong height.
Here I set a variable of height and set it to the height of the current journal/blog object. This allows me to scroll my height all the way down to the next available blog object.
http://jsfiddle.net/w7rtcmp0/24/
$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function() {
$this = $(this);
var height = $this.closest('.each-journal-entry').height();
$('.scrollable').animate({
scrollTop: height
}, 2000);
});
You may want to look at Ariel Flesler's jQuery scrollTo plugin, I had the same issue and using this saved me hours of debugging.
I want to achieve some kind of smooth scrolling, so I made this script:
$('a').click(function(){
var sclink = $(this).attr('href');
$('.menu').animate({
scrollTop: $(sclink).offset().top
}, 500);
return false;
});
The problem? When I click on the 'a' the offset.top() value changes in another weird value and toggle between them? Why does this happen and how do I resolve it?
http://jsfiddle.net/StartStep/9SDLw/2947/
I think the problem is with the scroll.top() that gets the value in another way...
jsfiddle.net/9SDLw/2950/
$('a').click(function(){
var sclink = $(this).attr('href');
$('.menu').animate({
scrollTop: $(sclink).position().top
}, 500);
logit('Anchor: '+sclink+'; Offset top value: <b>'+$(sclink).offset().top+'</b>')
return false;
});
Use position instead of offset.
The reason is offset is relative to the viewport, as such it looks like you've scrolled too far, but this is because the top of your viewport area is being obscured by your layout, so offset is actually not what you want, instead, position is.
You should also add a reference to stop before calling animate to ensure if a user clicks in quick succession the behaviour is as expected (the animation queue is essentially flushed)
With that in mind your HTML also needs some work- the clickable link hasnt got closing tags for example.
Change your scrolling code to:
$('.menu').stop(true,true).animate({
scrollTop: $(sclink).position().top
}, 500);
Demo Fiddle
I am using this code to scroll to a certain element on my page:
$("html, body").animate({scrollTop: $(".myDiv").offset().top}, 300);
It works, but there is one issue with it: When the user scrolls down while the script scrolls up, there is some juddering because there are two scroll commands at the same time in different directions - sounds logical to me.
I checked some other sites with such scroll functionality, there is no juddering. So what's the trick to prevent this?
Thats a jQuery bug when you use animate with scrolling, good detection.
I did a research how to turn it off scrolling and find this question : How to disable scrolling temporarily?
Here is jsFiddle. You will see after click; user cant scroll untill animate complete.
$('.myDiv').click(function(){
disable_scroll();
$('html, body').stop().animate({ scrollTop: 0 }, 700,function() {
enable_scroll();
});
});
edit: thanks to galambalazs btw.
an idea - try hooking to the scroll event and use http://api.jquery.com/stop/ to stop your animation
.. bad idea..
same problem with a solution - let user scrolling stop jquery animation of scrolltop?
I've re-created a simple version of what I'm trying to do here (jsFiddle)
The header should stay where it is, and as you scroll down, when you click the header div it should scroll back up to the top, which it does. But if you focus on the input, or click the "logo", the scroll should stay where it is.
With the first method I've tried is by using jQuery's .css and setting the input/logo's z-index as higher than the header, then getting the current scroll and keeping it at that position.
This sort of works, but once you click the input or logo, the header scroll no longer works.
I've also tried changing the logo/input jQuery to .animate with a slow speed, and it stays static for a couple seconds and then scrolls to the top even though I've not set it to do so. Here is the second example - jsFiddle
Doing it with the second example however doesn't stop the other function from working.
Is there any reason for this behaviour that I'm missing?
You can prevent the click event from propagating to the header.
$("#logo, #input").click(function(e) {
e.stopPropagation();
});
Check out this interesting article about event order, all you have to do is stop propagation. Here your modified Fiddle
$("#logo, #input").click(function(e) {
e.stopPropagation();
var y = window.scrollY;
$('html').animate({
scrollTop: y
}, 'slow');
$('body').animate({
scrollTop: y
}, 'slow');
});
All you need to do is stop the propegation of the event. To do this you return false from your click function.
$("#logo, #input").click(function() {
return false; // Add this line
});
Here is your fiddle updated: http://jsfiddle.net/BRnvT/
I am trying to make a horizontally scrolling Web Page. This template uses J Query and CSS to control width, but the User still has to drag the scroll bar across the bottom - how would I add arrows or something that the User could just click on and it would go over to the next section?
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
Check out this JQuery plugin http://plugins.jquery.com/project/ScrollTo
You can use scrollLeft and offset() to determine what to scroll to:
A next button might look like this (Based very closely on a sample in Chapter 7 of jQuery Enlightenment):
$(".next").click(function(e){
$('html, body').animate({
scrollLeft: $(this).closest('td').next().offset().left
}, 1000);
e.preventDefault();
});
I am assuming you followed the CSS-Tricks article closely, which means you have a table on the page.
If you didn't want the animation you could do it this way:
$(".next").click(function(e){
$('html, body').scrollLeft($(this).closest('td').next().offset().left );
e.preventDefault();
});