Can't remove hashtag from url after click event

Question

I tried almost every solution i found from this website and from other but with no success. What i am doing is rotating a button using CSS3 animation. I am doing this by having the button linked(using "a" element) and then enabling the animation using the pseudo element :target(almost equal to onclick event works in this case).

My problem is that when i click to the button at the first time a hash-tag(#btnq1 in my case) is being added to the URL.

Now, the actual problem, is that i cannot remove this hash-tag when i reload the whole page or if i want to click to that button one more time and re-run the animation. I tried solutions from some Stackoverflow questions like this or this but didn't got any good result.

See below my code:

You can ignore the initial phase of the animation named q1. HTML code:

<header>
<div id="title">
Just a title
</div>
</header>

<main>
Not important text

<div id="q1">
<div class="q1once">
<a href="#btnq1"><button type="button" name="" value="" id="btnq1">Click to rotate</button></a>
</div>
</div>
</main>

CSS code:

#q1{
    height:100%;
    }

.q1once{
    width:20%;
    height:15%;
    position:absolute;
    left:-50%;
    animation-name:q1;
    animation-delay:3s;
    animation-iteration-count:1;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    }

#btnq1:target{
    animation-name:q1leave;
    animation-iteration-count:1;
    animation-duration:4s;      
    }

@keyframes q1{
50%{
    transform:translate(440%) scaleX(3);
    }
100%{
    transform:translate(450%) scale(1.5,2);
    }
}
@keyframes q1leave{
    0%{transform:rotate(0deg);
        opacity:1;
        }
    100%{
        opacity:0;
        transform:rotate(360deg);
        }

}

You can check my updated jsfiddle as well.

Adding window.location.hash='' on load of the page is a good partial solution because it removes the hashtag when i reload the page. However, it doesn't remove the hashtag after i click at the button at the first time. I want this to happen in order to be able to rotate the button more than once.

@IzaazYunus Just added it. Although, it's the same as the code shown above. — Dchris, Apr 22 '14 at 00:59
Your code just renders text. I don't see a link. Is it just me? — Michael, Apr 22 '14 at 01:09
@Mike Button is being used as a "link" in order to enable animation using :target pseudo element. You can check that is working using the jsfiddle — Dchris, Apr 22 '14 at 01:12
I'm not sure why you put the hashtag in the link in the first place, but you must have a good reason. Maybe [this could help](http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/) — Alon Dahari, Apr 22 '14 at 01:20
@climbinghobo My best answer is that this worked for me so far.. — Dchris, Apr 22 '14 at 01:22
@kennypu there is a delay of 3 seconds to the animation. just wait few — Dchris, Apr 22 '14 at 01:27
i've had it open for a while, all i see is: `To watch a movie or not fwe34` — kennypu, Apr 22 '14 at 01:28
@climbinghobo I am trying to use your link but no success so far. Is this working in all browers? Can you provide a jsfiddle or full code using your solution? — Dchris, Apr 22 '14 at 01:28
samething, are you testing to make sure it works? from inspect element, the button is way off to the left and is unclickable. — kennypu, Apr 22 '14 at 01:31
@kennypu Just updated jsfiddle for the last time to be sure you will be able to see it working properly. Please re-check — Dchris, Apr 22 '14 at 01:33
there's the problem, `@keyframes` is supported only IE10, firefox, and opera. you need the -webkit prefix for chrome and safari — kennypu, Apr 22 '14 at 01:35
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/51144/discussion-between-dchris-and-kennypu) — Dchris, Apr 22 '14 at 01:37
if we were to answer the title, you can just run `window.location.hash=''` on load of the page — kennypu, Apr 22 '14 at 01:41
@kennypu i am using only firefox for my testing. i don't think this is the issue — Dchris, Apr 22 '14 at 01:41
@kennypu Can you show example where window.location.hash='' is working? I'm trying to use it but it doesn't work — Dchris, Apr 22 '14 at 01:44
@kennypu Now, it's working for page load. How can i make it work when i want the button to rotate again? — Dchris, Apr 22 '14 at 01:46
@kennypu You can add your comment as an answer but i prefer to have an answer for rotating the button more than once as well. This is more important for me — Dchris, Apr 22 '14 at 01:47
Actually you can change the displayed url to whatever you want with `history.pushState` or `replaceState`. — Derek 朕會功夫, Apr 22 '14 at 01:56
@Derek朕會功夫 How can i do this without loading the page? — Dchris, Apr 22 '14 at 01:58
@Derek朕會功夫 Can you fix my jsfiddle? I tried but it didn't work — Dchris, Apr 22 '14 at 02:08

score 1 · Answer 1 · answered Apr 22 '14 at 12:10

1

Try this

$('#btnq1').click(function(event){
   event.preventDefault();
   // your action
});

Hashtags will not be added anymore

answered Apr 22 '14 at 12:10

Michał Wilk

32
3

what //your action should have? – Dchris Apr 23 '14 at 22:31

score 0 · Accepted Answer · edited May 23 '17 at 11:55

0

Adding the below solved my issue:

$(window).on('hashchange', function(e){
    history.replaceState ("", document.title, e.originalEvent.oldURL);
});

Found from another question.

edited May 23 '17 at 11:55

Community

1
1

answered Apr 26 '14 at 15:40

Dchris

2,867
10
42
73

score -1 · Answer 3 · answered Apr 22 '14 at 02:03

-1

To clear the hash on page load, you can add:

<script>
window.onload = function() { window.location.hash = ''; };
</script>

now, if you also want to clear it when the button is clicked, we can just add an onclick event to the button:

<a href="#btnq1" onclick="window.location.hash = ''">...

answered Apr 22 '14 at 02:03

kennypu

5,950
2
22
28

Down vote is not for me. For when the button is clicked is not working properly. It is remove the hash-tag only every 3 times that i click the button. On that moment it seems that page is forced to reload for some reason – Dchris Apr 22 '14 at 02:10
@Dchris try putting the event on the ` – kennypu Apr 22 '14 at 02:11

Can't remove hashtag from url after click event

3 Answers3