changing the url without loading a new page

Question

For my single page website, I have an index of projects. If a project is clicked it opens up a slideshow on the same page. So basically, I only have one URL, and if anyone wants to link to a specific project, they can't.

I'm trying to make it so that if I click on a project, it changes the URL. And so that URL can be used to get to my website with that project opened.

Here is a link to what I have so far.

For reference, I'm trying to achieve something that is found on this site.

I found some good suggestions here, but what happens when I use something like this (below), a new URL is created but it doesn't open up the project if I renter that URL into the browser.

<a href="#" id='click'>Click to change url to bar.html</a>

<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
   history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>

score 1 · Answer 1 · answered Jun 27 '16 at 01:54

function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

You can use `window.onpopstate to sense the back/forward button navigation

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

I would appreciate someone with more skill to check this over for me

Could you please help me implement this? I just tried adding this to my js code but it doesn't do anything — Alex Khomyakov, Jun 28 '16 at 08:59

guest271314 · Answer 2 · 2016-06-27T01:59:21.603

0

You can use id at elements which has slideshow as unique URL; at .ready() start animation of element where id matches .location.hash

$().ready(function() {
  // `location.hash`: `id`: `#slideshow1` of element linked to
  // from, e.g., `http://example.com/#slideshow1`
  var currentSlideshow = $(location.hash);
  // do slideshow stuff at `currentSlideshow`: `#slideshow1` element
})

edited Jun 27 '16 at 01:59

answered Jun 27 '16 at 01:54

guest271314

1
10
82
156

score 0 · Answer 3 · answered Jun 27 '16 at 02:10

using a hash might work best in this case

$(document).ready(function({

    //loading a page
    var project = window.location.hash 
    yourProjectLoadFunction(project);        

    //setting a url
    $('.number').click(function(e){ 
        $this = $(this);
        window.location.hash = $this.attr('id');
    });
});

changing the url without loading a new page

3 Answers3