CODEWITHSUNDEEP
javascriptjqueryhtmlcss
YSK .CO
YSK .CO

Reputation: 164

change url to reflect content on the page hidden / displayed with Javascript

I am currently making a website for an architecture firm, HLArchitects. In the projects page I have created an HTML / Javascript image gallery. slightly above the main big image to the right an option can be found to choose between images / information. I use Jquery to show and hide the information or the images, however i don't feel this is such a great way to do so. It can be viewed here for reference: http://www.hla.co.za/projects/Hyuandai_Training_Centre/ Here is the relevant Javascript: 

$(".selector a").click(function(){
    if ($(this).attr("data-show") == "images") {
        $("#info").fadeOut("fast");
        $("#displayImg").fadeIn("fast");
        $("#imageFlow").fadeIn("fast");
    } else if ($(this).attr("data-show") == "info") {
        $("#displayImg").fadeOut("fast");
        $("#imageFlow").fadeOut("fast");
        $("#info").fadeIn("fast");
    }
})

Relevant HTML: 

<p class="selector"><a href="#" onclick="return false;" data-show="images">images</a> | <a href="#" onclick="return false;" data-show="info">information</a></p>

My problem is that the url does not change to reflect the content, but I do not want to make a separate page. I could imagine i would need to make use of link anchor's but am not to sure how to do so.

Thank you in advance

Upvotes: 0

Views: 264

Answers (2)

jackfrankland
jackfrankland

Reputation: 2062

You can change the hash of an url by using:

window.location.hash = 'images';

EDIT:

Firstly, in this context you don't need to include the hash symbol!

Secondly, I missed the obvious, you only need to change the HTML to this to update the URL correctly:

<p class="selector">
    <a href="#images">images</a>
    <a href="#information">information</a>
</p>

Then you can use the following in your jQuery, note I've included the attribute check inside the selector itself:

$(".selector a[href=#images]").click(function() {
    $("#info").fadeOut("fast");
    $("#displayImg").fadeIn("fast");
    $("#imageFlow").fadeIn("fast");
});

$(".selector a[href=#info]").click(function() {
    $("#displayImg").fadeOut("fast");
    $("#imageFlow").fadeOut("fast");
    $("#info").fadeIn("fast");
});

If you want to refresh the page and get the same content, you can check the hash tag by doing the following (you may need to edit this depending what elements are showing initially):

$(document).ready(function() {
    if (window.location.hash == '#images') {
        $("#info").hide();
        $("#displayImg").show()
        $("#imageFlow").show();
    }
    else if (window.location.hash == '#info') {
        $("#displayImg").hide();
        $("#imageFlow").hide();
        $("#info").show();
    }
});

Upvotes: 1

kei
kei

Reputation: 20521

If all you're doing is setting text in the URL, you can do this easily by setting location.hash

location.hash="#SomeTextHereThatMayOrMayNotNecessarilyBeAnAnchor"

^ Note that "#" is important

Upvotes: 0

Related Questions