We Keep Coding

How to scroll new page to top on load on click?

I'm using barba.js to fade new pages in. Code must be placed between the barba wrapper div. When I click a link to a new page though, the new page fades in at the same position as the previous page was in. So if the user clicks a link, the new page is loading in near , which I don't want.
How can I get the new page to load in at the top?
I found the answer on stack about scrollRestoration function but I still don't understand how to make this work.
Could somebody help me to compile the js code below, add some css or html to fix this issue?
$(window).scrollTop(0);
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
function delay(n) {
n = n || 2000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
function pageTransition() {
var tl = gsap.timeline();
tl.to(".animate-this", {
duration: .2, opacity: 0, delay: 0, y: 30, //scale:0, delay: 0.2,
});
tl.to(".animate-this", {
duration: 0, opacity: 0, delay: 0, scale:0, //scale:0, delay: 0.2,
});
tl.fromTo(".loading-screen", {width: 0, left: 0}, {
duration: 1,
width: "100%",
left: "0%",
ease: "expo.inOut",
delay: 0.3,
});
tl.to("#svg-1", {
duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2,
});
tl.to(".loading-screen", {
duration: 1,
width: "100%",
left: "100%",
ease: "expo.inOut",
delay: 0, //CHANGE TIME HERE END TRANS
});
tl.set(".loading-screen", { left: "-100%", });
tl.set("#svg-1", { opacity: 1, y: 0 });
}
function contentAnimation() {
var tl = gsap.timeline();
tl.from(".animate-this", { duration: .5, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}
$(function () {
barba.init({
sync: true,
transitions: [
{
async leave(data) {
const done = this.async();
pageTransition();
await delay(2500);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
});
Have a look:
https://pasteboard.co/Ja33erZ.gif
Here also a codepen to check my issue (html,css):
https://codepen.io/cat999/project/editor/AEeEdg

scrollRestoration shouldn't be necessary, this can be done by resetting scroll position during the transition:
tl.fromTo(".loading-screen", {width: 0, left: 0}, {
duration: 1,
width: "100%",
left: "0%",
ease: "expo.inOut",
delay: 0.3,
onComplete: function() {
window.scrollTo(0, 0);
}
});
Working example here: https://codepen.io/durchanek/project/editor/ZWOyjE

This should be what you're looking for:
barba.hooks.enter(() => {
window.scrollTo(0, 0);
});
(can be found in the docs)

jQuery animations step by step

I have a small problem on my jQuery animation.
I want a button which change the width of a div from 100% to 72.5%. Next to this div could be another div which could fill the rest space (width 22.5%, 5% margin)
It could do following things step by step:
Div 1 get a border
div 1 change his width
div 2 get opacity and change his width
Here is my code:
var hidden = true;
function openEditMenu(){
var em = document.getElementById("editMenu");
var rf = document.getElementById("reportField");
if(hidden){
$({alpha:0}).animate({alpha:1}, {
duration: 1500,
step: function(){
rf.style.border ="1px solid rgba(0,0,0,"+this.alpha+")";
}
});
$("#editMenu").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},1000);
$(em).animate({width: "22.5%"},{ duration: 1000, queue: false });
$(rf).animate({width: "72.5%"},{ duration: 1000, queue: false });
$(rf).animate({marginRight: "5%"},{ duration: 1000, queue: false });
}
else{
$({alpha:1}).animate({alpha:0}, {
duration: 1000,
step: function(){
rf.style.border ="1px solid rgba(0,0,0,"+this.alpha+")";
}
});
$(em).animate({width: "0%"},{ duration: 1000, queue: false });
$(rf).animate({width: "100%"},{ duration: 1000 });
$(rf).animate({marginRight: "0%"},{ duration: 1000, queue: false });
$("#editMenu").css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0.0},1000);
}
hidden = !hidden;
}
Like you can see in the example now everything happens on the same time. But I want that everything works step by step.
var hidden = true;
function openEditMenu() {
var em = document.getElementById("editMenu");
var rf = document.getElementById("reportField");
if (hidden) {
$({
alpha: 0
}).animate({
alpha: 1
}, {
duration: 1500,
step: function() {
rf.style.border = "1px solid rgba(0,0,0," + this.alpha + ")";
}
});
$("#editMenu").css({
opacity: 0.0,
visibility: "visible"
}).animate({
opacity: 1.0
}, 1000);
$(em).animate({
width: "22.5%"
}, {
duration: 1000,
queue: false
});
$(rf).animate({
width: "72.5%"
}, {
duration: 1000,
queue: false
});
$(rf).animate({
marginRight: "5%"
}, {
duration: 1000,
queue: false
});
} else {
$({
alpha: 1
}).animate({
alpha: 0
}, {
duration: 1000,
step: function() {
rf.style.border = "1px solid rgba(0,0,0," + this.alpha + ")";
}
});
$(em).animate({
width: "0%"
}, {
duration: 1000,
queue: false
});
$(rf).animate({
width: "100%"
}, {
duration: 1000
});
$(rf).animate({
marginRight: "0%"
}, {
duration: 1000,
queue: false
});
$("#editMenu").css({
opacity: 1.0,
visibility: "visible"
}).animate({
opacity: 0.0
}, 1000);
}
hidden = !hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:inline-flex;width:100%;">
<div id="reportField" style="width:100%; height:50px; background-color:blue;">
a
</div>
<div id="editMenu" style="width:0%; height:50px; background-color:red; visibility: hidden;">
b
</div>
</div>
<button onclick="openEditMenu()">
</button>
I know this solution:
$('#id').animate(
{ left: new value },
duration, function() {
// Animation complete.
});
But it doesnt works on my alpha animation.

Jquery Error offset(...) is undefined

$('#add_to_cart_btn').unbind().on('click', function() {
//var cart = $('.cart_r');
var imgtodrag = $('#bzoom').find('img').eq(0);
if (imgtodrag) {
var imgclone = imgtodrag.clone().offset({
top: imgtodrag.offset().top, left: imgtodrag.offset().left
}).css({
'opacity': '0.5', 'position': 'absolute', 'height': '150px', 'width': '150px', 'z-index': '100'
}).appendTo($('body')).animate({
'top': $('.cart_r').top + 10, 'left': $('.cart_r').offset().left + 10, 'width': 75, 'height': 75
}, 1000, 'easeInOutExpo');
setTimeout(function () {
//cart.effect('shake', { times: 2 }, 200);
}, 1500);
imgclone.animate({
'width': 0, 'height': 0
}, function () {
$(this).detach();
});
$("html, body").animate({ scrollTop: 10 }, 1000);
}
return false;
});
show this error TypeError: $(...).offset(...) is undefined all ready add jquery.min.js but not working on any browser . any one can help me . Thanks in Advance

Lightbox - Next and Prev buttons

So I'm using this lightbox and I need to put Next and Previous buttons, but I don't know how. If someone can help me...
$(document).ready(function () {
$('.lightbox').click(function () {
// Get all following .box and .background until next .lightbox is met.
// So we can get the related contents.
var $targets = $(this).nextUntil('.lightbox', '.box, .background');
$targets.animate({
'opacity': '.50'
}, 500, 'linear')
$targets.filter('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$targets.css('display', 'block');
});
$('.close').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
$('.background').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
});
Here > https://jsfiddle.net/cuummyhx/

Close function not working in Jquery

I'm trying to close a pop-up DIV using a closing function with jquery, It worked before I added the position function of the DIV, and something I did must have broken the function... I'm guessing it's a syntax error somewhere, any fresh pair of eyes out there willing to take a look?
Thw working site is at www.masterfade.com/maptest
Here's the code:
$(document).ready(function () {
$('.lightbox').click(function (event) {
event.preventDefault();
$('.backdrop, #box').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box').css('display', 'block');
});
$('.lightbox2').click(function (event) {
event.preventDefault();
$('#box2').css({
left: function () {
return event.pageX - $(this).width();
},
top: function () {
return event.pageY - $(this).height();
}
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
});
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
$('.close').click(function () {
close_box();
});
$('.backdrop').click(function () {
close_box();
});
function close_box() {
$('.backdrop, #box, #box2').animate({
'opacity': '0'
}, 300, 'linear', function () {
$('.backdrop, #box, #box2').css('display', 'none');
});
}

I think your event bindings and animation functions are call before DOM elements load. So event bindings will not work.
I hope the following codes will work.
$(document).ready(function () {
$('.lightbox').click(function (event) {
event.preventDefault();
$('.backdrop, #box').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box').css('display', 'block');
});
$('.lightbox2').click(function (event) {
event.preventDefault();
$('#box2').css({
left: function () {
return event.pageX - $(this).width();
},
top: function () {
return event.pageY - $(this).height();
}
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
// following lines are edited
$('.close,.backdrop').click(close_box);
function close_box() {
$('.backdrop, #box, #box2').animate({
'opacity': '0'
}, 300, 'linear', function () {
$('.backdrop, #box, #box2').css('display', 'none');
});
}
});

so,
i browsed to your website, and with Google Chrome Developer Tools (Console) iv'e manually called $('.lightbox').click() and close_box() and it seems that it's working as excepted and no javascript exception were thrown.
however, i'm not sure that you even understand what's not working.
i highly suggest you to use Chrome browser with developer tools, it will make your life way easier regarding web development.
using this you could monitor javascript errors and debug your code line by line.
good luck