Single paged website, which i want to get at a certain point after refreshing page

Question

I have a single paged website, in which i've got a div named sitecontent with the width of 4400, which holds 4 "pages". The pages start at 0px of sitecontent, 1100 px of sitecontent, 2200px of sitecontent, and 3300px.

I use Jquery to set de div position to the right px, so i get the right text displayed. After pressing a link i get for example:

<div id="site-content" style="left: -1100px;">

At one of the pages i have to refresh the page, and after this refresh i want the page to display the same "page" on 1100px, but it starts at 0px, the home page.

Is there any way how i can make sure that the sitecontent starts at -1100px of home?

Thanks in advance,

Cheers

Answer 1

You need to append some identifier onto the hash of the URL that you can parse on the page load.

For example:

 http://www.somewebpage.com/somepage#page1

Then in the load of the page, you can inspect this hash value and immediately change the UI to show the new page:

 var hash = window.location.hash;

 if(hash == "#page1")
    $('#site-content').css('left', '-1100px');

Answer 2

You can use a cookie to store the value, then, every time the page loads, you need to check the cookie and deal with the value collected:

The link for Jquery Cookie with download and usage manual!

HTML (example)

<a href="#" title="Go Page 1" id="page_01" class="setCookie">
  Click to view page 01
</a>

JQUERY (jquery.cookie)

// SET THE COOKIE
$('.setCookie').bind("click", function() {
  var pageNumber = $(this).attr("id");
  $.cookie('the_cookie_name', pageNumber, { expires: 7, path: '/' });
});


// READ THE COOKIE
$(function() {
  var oldNumber = $.cookie('the_cookie_name');
  if (oldNumber !== NULL) {
   $("#page_"+oldNumber).trigger("click");
  }
});

Note:

The link that you currently use to change pages, should have the class "setCookie" to trigger the cookie creation, and also the id that is being used to identify the page number.

One advantage of this is that you can control for how long is the cookie preserved and thus allowing the visitant to resume the website experience.

Answer 3

An approach very similar to what Tejs is proposing would be to use a hash-based routing framework that listens to hash changes. That will result in much cleaner code since you don't need to define the scrolling in two different places.

Every link in your page is currently being observed by a jQuery event listener (onclick -> moves the content container to the show the desired content). The HTML looks probably somewhat like this: <a href="#">Contact details</a>.

With this approach, you don't need to watch those links. Instead, simply make them change the hash: <a href="#page2">Contact details</a>.

Now observe the hash and react to changes. I'm using the Simrou framework (https://github.com/buero-fuer-ideen/Simrou) but you can go with any other framework that provides similar functionality.

jQuery(document).ready(function() {
    // Define a function that moves the content, e.g. moveContent(3300);
    function moveContent(pixelPosition) {
        $('#site-content').css('left', '-' + pixelPosition + 'px');
    }

    // Setup the router
    var router = new Simrou({
        'page1': function() { moveContent(0); },
        'page2': function() { moveContent(1100); },
        'page3': function() { moveContent(2200); },
        'page4': function() { moveContent(3300); }
    });
    router.start();
});

That's all the javascript you need!

(and here is a quick and dirty fiddle, demonstrating the whole thing: http://jsfiddle.net/R7F6r/)