8

Hi i hope someone can help. i want to hide the fragment identifier from the address bar so instead of:

www.mydomain.com/example.html#something

i just get:

www.mydomain.com/example.html

when i click on an anchor tag.

I have looked at lots of related questions and forums but still can't quite figure it out. I'm pretty sure i should be using something along the lines of:

window.location.href.replace(/#.*/,''); //and or .hash

put just cannot figure it out.

localScroll plugin allows you to hide or keep the identifiers and by default they are hidden. i think many gallery plugins have a similar option too.

but when i try and do it myself (bit of a novice) i get crazy to no results.

below is some basic example script i would like it to work with:

<style>
.wrap{
width:300px;
height:200px;
margin:auto;
}

.box{
width:300px;
height:200px;
position:absolute;
display:none;
}

#one{background:red;}
#two{background:blue;}
#three{background:green;}

.load{display:block;}
</style>


<body>
<ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
</ul>

<div class="wrap">
    <div id="one" class="box load">This is Box 1</div>
    <div id="two" class="box">This is Box 2</div>
    <div id="three" class="box">This is Box 3</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {

$("ul li a").click(function(){

       $("div.box").fadeOut(1000);

       $($(this).attr('href')).fadeIn(1000);

    });
});
</script>
</body>
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
thom
  • 1,306
  • 4
  • 12
  • 15

3 Answers3

19

Add

return false;

at the end of your click function, it will stop this event propagation

Riccardo Galli
  • 12,419
  • 6
  • 64
  • 62
  • 1
    +1 -- I posted a big long answer about the hash tag stuff, but now that I've actually read his code, I see that your solution will give him the behavior he wants. :-) – Jason LeBrun Feb 02 '11 at 08:56
  • thank you very much, so annoying it was that simple. i think looking at other peoples questions and google got me confused and sidetracked – thom Feb 02 '11 at 10:14
3

the replace function returns a new string, it doesn't operate on the old one. You need to use: window.location.href = window.location.href.replace(/#.*/,'').

However, this will not have the expected effect, as changing window.location.href in any way that's not just adding or changing a hash tag causes a page reload.

The localScroll plugin works by searching for the hashtag and using the jQuery scrollTo plugin to scroll to the location, and preventing the default behavior of the browser when you click on a link with a hash tag. They haven't actually changed the URL to remove the hash, they've prevented it from ever appearing.

The best you can do if you want to remove the hash from the URI is to keep just the # at the end:

window.location.href = window.location.href.replace(/#.*/,'#');

Although in some older browsers, even this will trigger a page reload (only very old browsers, though).

Jason LeBrun
  • 13,037
  • 3
  • 46
  • 42
  • although return false; was what was needed, thank you for your answer. its helped explain what localScroll was doing and why what i was trying was not working. – thom Feb 02 '11 at 10:23
0

try this....it will remove # globally in your url 

window.location.href.replace(/\#*/g, "")

here is DEMO

Vivek
  • 10,978
  • 14
  • 48
  • 66
  • 4
    `example.html#something` -> `example.htmlsomething` ? Probably not a good idea `:)` – Kobi Feb 02 '11 at 08:43
  • no its not like that i have written the same thing in local file so i just copy paste that and did this mistake :) – Vivek Feb 02 '11 at 08:44
  • 1
    The replace function returns a *new* string with the replacement. You need to assign the result somewhere. – Jason LeBrun Feb 02 '11 at 08:50
  • it's his problem not mine, we are here to tell what could be right way to achieve the output regarding to the question.. – Vivek Feb 02 '11 at 08:59