I am looking for a single-page website that I can access after refreshing the page at a specific point

Question

I am looking for a single-page website that I can access after refreshing the page at a specific point

I recently created a one-page website with a div called sitecontent that has a width of 4400 pixels, housing four distinct "pages". These pages are located at intervals of 0px, 1100px, 2200px, and 3300px within sitecontent.

To ensure the correct text is displayed, I utilize Jquery to adjust the div's position in pixels accordingly. For example, upon clicking a link, the following code snippet may be generated:

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

However, when one of these pages requires a refresh, I encounter an issue where the refreshed page reverts back to the home page (located at 0px) instead of staying on the desired 1100px page.

Is there a method to maintain the sitecontent starting at -1100px rather than defaulting back to the home page?

Thank you for your assistance,

Best regards

javascript jquery html css singlepage

Answer 1

Answer №1

One way to dynamically update the page using URL hash is by adding an identifier that can be parsed upon loading.

For instance:

 http://www.examplewebsite.com/examplepage#section1

Upon page load, you can check this hash value and make instant UI changes to display the desired section:

 var hash = window.location.hash;

 if(hash == "#section1")
    $('#content').show();

Answer 2

One way to dynamically update the page using URL hash is by adding an identifier that can be parsed upon loading.

For instance:

 http://www.examplewebsite.com/examplepage#section1

Upon page load, you can check this hash value and make instant UI changes to display the desired section:

 var hash = window.location.hash;

 if(hash == "#section1")
    $('#content').show();

Answer 3

Answer №2

To retain a value across page loads, you can utilize a cookie to store the value and then check the cookie each time the page is loaded:

For detailed instructions on how to use Jquery Cookie, including 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 used for page navigation should have the class "setCookie" to trigger the creation of the cookie, as well as an ID to identify the page number being stored.

An advantage of using this method is the ability to specify the duration for which the cookie will be preserved, allowing visitors to resume their website experience seamlessly.

Answer 4

To retain a value across page loads, you can utilize a cookie to store the value and then check the cookie each time the page is loaded:

For detailed instructions on how to use Jquery Cookie, including 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 used for page navigation should have the class "setCookie" to trigger the creation of the cookie, as well as an ID to identify the page number being stored.

An advantage of using this method is the ability to specify the duration for which the cookie will be preserved, allowing visitors to resume their website experience seamlessly.

Answer 5

Answer №3

A strategy similar to Tejs' proposal involves utilizing a hash-based routing framework that monitors changes in the URL fragment identifier. This approach streamlines the code by consolidating scrolling functionality into a single location.

Currently, each link on the page triggers a jQuery event listener (onclick -> moves the content container to display the relevant content). The HTML markup likely resembles:

<a href="#">Contact details</a>

.

By adopting this method, there is no need to monitor individual links. Instead, modify them to update the hash value:

<a href="#page2">Contact details</a>

.

Subsequently, monitor changes in the hash value and respond accordingly. I have employed the Simrou framework (https://github.com/buero-fuer-ideen/Simrou), but any comparable framework can be utilized.

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

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

The provided JavaScript snippet suffices for this implementation!

(and here is a demonstration showcasing the entire concept: http://jsfiddle.net/R7F6r/)

Answer 6

A strategy similar to Tejs' proposal involves utilizing a hash-based routing framework that monitors changes in the URL fragment identifier. This approach streamlines the code by consolidating scrolling functionality into a single location.

Currently, each link on the page triggers a jQuery event listener (onclick -> moves the content container to display the relevant content). The HTML markup likely resembles:

<a href="#">Contact details</a>

.

By adopting this method, there is no need to monitor individual links. Instead, modify them to update the hash value:

<a href="#page2">Contact details</a>

.

Subsequently, monitor changes in the hash value and respond accordingly. I have employed the Simrou framework (https://github.com/buero-fuer-ideen/Simrou), but any comparable framework can be utilized.

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

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

The provided JavaScript snippet suffices for this implementation!

(and here is a demonstration showcasing the entire concept: http://jsfiddle.net/R7F6r/)

I am looking for a single-page website that I can access after refreshing the page at a specific point

Answer №1

Answer №2

Answer №3

Similar questions

Difficulty in retrieving attribute information from an image - JQuery

JS similar to yield*: async generator

The sequential progression of individual functions relying on the output of the previous one in asynchronous execution

Is there a way to align both JSX elements in a single row without having one overlap the other?

Utilizing CSS grid layouts to ensure images expand to fit the dimensions of the designated column and

Tips for stopping the current webpage from redirecting to a different page upon refreshing

The Wordpress Ajax Call was a success (200), yet no response message was received

Re-rendering multiple components with the new `use` feature in React version 18.3.0

What is the proper way to provide login information for a webservice through a jquery ajax request?

The presentation of the Google graph with dynamically changing data appears to be displaying inaccurately

jQuery mobile : accessibility helper for hidden elements

Discoloration of images on HTML5 Canvas

Searching for text using JQuery autocomplete feature with results fetched from an external source

Challenges arise when IE distorts featured images in a Wordpress theme

Utilizing JavaScript to Automatically Rename Files in Sharepoint Document Library Based on Content

Tips for preventing multiple occurrences on a single object?

Triggering a click event in React when a link is clicked

How to relocate zeros to the end of an array using JavaScript without returning any value?

What is the best way to swap out an icon based on the chosen option?

Can't seem to res.send using Express framework