0

I'm trying to build something similar to this signup form.

Basically when you go through the steps, the whole page changes (probably just a div that disapears and another one that appears instead).

The problem is I can't seem to figure out what they are using to be able to change the whole page AND the url. What I mean by that is I can easily hide an div and make another one appear with javascript but that won't give me the URL effect I am looking for as I want the user to be able to use the back/forward buttons to navigate back and forth through the steps.

Any idea what external technologies they might be using or if it is simply something totally custom as their script custom form attribute suggest it (data-step) :

First step : 

<form id="signup_form" class="fs_split_flex_wrapper" data-step="email">

Second step : 

<form id="signup_form" class="fs_split_flex_wrapper" data-step="email">
phadaphunk
  • 12,785
  • 15
  • 73
  • 107
  • Is it so hard to google "javascript change url without reload"? See [Modify the URL without reloading the page](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page). – Michał Perłakowski Jan 18 '16 at 22:03
  • And what is so strange about changing the whole page? Just create some elements with `position: fixed; width: 100%; height: 100%;` and change their visibility using JavaScript. – Michał Perłakowski Jan 18 '16 at 22:07

1 Answers1

2

Take a look at the History API in JS: https://developer.mozilla.org/en-US/docs/Web/API/History_API

Quote: "Suppose http://mozilla.org/foo.html executes the following JavaScript:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

This will cause the URL bar to display http://mozilla.org/bar.html, but won't cause the browser to load bar.html or even check that bar.html exists."

NikxDa
  • 4,137
  • 1
  • 26
  • 48