Enable Hash pages History in Ascensor Jquery Plugin

jquery-banner

Problem:

On every parallax website using Ascensor Jquery plugin for navigation, whenever a user clicks on an event or page it scrolls to that div and made it an index without saving hash URLs. And if user wants to go back to previous div and hits Back button it results in pushing user out of the website to the previous site.
Ascensor-js is a jquery plugin which aims to train and adapt content according to an elevator system with keyboard navigation. There are many features included in in Ascensor, Pages can be navigated by clicking previous & next buttons and also by clicking in the navigation area which is a customizable series of blocks or links that represent a map of the pages. You can create your own choice navigation e.g. circle, zigzag square etc. Ascensor is depended on the jQuery and ScrollTo plugin to scroll between pages smoothly.

Solution:

To handle this issue by customizing Ascensor Jquery Plugin, first we tried with the solution by storing current url in curr variable and then on next link click store curr variable value in prev and store current hash in curr variable.

e.g

define curr and prev variables globally on document ready

if(curr==’’){ prev = window.location.hash; }
Else{ Prev =curr; }
Curr = window.location.hash;

But it stores current var even when we click browser back link that create problem that the same page displays again. To combat this bug we tried history.pushState e.g

var stateObj = { foo: "bar" };
history.pushState(stateObj, "pagetitle", "#hash");

When user clicks on link that function called but it stores the current page in history so when clicked back on browser it navigates to current page first then to the previous one.
Then I use history.pushState(stateObj, “pagetitle”, “#hash”) but use navigation id for click event.

e.g

$("#menu-item-501").click(function(event, index) {
window.location.hash = "home";
var stateObj = { foo: "bar" };
history.replaceState(stateObj, "Home", "#home");
ascensor.trigger("scrollToStage", $(this).index());
});

Result:

  • Now user can navigate safely back to previous page/event without pushing user out from the website.
  • The issue of landing on same page is eliminated by utilizing navigation ID.

Ask for a Quote

Please leave this field empty.

Contact Details

Suit # 2, 2nd Floor Plaza 2000, I-8 Markaz, Islamabad
+92-51-4938304
[email protected]
[email protected]