Styjun

What do you call the action of "describing events as they happen" like sports anchors do?

Idiom for 'person who gets violent when drunk"

Nth term of Van Eck Sequence

Print "N NE E SE S SW W NW"

What is the language spoken in Babylon?

My mom's return ticket is 3 days after I-94 expires

If the pressure inside and outside a balloon balance, then why does air leave when it pops?

How to soundproof the Wood Shop?

Is it true that "only photographers care about noise"?

Can I attach a DC blower to intake manifold of my 150CC Yamaha FZS FI engine?

Is it advisable to add a location heads-up when a scene changes in a novel?

How can religions without a hell discourage evil-doing?

Purpose of cylindrical attachments on Power Transmission towers

Is plausible to have subspecies with & without separate sexes?

Is fission/fusion to iron the most efficient way to convert mass to energy?

Is all-caps blackletter no longer taboo?

In Pandemic, why take the extra step of eradicating a disease after you've cured it?

In The Incredibles 2, why does Screenslaver's name use a pun on something that doesn't exist in the 1950s pastiche?

Simple log rotation script

Are skill challenges an official option or homebrewed?

Why is isotope an issue in reading mass spectra?

Why did the Death Eaters wait to reopen the Chamber of Secrets?

Why is my Taiyaki (Cake that looks like a fish) too hard and dry?

Part of my house is inexplicably gone

Barba.js for page transitions Error: “failed push state attempt”

Change page transition on the same pageAnimate selector/state transitionsDynamically loaded CSS having no effect in a Windows 8 appHow to rewrite functions to perform reset and stop with one button clickHow can I insert html code inside a javascript value?Change Pages with TransitionAttempting to add listener to barba.jsUnwanted overlay of java script picture slide animation with website headerWhen i m Send Ajax Request in my web Application then controller side it give me script in request parameter in laravelJavaScript file doesn't load after page transition with barba.js

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

3

I am experimenting Barba.js for page transitions. When I try to run this code I get a "Blocked attempt to use history.pushState() to change session history URL" error message. I believe it has to do with the DOM. I am a JS newbie, any help would be greatly appreciated. Below I have attached the code. Thanks!

HTML:

 <div id="barba-wrapper">
 <div class="barba-container">

 <div class="page1">
 <h1>Welcome to Homepage</h1>
 <a href="about/index.html">About</a>
 </div>
 </div>
</div>

HTML:

 <div id="barba-wrapper">
 <div class="barba-container">

 <div class="page2">
 <h1>Welcome to About</h1>
 <a href="../index.html">Home</a>
 </div>
 </div>
 </div>

JS:

Barba.Pjax.start();


var FadeTransition = Barba.BaseTransition.extend(
 start: function() 

Promise
 .all([this.newContainerLoading, this.fadeOut()])
 .then(this.fadeIn.bind(this));
 ,

 fadeOut: function() 

 ,

 fadeIn: function() 
this.newContainer.classList.add("slide-in"); //ABOUT

var that = this;

this.newContainer.addEventListener("animationend", function()
 that.newContainer.classList.remove("slide-in");
 that.done();
 );
 
);



Barba.Pjax.getTransition = function() 

 return FadeTransition;
;

CSS:

*

 margin: 0;
 padding: 0;
 box-sizing: border-box;

body

 font-family: sans-serif;
 overflow: hidden;

.page1,
.page2
 
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 color: white;
 width: 100%;
 flex-direction: column;
 position: absolute;

a
 color: white;
 text-decoration: none;
 margin-top: 50px;
 border: 1px solid white;
 padding: 10px 30px;

.page1

 background-color: rgb(129, 60, 146);

.page2

 background-color: rgb(73, 60, 146);


.slide-in

 animation: slide-in 0.5s ease forwards;


@keyframes slide-in

 from
 
 transform: translateX(100%);
 visibility: visible;
 
 to
 
 transform: translateX(0%);
 

javascript transition barbajs

share|improve this question

asked Mar 25 at 0:07

EricEric

182

add a comment | 

3

I am experimenting Barba.js for page transitions. When I try to run this code I get a "Blocked attempt to use history.pushState() to change session history URL" error message. I believe it has to do with the DOM. I am a JS newbie, any help would be greatly appreciated. Below I have attached the code. Thanks!

HTML:

 <div id="barba-wrapper">
 <div class="barba-container">

 <div class="page1">
 <h1>Welcome to Homepage</h1>
 <a href="about/index.html">About</a>
 </div>
 </div>
</div>

HTML:

 <div id="barba-wrapper">
 <div class="barba-container">

 <div class="page2">
 <h1>Welcome to About</h1>
 <a href="../index.html">Home</a>
 </div>
 </div>
 </div>

JS:

Barba.Pjax.start();


var FadeTransition = Barba.BaseTransition.extend(
 start: function() 

Promise
 .all([this.newContainerLoading, this.fadeOut()])
 .then(this.fadeIn.bind(this));
 ,

 fadeOut: function() 

 ,

 fadeIn: function() 
this.newContainer.classList.add("slide-in"); //ABOUT

var that = this;

this.newContainer.addEventListener("animationend", function()
 that.newContainer.classList.remove("slide-in");
 that.done();
 );
 
);



Barba.Pjax.getTransition = function() 

 return FadeTransition;
;

CSS:

*

 margin: 0;
 padding: 0;
 box-sizing: border-box;

body

 font-family: sans-serif;
 overflow: hidden;

.page1,
.page2
 
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 color: white;
 width: 100%;
 flex-direction: column;
 position: absolute;

a
 color: white;
 text-decoration: none;
 margin-top: 50px;
 border: 1px solid white;
 padding: 10px 30px;

