Develop Reference

Using history.js come to the same scroll position when we click back button

I want to implement a functionality wherein on clicking the back button, i come back to the same position. A good example may be any ecommerce site.When we scroll down and hit on a product, and click back from the product page, we should reach the same position of the page where that product is.
We use history.js to look up for hashchange and pushstate to save the entries.
But when I click on back button , it loads to the top of the page rather than the item scroll position. Also, we are laoding the data using AJAX mostly
Im fairly new to jquery, ajax and so do not know how to set the scroll position, save and load during back button click.
Any help would be great!
Thanks

I recently implemented something like this using $(document).scrollTop() and storing that figure in a cookie when leaving the page. My usecase was non-ajaxy but the same idea could easily be adapted with History.js's events replacing page load events, and no need to bother with the cookie for persistence; as #Kyle above mentioned in his comments, History.js lets you store data with pushState that is returned when you return back to that state.
See jQuery's docs: http://api.jquery.com/scrolltop/

Avoid the page scrolling/jumping when anchor is in the URL [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
jquery - disable anchor “jump” when loading a page
I'm displaying a div depending on the hash value in a URL but i want to avoid the page jumping to the postion of that div with that particular ID.
I only have the problem when the page is navigated direct with the hash in the URL so say for example if someone has book marked the page.
So for example I have the url
domain.com/page.html#myitem-1
ID=myitem-1 will then display, which it does but the page then jumps down to the postion of that div which i don't want.
I was trying to use scrollTop(0) to force the window position back to the top but it seems as if this gets called before the anchor jump takes place to has no effect
Example code:
$(document).ready(function() {
$('.glossary-term').hide();
$(window.location.hash).show();
$(window).scrollTop(0);
});
The only way i was able to get this scrollTop to work was to place it in a setTimeOut with a duration of 1, but this seems like a bit of a hack. Any other suggestions?
Thanks
B

Well, if it is your internal mechanism for using anchors just for displaying divs you can always change (or remove) the "name" attribute so the browser won't find it directly and won't try to scroll ;)
Otherwise try How to disable anchor "jump" when loading a page?

Update URL parameter with javascript, without ruining the history?

I'm looking for a way to update the url in the status bar..
I have a gallery, and when you click your way through the gallery I want the image ID to show up in the URL, so that the user can link directly to the image..
I've read about using hash and so. but as far as I've tried it, that "ruins" the history.
If I click the back-button in my browser the previous image would be shown.
Is it possible to add or update a URL parameter, without ruining the history?
Thanks in advance

Use location.replace to replace the current location:
Replace the current document with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.

Do it simply this way, when switching to images, add a hash to the url, for example:
location+='#image-'+image_id
your location will become
http://example.org/images/#image-3
instead of the initial
http://example.org/images/
and onload, check if location.hash is not empty, and matches with ^image-(\d+)$ (regular expression pattern), if it matches, do the usual thing you'd have done if a user clicks on image with id (\d+).
To preserve history, use reallysimplehistory.

Using hash value in photo gallery

I try to create a navigation for my photo gallery using hash values.
When I click the "Next" link, I get value of the hash and then post it to the another backend php script using jquery $.get() api and also set the new hash value for that link. Everything works fine but the hash doesn't update itself with every click. It usually takes 2 clicks to get the updated hash value.
Can anybody here tell me on how I could go about fixing it.

Update hash manually, using
location.hash = '#new_hash';

Javascript menu remembering position

I am currently working on a JS menu for a web app. It consists of two bars, the fixed main one and the submenu which is activated (display:block from display:none) by Javascript function. The selected options of the main menu as well as the submenu are also highlighted by adding a class="main_on" and class="sub_on" by onclick event. Is there way of remembering which submenu was displayed and which options were currently classed as active when the user hits F5 or the page reloads itself? I am looking for a non-cookie and non-database approach if possible.
Thanks,
Mike

You can make the link/element that is clicked (for the onclick event) set the URL hash in the address bar. (i.e. http://server.name/page#URLhash) If it's a link you just have to adjust the HREF property, otherwise you may have to manipulate with window.location.
This sets the current state. When the page (re)loads, check the value of the URL hash. See http://developer.mozilla.org/en/DOM/window.location for details on how to access it. Provided the URL hash is still in the address bar, you'll be able to get the value.
Then use the value to determine which menu to make active. Thus you can restore the state this way.
There are some differences between browsers. Do a search on "Ajax History", in which some people have used the URL hash to preserve the state after Ajax actions. Not the exact same problem you are trying to solve but similar. Check out RSH:
http://code.google.com/p/reallysimplehistory/
The same ideas will be used.