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

Question

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

jackfrankland · Accepted Answer · 2014-04-09 23:15:37Z

1

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

edited Apr 9, 2014 at 23:15

answered Apr 9, 2014 at 18:48

jackfrankland

2,0521 gold badge14 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

YSK .CO Over a year ago

Thank you but where would I declare this window.location.hash

kei · Accepted Answer · 2014-04-09 18:49:47Z

0

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

answered Apr 9, 2014 at 18:49

kei

20.5k2 gold badges38 silver badges64 bronze badges

2 Comments

YSK .CO Over a year ago

Thank you, this is what Im looking for. I have done this and made when I click info location.hash= '#info' but then when i refresh the page with that #info at the end, it does not load up information. Rather the default images

kei Over a year ago

Your code will have to change then to accommodate this change. That or you can just use a gallery script that someone already created with your specifications e.g. wesbos.com/jquery-cycle-link-within-hashchange

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related