.page1

 background-color: rgb(129, 60, 146);

.page2

 background-color: rgb(73, 60, 146);


.slide-in

 animation: slide-in 0.5s ease forwards;


@keyframes slide-in

 from
 
 transform: translateX(100%);
 visibility: visible;
 
 to
 
 transform: translateX(0%);
 

javascript transition barbajs

share|improve this question

asked Mar 25 at 0:07

EricEric

182

add a comment | 

I am experimenting Barba.js for page transitions. When I try to run this code I get a "Blocked attempt to use history.pushState() to change session history URL" error message. I believe it has to do with the DOM. I am a JS newbie, any help would be greatly appreciated. Below I have attached the code. Thanks!

HTML:

 <div id="barba-wrapper">
 <div class="barba-container">

 <div class="page1">
 <h1>Welcome to Homepage</h1>
 <a href="about/index.html">About</a>
 </div>
 </div>
</div>

HTML:

 <div id="barba-wrapper">
 <div class="barba-container">

 <div class="page2">
 <h1>Welcome to About</h1>
 <a href="../index.html">Home</a>
 </div>
 </div>
 </div>

JS:

Barba.Pjax.start();


var FadeTransition = Barba.BaseTransition.extend(
 start: function() 

Promise
 .all([this.newContainerLoading, this.fadeOut()])
 .then(this.fadeIn.bind(this));
 ,

 fadeOut: function() 

 ,

 fadeIn: function() 
this.newContainer.classList.add("slide-in"); //ABOUT

var that = this;

this.newContainer.addEventListener("animationend", function()
 that.newContainer.classList.remove("slide-in");
 that.done();
 );
 
);



Barba.Pjax.getTransition = function() 

 return FadeTransition;
;

CSS:

*

 margin: 0;
 padding: 0;
 box-sizing: border-box;

body

 font-family: sans-serif;
 overflow: hidden;

.page1,
.page2
 
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 color: white;
 width: 100%;
 flex-direction: column;
 position: absolute;

a
 color: white;
 text-decoration: none;
 margin-top: 50px;
 border: 1px solid white;
 padding: 10px 30px;

.page1

 background-color: rgb(129, 60, 146);

.page2

 background-color: rgb(73, 60, 146);


.slide-in

 animation: slide-in 0.5s ease forwards;


@keyframes slide-in

 from
 
 transform: translateX(100%);
 visibility: visible;
 
 to
 
 transform: translateX(0%);
 

javascript transition barbajs

share|improve this question

asked Mar 25 at 0:07

EricEric

182

 <div id="barba-wrapper">
 <div class="barba-container">

 <div class="page1">
 <h1>Welcome to Homepage</h1>
 <a href="about/index.html">About</a>
 </div>
 </div>
</div>

 <div id="barba-wrapper">
 <div class="barba-container">

 <div class="page2">
 <h1>Welcome to About</h1>
 <a href="../index.html">Home</a>
 </div>
 </div>
 </div>

Barba.Pjax.start();


var FadeTransition = Barba.BaseTransition.extend(
 start: function() 

Promise
 .all([this.newContainerLoading, this.fadeOut()])
 .then(this.fadeIn.bind(this));
 ,

 fadeOut: function() 

 ,

 fadeIn: function() 
this.newContainer.classList.add("slide-in"); //ABOUT

var that = this;

this.newContainer.addEventListener("animationend", function()
 that.newContainer.classList.remove("slide-in");
 that.done();
 );
 
);



Barba.Pjax.getTransition = function() 

 return FadeTransition;
;

*

 margin: 0;
 padding: 0;
 box-sizing: border-box;

body

 font-family: sans-serif;
 overflow: hidden;

.page1,
.page2
 
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 color: white;
 width: 100%;
 flex-direction: column;
 position: absolute;

a
 color: white;
 text-decoration: none;
 margin-top: 50px;
 border: 1px solid white;
 padding: 10px 30px;

.page1

 background-color: rgb(129, 60, 146);

.page2

 background-color: rgb(73, 60, 146);


.slide-in

 animation: slide-in 0.5s ease forwards;


@keyframes slide-in

 from
 
 transform: translateX(100%);
 visibility: visible;
 
 to
 
 transform: translateX(0%);
 

share|improve this question

asked Mar 25 at 0:07

EricEric

182

share|improve this question

asked Mar 25 at 0:07

EricEric

182

asked Mar 25 at 0:07

EricEric

182

asked Mar 25 at 0:07

EricEric

182

1 Answer
1

active

oldest

votes

0

Make sure to run your code using a webserver, otherwise you can't use push state.

share|improve this answer

answered Mar 26 at 9:01

Luigi De RosaLuigi De Rosa

550211

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55329783%2fbarba-js-for-page-transitions-error-failed-push-state-attempt%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Make sure to run your code using a webserver, otherwise you can't use push state.

share|improve this answer

answered Mar 26 at 9:01

Luigi De RosaLuigi De Rosa

550211

add a comment | 

0

Make sure to run your code using a webserver, otherwise you can't use push state.

share|improve this answer

answered Mar 26 at 9:01

Luigi De RosaLuigi De Rosa

550211

add a comment | 

Make sure to run your code using a webserver, otherwise you can't use push state.

share|improve this answer

answered Mar 26 at 9:01

Luigi De RosaLuigi De Rosa

550211

share|improve this answer

answered Mar 26 at 9:01

Luigi De RosaLuigi De Rosa

550211

answered Mar 26 at 9:01

Luigi De RosaLuigi De Rosa

550211

answered Mar 26 at 9:01

Luigi De RosaLuigi De Rosa

550211