CODEWITHSUNDEEP
javascriptjqueryhtmlcssurl
Alex Khomyakov
Alex Khomyakov

Reputation: 13

changing the url without loading a new page

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>

Upvotes: 0

Views: 126

Answers (3)

Mike Johnson Jr
Mike Johnson Jr

Reputation: 796

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');
    });
});

Upvotes: 0

guest271314
guest271314

Reputation: 1

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
})

Upvotes: 0

Bradley Dale
Bradley Dale

Reputation: 23

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

Upvotes: 1

Related Questions