Can I force WebKit browsers to show the fragment identifier?

Question

I'm using jQuery and the fragment identifier to create a state change depending on which part of a one-page site the user is currently looking at.

I've finally got this to work but as both Safari and Chrome won't display the fragment identifier I can't make it into a variable and therefore the system breaks down.

Is there a way to force this action specifically for WebKit browsers or another way to access the fragment?

edit: added code below

(function($){
$.fn.sectionMove = function() {

    return this.each(function() {          
    $(this).click(function() {
            if(window.location.hash){
                  var $hash = window.location.hash;
            } else if (!window.location.hash) {
                  var $hash = '#section1';
            }
            $n = $hash.substring($hash.length-1,$hash.length);

            $("div#headerNav ul li:nth-child(" + $n + ") a").removeClass('on');

            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
            }, 1000,'easeInOutExpo', function(){
                var $hash = window.location.hash;
                $n = $hash.substring($hash.length-1,$hash.length);
                $("div#headerNav ul li:nth-child(" + $n + ") a").addClass('on');
            });
            event.preventDefault(); 
        });
     });

   };
})(jQuery);

And what jQuery are you using; can **we** have a look at it? — David Thomas, Oct 29 '10 at 16:15
no worries (it's just that it helps us to help you if we can see what you're working with), and if you respond to someone in comments prefixing their display-name (in my case either 'David' or 'David Thomas') with the `@` symbol lets me know that there's a response. And, also, welcome to Stackoverflow! =) — David Thomas, Oct 29 '10 at 16:44

score 1 · Accepted Answer · answered Oct 29 '10 at 21:32

I've managed to solve it myself. The problem was with the following lines of my jquery:

$('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top

Whilst that did allow smooth scrolling to take place on the page, it navigated to the anchor without updating the url with the fragment identifier.

If anybody is interested in how to accomplish the same thing then the below code should help. I modified it for my own needs but credit has to go to Arial Flesler (http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links)

function filterPath(a) {
        return a.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '')
    }

    var e = filterPath(location.pathname);
    var f = scrollableElement('html', 'body');
    $('a[href*=#]').each(function () {
        var b = filterPath(this.pathname) || e;
        if (e == b && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {
            /*var anchor1 = window.location.hash; */
            var c = $(this.hash),
                target = this.hash;
            if (target) {
                var d = c.offset().top;
                $(this).click(function (a) {        

                    a.preventDefault();
                    $(f).animate({
                        scrollTop: d
                    }, 1000,'easeInOutExpo', function () {
                        location.hash = target
                        $("div#headerNav ul li a").removeClass('on');

                        $n = target.substring(target.length-1,target.length);
                        $("div#headerNav ul li:nth-child(" + $n + ") a").addClass('on');

                    })
                })
            }
        }
    });

Can I force WebKit browsers to show the fragment identifier?

1 Answers1