...

View Full Version : delete hash from address bar



skmd
10-01-2008, 10:18 AM
Hi everyone,

I'm trying to delete hash from the address bar all day long. but I couldn't solve it.

I have tried many things like

document.location.hash = ""; But it didn't work.

the only thing that worked

document.location.hash="#";
But it makes the page scrolls up to the top.

does anybody have a solution??

Basscyst
10-01-2008, 06:50 PM
Are you talking about the hash (#) that gets appended to the url when you click on a javascript link?

Something like:


<a href="#" onclick="someFunction();">Do some javascript thing</a>


What's happening:

When the user clicks the link, the javascript runs, but the user is also brought to the page in the href of the anchor tag. To prevent this, you have to return false after the javascript executes. This tells the browser to stop after the code runs and not follow the link:

ex:



<a href="#" onclick="someFunction();return false;">Do some javascript thing</a>


Basscyst

skmd
10-01-2008, 11:27 PM
thats not my problem. my question is:
How can I remove the hash (with its #) without making the page scrolls up to the top.
Because i'm developing an ajax application and it's too noisy to scroll the page down after clicking a link.

rangana
10-02-2008, 01:47 AM
I'm uncertain about your desire, but when this works:


document.location.hash="#";


...but makes your page scrolls to the top, then why not add:


document.location.hash="#";
return false; // Cancel any event from this point forward

skmd
10-02-2008, 11:40 AM
I already have. but it scrolls anyway

jumpfroggy
10-02-2008, 05:40 PM
This is a quirck/bug with IE. If you set window.location.hash = "", it actually gets set to "#" so the URL becomes "http://server/page.html#" and jumps to the top.

function setBlankHash() {
window.location.hash = "";
}

In firefox, you can just set window.location.hash = "" and the URL will be clean ("http://server/page.html"). The only way I know of to remove the hash in IE is to explicitly set the window.location:

function setBlankHash2() {
window.location = window.location.href.replace( /#.*/, "");
}
At which point the entire page reloads.

So you either deal with the page jumping to the top, or a page reload. It looks like with IE, once the hash is set it'll never be empty after that.

The only workaround I see is that you can set the hash to a dummy value (page.html#none). Just make sure that the dummy value is not used for any anchors on the page, or the page will jump to that.

If anyone finds a way to do this, please post!

skmd
10-02-2008, 09:58 PM
Thanks jumpfroggy, I appreciate your first post was a useful reply for me.
Thats exactly what I wanna know.
Actually it is not just an IE bug. Opera and firefox behave in the same way.
I guess, I'm gonna stick with #none for now until a solution is found.

A new issue found in opera. if the hash was url like this: ...php#link.php?action=show
opera strips out the parameters and the hash becomes like this: ..php#link.php

maybe its for security. I don't know??!!
Any comments??

Arty Effem
10-03-2008, 01:21 AM
Thanks jumpfroggy, I appreciate your first post was a useful reply for me.
Thats exactly what I wanna know.
Actually it is not just an IE bug. Opera and firefox behave in the same way.Could you clarify how the hash is getting into the URL initially? It may be possible to eliminate it immediately then scroll to the required position via script.

jumpfroggy
10-03-2008, 05:31 PM
Thanks jumpfroggy, I appreciate your first post was a useful reply for me.
NP.

Actually it is not just an IE bug. Opera and firefox behave in the same way.
Yeah, I just tested firefox and it also jumps to the top. I thought it didn't since I remembered that it does not add the "#" to the hash, but the jumping still screws things up.


A new issue found in opera. if the hash was url like this: ...php#link.php?action=show
opera strips out the parameters and the hash becomes like this: ..php#link.php
maybe its for security. I don't know??!!
Any comments??
Ugh, sounds like a security-ish bug. I haven't seen other browsers do it, but it sounds like a horrible thing for a browser to do. They just don't like making our lives easy, do they? :)


Could you clarify how the hash is getting into the URL initially? It may be possible to eliminate it immediately then scroll to the required position via script.
For my app, I set the URL's hash to reflect the current AJAX state. When I want to remove the hash, there really isn't any way to do so because of the bug in this post. I'm not sure what the OP's reason is, could be different.

skmd
10-04-2008, 11:02 PM
I'm not sure what the OP's reason is, could be different.
No, its almost the same. expect that the hash contains a url.
I was working in the past 2 days on jQuery plugin. It was originally coded for my last project. And I thought it may be useful for beginner coders. (check the examples to understand what I was trying to do)
http://max.jsrhost.com/ajaxify-jquery-plugin/
My last project was relying on:

document.location.hash="#";
But its owner called me back to fix this issue. now it uses:

document.location.hash="#none";
as this is the best solution found so far.

Arty Effem
10-05-2008, 04:43 AM
No, its almost the same. expect that the hash contains a url.I'm still not clear. Does either of these describe your exact requirement?

1) When a page with a #anchorName in its URL loads, I want to remove the #anchorName from the address bar but keep the position of the page at that anchor.

2) When an internal link is clicked, I want to scroll to that anchor position but not have the #anchorName appear in the address bar.

skmd
10-06-2008, 11:18 AM
I'm still not clear. Does either of these describe your exact requirement?

1) When a page with a #anchorName in its URL loads, I want to remove the #anchorName from the address bar but keep the position of the page at that anchor.

