jquery How to hide hash in url

Question

I know this question was asked a couple of times but I'm a total jQuery novice and have no clue how to handle this issue.

I'm using a slidedown menu on my site: http://ms.nordfire.de/fuchsbau16/ When I'm triggering the menu button, "#0" gets appended to my URL. Is there any way I can get rid of the hashtag appended to my URL?

Thats the jquery code I'm using:

jQuery(document).ready(function($){

//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well
var MQL = 1170;

//primary navigation slide-in effect
if($(window).width() > MQL) {
    var headerHeight = $('.cd-header').height();
    $(window).on('scroll',
    {
        previousTop: 0
    }, 
    function () {
        var currentTop = $(window).scrollTop();
        //check if user is scrolling up
        if (currentTop < this.previousTop ) {
            //if scrolling up...
            if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
                $('.cd-header').addClass('is-visible');
            } else {
                $('.cd-header').removeClass('is-visible is-fixed');
            }
        } else {
            //if scrolling down...
            $('.cd-header').removeClass('is-visible');
            if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');
        }
        this.previousTop = currentTop;
    });
}

//open/close primary navigation
$('.cd-primary-nav-trigger').on('click', function(){
    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open');

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if( $('.cd-primary-nav').hasClass('is-visible') ) {
        $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').removeClass('overflow-hidden');
        });
    } else {
        $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').addClass('overflow-hidden');
        }); 
    }
});

});

AJ X. · Answer 1 · 2016-01-07T00:50:36.813

You need to prevent the default "click" behavior for the link like so:

$('.cd-primary-nav-trigger').on('click', function(e){
    e.preventDefault();

    $('.cd-menu-icon').toggleClass('is-clicked'); 
    $('.cd-header').toggleClass('menu-is-open');

    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if( $('.cd-primary-nav').hasClass('is-visible') ) {
        $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').removeClass('overflow-hidden');
        });
    } else {
        $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
            $('body').addClass('overflow-hidden');
        }); 
    }
});

Note the e in the callback function. You need to include the reference to the event that is being fired so you can modify it.

Maru · Answer 2 · 2016-01-07T01:13:57.613

2

In your JS you will have to add

$('.cd-primary-nav-trigger').on('click', function(e){
    e.preventDefault(); // prevents page redirection

The e.preventDefault(); prevents the default HTML-behavior which would reload your entire site.

Additionally you might edit your HTML. Look at the anchors:

<nav>
    <ul class="cd-secondary-nav">
        <li><a href="#0">Quicklink 01</a></li>
        <li><a href="#0">Quicklink 02</a></li>
        <li><a href="#0">Quicklink 03</a></li>
    </ul>
</nav>

They contain your #0. You should make the page non-js friendly by inserting real URLs so people who disabled JS can also browse your site (and even won't get #0)

edited Jan 07 '16 at 01:13

answered Jan 07 '16 at 00:39

Maru

894
1
12
29

This answer may get down voted, mine got down voted when I suggested to the OP to change his HTML like you. – Script47 Jan 07 '16 at 00:43
It really depends if the there is a real location that exists. If there isn't and JS fails, then you'll be shooting users off to a 404 instead of keeping them on your page. Edit: @Script47 just to be clear, I didn't downvote your answer. Just devil's advocate in this specific case. – AJ X. Jan 07 '16 at 00:46
The question is about preventing the hash to be part of the url. Not how he should design the rest of his site. The second part of your answer is correct however the first part is unnecessary. _"Howto avoid hashtags? Easy, just remove them"_ – E. Sundin Jan 07 '16 at 00:48
@E.Sundin if the advice we give improves the design of the website then why shouldn't it be suggested? Also if by fixing the design it also fixes the issue then again, what is the issue? I see no cons there, only pros. – Script47 Jan 07 '16 at 00:50
Well, the first part will indeed remove the hash tags from the address bar. Why would it be incorrect? – Maru Jan 07 '16 at 00:52
@MarcoAlka It's formulated as a jQuery problem which is clear from his question. I don't think your answer is incorrect but the structure of your answer suggests that the HTML is the main issue. It's more opinion rather then an appropriate answer. You do state that the _HTML is the issue_ and that he should _additionally_ fix the JS while the fixes in JS would suffice. – E. Sundin Jan 07 '16 at 01:11
The HTML *is* the issue though! If the `#` wasn't in the HTML, would it show up in the URL? No. Ipso facto the HTML is the issue and it can be fixed through the HTML. – Script47 Jan 07 '16 at 01:15
@E.Sundin Well, you are right about JS being the focus, so I edited my answer to reflect that. About the other thing: My opinion is that he wanted a more general idea on how to solve the problem by giving us a link to the site instead of just HTML+JS. So I posted a general improvement in order to solve the problem in all instances and remove the root problem instead of just patching it somehow. – Maru Jan 07 '16 at 01:18
@Script47 If the `#` wasn't used by href in the HTML the page would reload when clicked and the jQuery listener would not function as intended. @MarcoAlka I see. I did not consider that. :-) – E. Sundin Jan 07 '16 at 01:33

jquery How to hide hash in url

2 Answers2