I try to use the jQuery each function for scroll top animation in pagination each click but each function not working well it's working the first time only. Here are the code
$(".wp-pagenavi > a").each(function(i){
$(this).click(function(){
var scroll = $("html, body");
scroll.stop().animate({scrollTop:400}, 500, 'swing', function() { });
console.log("click" + i);
});
});
Please help me to reach out form this issue.
It is quite possible some of the target are loaded after DOM ready event in which case you would have to change your code to:
$(document).on('click', '.wp-pagenavi > a', function() {
var scroll = $("html, body");
scroll.stop().animate({scrollTop:400}, 500, 'swing', function() { });
console.log("click");
});
Have a look at the following simplified fiddle: https://jsfiddle.net/f46dnaue/3/
Is this the behaviour you are experiencing?
In the fiddle, i represents the index of the element being clicked. Clicking either element results in console output on every click.
Regarding your scrolling, should it always scroll to 400? If scroll is defined as 400, it is going to stay 400 no matter the number of clicks - so if you want your page to scroll by 400px steps you need to save the current scrollTop value and add an extra 400 to it for every click.
Related
I have a problem with ScrollTo, my problem is that it works fine the first time i click on a link but not after when i click on a diffrent link.
Other information.
The elements i want to scrollto, is first gonna show up when i click a button, then all the elements gets animated and shows up on the page.
See below code
see image
$(document).ready(function ($) {
$("ul.sitecheck-navigation li.seo-optimering-sitechek").click(function (event) {
event.preventDefault();
scrollPageTo($('.meta-sitechek'));
});
$("ul.sitecheck-navigation li.newstuff-sitechek").click(function (event) {
scrollPageTo($('.newstuff-sitechek'));
});
function scrollPageTo($target) {
var scrollHeight = document.body.scrollHeight;
$(window).stop(true).scrollTo($target, {
duration: 600,
progress: function() {
// If the page scroll height changes, scroll afresh to the shifted target
if (scrollHeight !== document.body.scrollHeight) scrollPageTo($target);
}
});
return false;
}
});
It works fine when i click on a link for the first time, it scrolls to my div with the correct class.
But when i click again on a diffrent link, it only scrolls about 10px down when it should go up.
Anybody have any idea how that could be?
Got it solved thanks Frédéric. It was my calling off divs there where wrong after i added .list-result to my scrollto it works :)
I have no idea what I've done. The idea is to animate an element to slide in from a position and slide back when another element has been click. I've applied the second event within the call back of the original event function.
But, despite this structure, the second event function will run although I've not clicked the second element in the callback function.
If you're not following, the basic idea is this.
Click -> slidein -> outside click -> slide out
$('#mobileList').click(function(){
$('#mobileMenu').css({'display':'block'}).animate({
'left':'30%'
},500,function(){
$('#body').click(function(){
$('#mobileMenu').animate({
'left':'100%'
},500,function(){$('#mobileMenu').css({'display':"none"});/* I tried return false; here, failed to solve problem*/});
});
});
});
Starting CSS
nav#mobileMenu{display:none;width:70%;height:100%;background:#191820;color:#DCDCDC;position:fixed;top:0;left:100%;}
How the elements are structured.
<div id="body">
<a id="mobileList>☰</a>
<!-- content here -->
</div>
<nav id="mobileMenu">
<!-- content -->
</nav>
On the first two attempts it works fine. The next time I come to run, it will animate and then immediately animated out. I really can't see why as it's a call back function? :S
I think it's because the element #mobileList is within the element #body.
Is the call back still running? Can I cease it looking for the event?
Should I use queue() to run the slide in and slide out?
You don't need the callback here, just hook the click handlers up separately:
$('#mobileList').click(function(){
$('#mobileMenu').show().stop(true).animate({
'left': '30%'
}, 500);
});
$('#body').click(function(){
$('#mobileMenu').stop(true).animate({
'left': '100%'
}, 500, function() {
$(this).hide();
});
});
Example fiddle
Note that I used show/hide instead of css and added calls to stop() to prevent the queue being filled up on successive clicks during animation.
UPDATE
To hide the menu when you click anywhere else you need to attach an event handler to the document and check e.target to see what element caused the event. If it was outside the menu, hide it.
$('#mobileList').click(function (e) {
e.stopPropagation();
$('#mobileMenu').show().stop(true).animate({ 'left': '30%' }, 500);
});
$(document).click(function (e) {
var $menu = $('#mobileMenu');
if (!$menu.is(e.target) && !$menu.has(e.target).length) {
$('#mobileMenu').stop(true).animate({ 'left': '100%' }, 500, function () {
$(this).hide();
});
}
});
Updated fiddle
After a user preform a certain action, the page reloads and it adds a #someId to the URL so the URL will be something like localhost/panel/mypage.php#someId and as a default action, the browser will jump to an element with the id of someId.
What I would like to do is to catch that using jQuery and then instead of jumping right to the #someId element, jump 100px above it and have the ability to add a smooth scrolling.
Is that possible?
There is this hashchange event of the 'window' Document Object that's exactly what you require to catch this behavior. You can use:
Javascript solution:
window.addEventListener('hashchange', function(){
// smooth scroll code
});
jQuery solution (v1.8+):
jQuery(window).on('hashchange', function(){
// smooth scroll code
});
Note: The hashchange event gets triggered on url hash change (location.hash) on the same page but not from a different page e.g. going from www.example.com/about.html#first to www.example.com/contact.html#second won't trigger the hashchange event.
This should get you started:
var a_hash = window.location.hash;
var offset = $(a_hash).offset();
if(offset.top > 100){
offset.top = offset.top - 100;
}
var body = $("html, body");
body.animate({scrollTop: offset.top}, '500', 'swing', function() {
});
can you tell me how to stop function propagation. I need to fire up some function again after first click action. I using scrollTo jquery plugin for scroll my content and when i click in my 'fire' button content scroll nicely, but i can't do this again... Thx 4 help.
This is my function:
$('.arrow_down').bind('click', function(event){
$('.recipe_single_view_right_panel').scrollTo({top:'280px', left:'0'}, 800 );
event.stopPropagation();
});
You will not need to use a big, feature-rich plugin to achieve that.
All you need to do is to alter the scrollTop - property of the wrapping element. I created a fiddle with a simple example: http://jsfiddle.net/k9bdY/
The wrapping element is set to overflow: scroll, animating the scrolling-position on click is fairly simple then when using jQuery:
$('.scroll-btn').on("click", function(e){
e.preventDefault();
$('#wrapper').animate({
scrollTop: "+=200px"
}, 800);
});
here is my code :
$('#pagelinks > a').click(function () {
$('html,body').animate({ scrollTop: 0 }, 200);
setTimeout(function() {$('#my_div').hide("slide",{direction:"right"},500);},250);
return false;
});
My problem is this : When I click on a link, it scrolls up at the top correctly but then automatically scrolls down ( seems to be around where I clicked ) and hide the content of my_div by sliding it and stay there.
I don't want it to scroll down to where I clicked but rather stay at the top. I tried everything I know but nothing works.
Note that if I put just hide() instead of hide("slide",{direction:"right"},500) there is no scroll down. Plus the scroll down occurs on Firefox and Opera but not in Chromium.
Thanks for your help,
Nolhian
I can think of two options:
1) Don't use a-links with anchors if you don't use the anchor part the way it was ment to.
2) stop the default event from occuring by passing on event to the click function and using preventDefault.
example:
.click(function(e){ e.preventDefault(); });