2) When an internal link is clicked, I want to scroll to that anchor position but not have the #anchorName appear in the address bar.

May be (1) is the nearest. But not exactly.
I need to insert hash and remove it based on some events.
its simply like this:

<a href="#hash">Insert hash</a>
And

<a href="#none">Remove hash</a>
OR
<a href="" onclick="document.location.hash="#none";">Remove hash</a>

The question is : Can I replace document.location.hash="#none"; with something that really removes the hash from the address bar after setting it?

Arty Effem
10-06-2008, 05:43 PM
May be (1) is the nearest. But not exactly.
I need to insert hash and remove it based on some events.
its simply like this:

<a href="#hash">Insert hash</a>
And

<a href="#none">Remove hash</a>
OR
<a href="" onclick="document.location.hash="#none";">Remove hash</a>

The question is : Can I replace document.location.hash="#none"; with something that really removes the hash from the address bar after setting it?From your description it looks like the second scenario I suggested applies, not the first. The following function can be called by a link to jump to the anchor in its href, without applying a hash to the URL. The usage is:

<a href='#myAnchor' onclick='return anchorJump("myAnchor")'>middle</a>
- or -
<a href='#myAnchor' onclick='return anchorJump(this.href)'>middle</a>
<script type='text/javascript'>

function anchorJump( anchor )
{
var targAnchor=null, anchorID=anchor.replace(/.*#([^\?]+).*/,'$1');

if( !(targAnchor=document.getElementById( anchorID )) )
for(var i=0, found=false, da=document.anchors, len=da.length; i<len && !targAnchor; i++)
targAnchor = (da[i].name==anchorID ? da[i] : null);

if(targAnchor)
{
disp=getElemOffset(targAnchor);
window.scrollTo(disp.x, disp.y);
}
else
alert('Did not find anchor/element "'+anchorID+'"');

function getElemOffset(elem)
{
var left = !!elem.offsetLeft ? elem.offsetLeft : 0;
var top = !!elem.offsetTop ? elem.offsetTop : 0;

while((elem = elem.offsetParent))
{
left += !!elem.offsetLeft ? elem.offsetLeft : 0;
top += !!elem.offsetTop ? elem.offsetTop : 0;
}

return {x:left, y:top};
}

return false;
}
</script>
Does this address the problem?

skmd
10-06-2008, 06:59 PM
Thank you Arty Effem for your try. but I think you haven't got it yet.
We are using the hash to reflect the ajax status. Just saving some information in it. Actually The anchors we use doesn't exists. So we don't want the page to scroll.

The "jumping" thing that we were talking about: we tried to set it empty like
document.location.hash="#";
But in this way, the browser scrolls the page to the top which is actually annoying to the reader.

Arty Effem
10-06-2008, 07:18 PM
We are using the hash to reflect the ajax status. Just saving some information in it. Actually The anchors we use doesn't exists. So we don't want the page to scroll.

The "jumping" thing that we were talking about: we tried to set it empty like
document.location.hash="#";
But in this way, the browser scrolls the page to the top which is actually annoying to the reader.Any change to the hash is going to scroll the document and trying to delete it will cause a reload.
Why is it necessary to store data in the hash value as opposed to a variable?
It would be much easier if you'd explain exactly what you're doing instead of expecting everyone to guess.

skmd
10-06-2008, 09:02 PM
May be you are guessing because you are not familiar with ajax programming.
I posted my project above (http://max.jsrhost.com/ajaxify-jquery-plugin/ see "Demonstration > load from hash" to understand what we are trying to do.

Arty Effem
10-06-2008, 11:34 PM
May be you are guessing because you are not familiar with ajax programming.
I posted my project above (http://max.jsrhost.com/ajaxify-jquery-plugin/ see "Demonstration > load from hash" to understand what we are trying to do.I'm perfectly familiar with AJAx programming however the technique in question is not an inherent part of AJAX.
You are using some third party code that upon making an AJAX request, updates the URL with a hash parameter in order to allow the most recent AJAX operation to be repeated in the event of a page reload, which is how you should have described the situation initially.
Since you want to remove the hash parameter you must be content to lose that ability, in which case the answer must be to re-code the plugin not to include it.
This site has a JS frameworks forum...

Basscyst
10-06-2008, 11:47 PM
May be you are guessing because you are not familiar with ajax programming.
I posted my project above (http://max.jsrhost.com/ajaxify-jquery-plugin/ see "Demonstration > load from hash" to understand what we are trying to do.

If you were familiar with AJAX programming or even javascript for that matter, you'd know that what you were trying to do isn't possible. Changing the URL will bring you to the URL you change it too. It's not a bug that the page jumps. It's the browser reacting to the new URL. If we could change the url without the browser reacting to it, we'd have sites that say:

http://www.bankofamerica.com

that are really:

http://www.ihaveyouraccountinformation.com

I'll also add that the initial concept shown when following your example url is borderline (if not full on) abuse of the request object.

If you're just having fun and experimenting, cool. If you are building an application off this technique I'd suggest taking a step back to re-examine your solution.

skmd
10-07-2008, 12:12 AM
I didnt say its a bug. jumpfroggy does.
And I didn't say I'm profissional in ajax and jscript as its not my major.
Your post is intresting can you explain it more.??

Basscyst
10-07-2008, 12:28 AM
What did you want to know? Why I think the technique described in your example is abuse? Well, ask yourself, how is your user's experience enhanced by "Ajaxifying" your site? Persistent content doesn't reload? I can see that as a benefit. That's about the only one I can see.

In return you break their back button, screw up bookmarking and introduce new issues that need to be considered for accessibility when javascript is disabled or the request object is unavailable.

There are things that can be done to address the issues a full ajax site faces, as you are attempting to do here in this thread and it's fun to experiment. In the end though, I found (maybe you will have better luck) it's generally more trouble than it's worth.

I could go on, and don't get me wrong, I'm an advocate for what you are trying to do here. Being able to display and reload only pertinent data is freakin' awesome, at the same time though browsers and their users aren't quite caught up to my desires.

skmd
10-07-2008, 09:20 PM
I appreciate your comments Basscyst. Anyway. its not a commercial plugin. anyone can modify it and custumize it to meet his needs. besides it still v1.00. I guess thats normal. Some of the features (like history) are already in my mind and there is a plan to implement it. while other techniques (like hashing) are used in some popular websites (like http://www.deviantart.com/ and http://ui.jquery.com/repository/latest/demos/functional/) I still didn't get exactly what is wrong in it (hashing). Could you clarify your point about it. I didn't get your example about bank of america too.

Basscyst
10-07-2008, 11:58 PM
Well you can see a perfect example on the jQuery site. Clicking through the various demonstrations creates no user history in IE 6. In Firefox 3, the user history is created, but the script doesn't re-fire so the content doesn't change.

IMHO, it's all a matter of design. In the case of the jquery site, it doesn't function in a way that says, "Hey, you haven't left the page you are on". Even as a seasoned web surfer, I'll find myself going for the back button in sites like this.

On the other hand take http://www.yahoo.com/ for example. I have no idea if the tabs on top of each section are ajax driven, but that would be a great place to have content be refreshed when the tab is clicked, without loading the rest of the page. Say a user starts at the featured tab, then moves over to sports. While reading the sports tab a new featured article is published. Upon clicking the featured tab again, the new article would be displayed. In this case it's very apparent that you haven't actually left the initial page and history becomes a non-issue.

skmd
10-09-2008, 12:21 PM
I absolutely agree. it's just a matter of design.
I will try to collect some information about users experiances and I will see then how this will go on.

Thank you for everything.

A1ien51
10-09-2008, 02:45 PM
I can not believe the amount of people here that have not heard about using the hash to remember state. People have been using that technique for a long time and you can change that part of the url without any issue, but you are not able to fully remove it.

I wrote this back in 2005 when Ajax was starting to really take off
http://ajaxian.com/archives/ajax-tackle-the-refresh-button links to this: http://www.pascarello.com/rememberHistory.aspx

Now if you want to do some research in what others are doing. Take a look at http://developer.yahoo.com/yui/history/ and http://code.google.com/p/reallysimplehistory/ which use this type of technique with other things added to get other browsers to work correctly.

So I would do what you are doing and set a state that your application knows it means to do nothing. Also remember that people might have hashes on their site for real navigation so make your code smart enough to figure out that issue [naming scheme might help!]

Eric

Basscyst
10-09-2008, 04:49 PM
I can not believe the amount of people here that have not heard about using the hash to remember state. People have been using that technique for a long time and you can change that part of the url without any issue, but you are not able to fully remove it.

I wrote this back in 2005 when Ajax was starting to really take off
http://ajaxian.com/archives/ajax-tackle-the-refresh-button links to this: http://www.pascarello.com/rememberHistory.aspx

Now if you want to do some research in what others are doing. Take a look at http://developer.yahoo.com/yui/history/ and http://code.google.com/p/reallysimplehistory/ which use this type of technique with other things added to get other browsers to work correctly.

So I would do what you are doing and set a state that your application knows it means to do nothing. Also remember that people might have hashes on their site for real navigation so make your code smart enough to figure out that issue [naming scheme might help!]

Eric

Heh, I've been waiting for you to come and tell me I'm wrong, but why can't you believe it, there's only two of us in this thread. :p

A1ien51
10-09-2008, 05:36 PM
Heh, I've been waiting for you to come and tell me I'm wrong, but why can't you believe it, there's only two of us in this thread. :p

I hear this stuff all the time on IRC so that is another reason to "why I can not believe it"

In your case you might be able to handle all of it in session. I do that where ever I have the ability to do it, but if you want your users to be able to share something in an email and the only way to get to it is with an Ajax call, than there has to be some restful way of getting to it.

That means either you need a "Link to this page link" sort of what Google does with its maps OR you do the hashing thing.

With HTML5 around the corner, it is going to make this a lot easier. [but we still have to support <5! :)]

Eric

Basscyst
10-09-2008, 06:11 PM
I hear this stuff all the time on IRC so that is another reason to "why I can not believe it"

In your case you might be able to handle all of it in session. I do that where ever I have the ability to do it, but if you want your users to be able to share something in an email and the only way to get to it is with an Ajax call, than there has to be some restful way of getting to it.

That means either you need a "Link to this page link" sort of what Google does with its maps OR you do the hashing thing.

With HTML5 around the corner, it is going to make this a lot easier. [but we still have to support <5! :)]

Eric

Ya, most all of my experience is with business apps that run on an intranet, so I do have the luxury of knowing who the user is and what they've done.

I can see the benefit of this in an outside world. I just might play with it a little.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum