I have a lot of problem with ajax on my web app.
Part of my website is loaded with the ajax method. Header and Footer loaded a static.
When I back to my previous page (button in browser) or refresh page (F5), my web application doesn't remember my scrolltop position (page height increases after loading) so almost every time it scrolls to the bottom of Footer.
I came up with a solution in javascript. My plugin saved a scrollTop position after click, and after loaded the page, it check it, if scrollTop is save:
$.plugin('scrollRestoration', {
init: function () {
var me = this;
me.registerEvents();
me.scrollRestorationLoad();
},
registerEvents: function () {
var me = this;
me._on(window, 'click', $.proxy(me.scrollRestorationSave, me));
},
scrollRestorationSave: function () {
sessionStorage.setItem('scrollPosition', $(window).scrollTop());
console.log(sessionStorage.getItem('scrollPosition'));
},
scrollRestorationLoad: function () {
if (sessionStorage.getItem('scrollPosition') != null) {
setTimeout(function () {
$(window).scrollTop(sessionStorage.getItem('scrollPosition'));
console.log(sessionStorage.getItem('scrollPosition'));
}, 2000);
}
else {
$(window).scrollTop(0);
console.log(sessionStorage.getItem('scrollPosition'));
}
},
});
but I'm not entirely happy with this solution, because it loads only after 2sec (after loading the ajax page)
Related
My scrolled navbar return to default when i reload my page in the middle of the page
Here is my website photos look here
My javascript codes :
$(document).ready(function($){
$(window).scroll(function(){
$scrol = $(document).scrollTop();
if ($scrol > 50 ) {
$('.header').addClass('header6');
$('.logo').addClass('logo5');
$('.about').addClass('about5');
$('.about:hover').addClass('about5:hover');
$('.navbar').addClass('navbar5');
$('.nav').addClass('nav5');
}
else{
$('.header').removeClass('header6');
$('.logo').removeClass('logo5');
$('.about').removeClass('about5');
$('.about:hover').removeClass('about5:hover');
$('.navbar').removeClass('navbar5');
$('.nav').removeClass('nav5');
}
});
});
i wait answers
THANK YOU
Just run your function when the page loads to update your header :
I also added some modifications to optimize your code, as stated by #jeremy-thille
function updateScroll(obj){
if ($(document).scrollTop() > 50 ) {
obj.header.addClass('header6'); //Use the previously stored JQuery requests
obj.logo.addClass('logo5');
obj.about.addClass('about5');
obj.navbar.addClass('navbar5');
obj.nav.addClass('nav5');
}
else{
obj.header.removeClass('header6');
obj.logo.removeClass('logo5');
obj.about.removeClass('about5');
obj.navbar.removeClass('navbar5');
obj.nav.removeClass('nav5');
}
}
$(function(){ //New way to wait for the document to be loaded
//Store JQuery calls to reduce processing time
var storedObjects = {
header: $('.header'),
logo: $('.logo'),
about: $('.about'),
navbar: $('.navbar'),
nav: $('.nav')
};
updateScroll(storedObjects); // Will update your header
$(window).scroll(updateScroll(storedObjects));
});
I have managed to implement the smoothState.js plugin on my website and it works nicely, but my other very simple jQuery plugin will not work, wich starts with:
$(document).ready()
I need to refresh the page in order for it to work again.
I've read the smoothState documentation and it says I should wrap your plugin initializations in a function that we call on both $.fn.ready() and onAfter — but I'm farely new to programming, so I'm asking for your help.
How can I make my jQuery plugins work with smoothState?
You need to wrap scripts that are initiated with $(document).ready() in a function, and then call that function when you need it.
For example, let’s say this is your current script:
$(document).ready(function() {
$('.btn--homepage').click(function(e) {
e.preventDefault();
var goTo = $(this).attr('href');
$('#page').addClass('is-exiting');
$(this).addClass('exit-btn');
setTimeout(function() {
window.location = goTo;
}, 260);
});
});
It’ll work fine when the page loads as it’s wrapped in $(document).ready(function()), but as the page won’t be reloading when using Smoothstate, we need a way to call the snippet both when the page originally loads and when smoothstate loads content. To do this we’ll turn the above snippet in to a function like this:
(function($) {
$.fn.onPageLoad = function() {
$('.btn--homepage').click(function(e) {
e.preventDefault();
var goTo = $(this).attr('href');
$('#page').addClass('is-exiting');
$(this).addClass('exit-btn');
setTimeout(function() {
window.location = goTo;
}, 260);
});
};
}(jQuery));
As you can see, we’ve swapped $(document).ready(function()) with the function wrapper, everything else stays the same.
So now we’ve got a function all we need to do is call it when the page loads and in Smoothstate.
To call it when a page loads all we need to do is this:
$(document).ready(function() {
$('body').onPageLoad();
});
And to trigger it in Smoothstate we need to call it in the InAfter callback like this:
onAfter: function($container) {
$container.onPageLoad();
}
And here's an example Smoothstate script showing where to put the onAfter callback:
$(function() {
var $page = $('#main');
var options = {
prefetch : true,
pageCacheSize: 4,
forms: 'form',
scroll: false,
onStart: {
duration: 1200,
render: function($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
$('html, body').scrollTop(0);
}
},
onAfter: function($container) {
$container.onPageLoad();
}
};
var smoothState = $('#main').smoothState(options).data('smoothState');
});
Happy to provide further assistance if needed.
I'm working on a website with two banners- one for mobile and one for desktop. In order to have both banners functioning I had to write an if statement that a past of the dsktop javascript is only executed if the desktop banneris set to display:block in the css.
This works fine, but the only problem is when the user resizes the window the if statement doesn't get executed- they have to reload the page to do that.
this is the code :
var wait = setInterval(function () {
if (!$(currentBanner, loading).is(":animated")) {
clearInterval(wait);
loading.stop().fadeOut(300, function () {
if ($('#banner').css('display') == 'block'){
setTimeout(function() {
bannerInit();
}, 800);
startInterval();
if (initialLoad) {
initialLoad = false;
next.slideDown();
previous.slideDown();
}
}
});
}
Does anybody know how I can trigger the if statement not only on page load but also on resizing of the window?
Like this:
// on document ready
$( document ).ready(function() {
/* your function/code here */
});
// on page load, all elements finished e.g images etc
$(window).load(function() {
/* your function/code here */
});
// on page resize
$(window).on('resize', function(){
/* your function/code here */
};
Or vanilla JS:
// page load
window.onload = function() {
/* your function/code here */
};
// resize
window.addEventListener("resize", myFunctionOnResize);
I'm trying to do the following:
Open a div with slideToggle
Move the users window to the top of the div with scrollTop
Then basically reverse the process when the user closes the div.
I have the whole process almost finished, but I am having one problem. When I open the div my window doesn't move to the top of the div. But when I close the div my window does move to where I want it.
Here is my jQuery code:
// Find the location of a div (x, y)
function divLoc(object) {
var topCord = 0;
// If browser supports offsetParent
if(object.offsetParent) {
do {
topCord += object.offsetHeight;
}
while (object === object.offsetParent);
return topCord;
}
}
$("#open").click(function () {
var newInfo = document.getElementById("newInfo");
var location = divLoc(newInfo);
$("#newInfo").slideToggle('slow', function() {
$('html,body').animate({ scrollTop: location }, 2000);
});
});
And I uploaded an example of the problem on jsFiddle: Here
You need change slide function:
$("#newInfo").slideToggle('slow', function() {
var self = $(this)
$('html,body').animate({ scrollTop: self.offset().top }, 2000);
});
http://jsfiddle.net/hSHz5/
I'm having a bizarre issue that I don't know how to solve and was wondering if you guys could help.
A bit of background: I have been asked to create a system where subpages of a page in wordpress are loaded on the end of that page in an infinite scroll. This is working correctly.
They also want the top nav links to load all content upto and including the page they clicked and then scroll to it.
If I scroll down (loading the pages) and then click a top nav link the scroll works correctly. However if I load NO further pages before clicking one of the links, the pages will load, and the scroll will start, but will only get some of the way before stopping. This is due to an incorrect value being given by offset().top. My question is why ?
function ajaxloadnscroll(index) {
//If the page has already been loaded then just scroll to it
if (pages[index].loaded) {
$('html, body').animate({
scrollTop: $("#" + pages[index].name).offset().top
}, 2000);
return;
}
//Loop through pages up to one clicked.
for (i = 0; i <= index; i++) {
current = i;
if (!pages[current].loaded) {
$.ajax({
url: pages[i].url,
async: false,
context: document.body,
success: function(data) {
if (data) {
$("#tempload").before(data);
pages[current].loaded = true;
if (current == index) {
$('html, body').animate({
scrollTop: $("#" + pages[current].name).offset().top
}, 2000);
}
}
}
});
}
}
//Increment current in order to load next page object on scroll.
current++;
return false;
}
Any help you could give me on this issue would be really appreciated!