Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

I cant get it working #30

Closed
Ehmo6152 opened this issue Aug 23, 2018 · 8 comments
Closed

I cant get it working #30

Ehmo6152 opened this issue Aug 23, 2018 · 8 comments

Comments

@Ehmo6152
Copy link

Ehmo6152 commented Aug 23, 2018 •
edited by gmrchk

I am a beginner at javascript, so I am probably doing something obviously wrong. I have tried trying to set up the swup on a simply test page but I still cant get it working. I would really like to get this one to work. Thanks in advance.

The test page im working with is: futsoc.co/page1.html

Here is my html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="assets/css/swup-settings.css">
</head>

<body>
<header>
	<nav>
 		<ul>
  			<li> <a href="page1.html">Page 1</a> </li>
  			<li> <a href="page2.html">Page 2</a> </li>
  			<li> <a href="page3.html">Page 3</a> </li>
		</ul>
	</nav>
</header>
<main id="swup">
	<h1 class="a-fade">Page 1</h1>
	<p>Ab aperiam architecto dolores ducimus ea fugit illo impedit in inventore iste laborum magni maxime, minima mollitia necessitatibus, nostrum officia pariatur praesentium qui quod repellat repudiandae tempore tenetur ut vel.</p>
	</main>
	<script src="assets/js/swup.js"></script> 
	<script src="assets/js/swup-settings.js"></script>
</body>

Here is my css:

.a-fade {
    transition: .4s;
    opacity: 1;
}
html.is-animating .a-fade{
    opacity: 0;
}

and here is my javascript:

let options = {
    LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]',
    FORM_SELECTOR: 'form[data-swup-form]',
    elements: [
        '#swup'
    ],
    animationSelector: '[class^="a-"]',
    cache: true,
    pageClassPrefix: '',
    scroll: true,
    debugMode: false,
    preload: true,
    support: true,
    disableIE: false,
    skipPopStateHandling: function(event){
        if (event.state && event.state.source == "swup") {
            return false;
        }
        return true;
    },
};
var swup = new Swup(options);
@Ehmo6152
Copy link
Author

Ive tried redoing the code again to see if maybe I made some kind of simple error, but no luck. I really want to get this one to work because I tried barbajs, but it doesnt react well with my other scripts and im not savy enough to troubleshoot that, I thought this one would be the perfect fit.

@gmrchk
Copy link
Member

gmrchk commented Aug 26, 2018

FYI - I have edited your question so the code is displayed correctly, so we can figure this out easier.

First thing that caught my eye is that your links href attributes don't start with /, while the option

LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]',

selects only links where href attribute start with the / or # symbol. You can change your links to href="/page1.html" format. However, as you are most likely just opening the file in the browser without any server, that would lead to completely other destination in your file system.

As you are only trying it out, I would suggest changing the option to select all links for now.

LINK_SELECTOR: 'a'

You probably know this, but just to be clear, the options mentioned in the documentation are default values for swup, so you do not have to copy/define all of them, only the ones you would like to change. This should be enough for you for now.

let options = {
    LINK_SELECTOR: 'a',
    debugMode: true,
};
var swup = new Swup(options);

@Ehmo6152
Copy link
Author

@gmrchk Thankyou, i love simple solutions like that, but feel so dumb when i miss it lol.... new issue, it is showing the animations, but it is not loading the next page. it just animates the object then stops.

@gmrchk
Copy link
Member

gmrchk commented Aug 26, 2018

Can you post what the console says?

@Ehmo6152
Copy link
Author

Ehmo6152 commented Aug 26, 2018 •
edited

@gmrchk I get:

Failed to load "file path"/page2.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

and

swup.js:675 Uncaught TypeError: Cannot read property 'innerText' of null
    at Swup.module.exports [as getDataFromHtml] (swup.js:675)
    at swup.js:1341
    at XMLHttpRequest.request.onreadystatechange (swup.js:708)
    at Swup.module.exports [as getPage] (swup.js:717)
    at swup.js:1335
    at new Promise (<anonymous>)
    at Swup.linkMouseoverHandler (swup.js:1334)
    at HTMLBodyElement.<anonymous> (swup.js:941)

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL '"file path"/page2.html' cannot be created in a document with origin 'null' and URL '"file path"/page1.html'.
    at Swup.module.exports [as createState] ("file path"/swup.js:437:20)
    at Swup.module.exports [as loadPage] ("file path"/swup.js:606:14)
    at Swup.linkClickHandler ("file path"/swup.js:1318:26)
    at HTMLDocument.<anonymous> ("file path"/swup.js:941:22)

@gmrchk
Copy link
Member

gmrchk commented Aug 26, 2018

Right... That's the issue related to the server (you are opening file with the protocol file, not http/s), where you cannot make requests with JavaScript.
I you have some server running on localhost, use that, or I would suggest this simple server that you can start from your folder.

Also, add the / at the beggining of your href attributes and you should be good to go.

@Ehmo6152
Copy link
Author

@gmrchk ok I figured it out, I uploaded it to my host server and it's working beautifully! Thanks a lot for the help!

Here is what I did with it: futsoc.co

If you think I could do anything better I will gladly accept any opinions. Thanks again!

@natdev
Copy link

natdev commented Apr 19, 2019

I have the same issue but im using wamp. Can you help me?

@arthurdjn arthurdjn mentioned this issue Sep 24, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gmrchk @natdev @Ehmo6152