Question

Here is my situation. I have a webpage (not quite finished):

http://grapplingbasics.com/beta.php

I have the page slide to a specific div which puts a a url with a hash in the URL bar. If the user refers to this URL they can hit that specific part of the page.

However, I would like to allow them to hit that part of the page AND load a specific video with one address.

It doesn’t seem that you can put a query string and hash dealy together like so: http://www.blah.com/index.php#BLAH?neat=one

originally i tried turning the hash into part of the querystring, and then using split in jquery to assign it into a hash on the fly. However, the problem with this, is that if I return false to the nav, it wont show the querystring on the URL bar, and if i don’t return false, then it wants to navigate to something that isnt there!

What’s a possible solution here?

Answer 1

I created a little example for you which should explain how you can get this fixed.

 <script type="text/javascript">

    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
            return "";
        else
            return decodeURIComponent(results[1].replace(/\+/g, " "));
    }


    $(function () {
        $('a').click(function (event) {

            var thisHash = document.location.hash;

            $('body').animate({ scrollTop: $(thisHash).offset().top }, function () {
                if (getParameterByName('neat') != null) {
                    alert('I will play video ' + getParameterByName('neat'));
                }
            });
        });
    });

</script>

Html:

<a href='?neat=one#end'>Go</a>

<p id='end'>Imagine this is a panel you are going to in your example.</p>

The code above firstly has a getParameterByName function which looks into your URL to find your query string value pairs. and if its not null it returns its value.

in the section below that …imagine that the anchor tag is your navigation and I clicked on it, then the page animates to the correct hash section. Once the animation is completed in the callback section is asks for the query string value. if it you have set a value for “neat” then your code for playing the video should sit where the alert is now.