Load content without redirecting page using window.history.pushState

Question

tun712 15 Junior Poster in Training

8 Years Ago

I have css animation for preloader.

I need help to update content smoothly without redirecting page, using following functions

$(window).on("popstate", function() { });

window.history.pushState({path: ""},"","");

Update link & content of next page after preloader progressbar animation ends webkitTransitionEnd without redirecting to page.

Need help to complete following functions

function changeUrl() { }
function updateContent() { }

Html/CSS/Js code (jsfiddle links)

after adding 'loading' class to body tag ()
after removing 'loading' class from body tag ()

html-css javascript

2 Contributors
3 Replies
1K Views
18 Hours Discussion Span
Latest Post 8 Years Ago Latest Post by tun712

Dani AI

Generated 10 Months Ago

Short, practical summary and a safe pattern to follow.

The core fixes are: update the URL/state without navigating, wait until the preloader animation truly ends, then swap only the fragment you need (your .main-content) and update document.title. For reliable animation end detection prefer animating real DOM elements (so you can attach a single transitionend or animationend listener and filter by propertyName) — transition events include a pseudoElement property when the animation runs on a pseudo-element, but handling a real element is simpler and more consistent. (developer.mozilla.org)

Recommended flow: on link click do preventDefault(), add the loading class, call history.pushState({url}, "", url) (this updates the URL without loading the page), and wait for the transition end before fetching the new fragment. On initial load call history.replaceState() so the back button can restore the initial state. Use popstate to restore cached state or fetch location.pathname when users hit Back/Forward. (developer.mozilla.org)

Fetch the whole page as text, parse it with DOMParser('text/html'), extract .main-content and the <title>, then swap the DOM. Note DOMParser produces an inert document (scripts inside the parsed HTML won’t execute), so re-run any init code or inject scripts explicitly. Use fetch() with response.ok checks and an AbortController to cancel stale requests on quick navigation. (developer.mozilla.org)

Minimal pattern (vanilla JS):

let currentController = null;

async function loadFragment(url){
  if (currentController) currentController.abort();
  currentController = new AbortController();
  const r = await fetch(url, {signal: currentController.signal});
  if (!r.ok) return (location.href = url); // fallback
  const txt = await r.text();
  const doc = new DOMParser().parseFromString(txt,'text/html');
  const frag = doc.querySelector('.main-content');
  if (frag) document.querySelector('.main-content').innerHTML = frag.innerHTML;
  document.title = doc.title || document.title;
  // re-init handlers here
}

This approach addresses the issues in 's examples and follows the History API approach pointed toward.

All 3 Replies

gentlemedia 803 Master Poster

8 Years Ago

Did you checkout this pushState and AJAX tutorial"
https://css-tricks.com/using-the-html5-history-api/

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tun712 15 Junior Poster in Training · Answer 1 · 2018-07-15T18:20:46+00:00

created function as follows, but not working correctly. need some help.

Please help
Thanks

jQuery(document).ready(function(event){ 

if(Modernizr.history){

    $('.nav li a').on('click', function(event){
        event.preventDefault();

        var url = $(this).attr('href');
        $('body').addClass('loading');      

        window.history.pushState(null, null, url);
        loadContent(url);   

    });    

    function loadContent(href){

        setTimeout(function(){
            $("main").load(href);   
            $('body').removeClass('loading');   
        }, 1200);   
    }

$(window).on('popstate', function() {
       url = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
       loadContent(url);
    });
}

})(jQuery);

HTML

<div class="page">
  <main>
    <ul class="nav">
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
    <div class="main-content">
      <h1>Home</h1>
    </div>
  </main>

  <div class="loader"></div>
</div>

CSS

*, *::after, *::before {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    line-height: 170%;
}
body {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    background: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}
body::after, body::before {
    /* these are the 2 half blocks which cover the content once the animation is triggered */
    content: '';
    height: 50vh;
    width: 100%;
    position: fixed;
    left: 0;
    background-color: #ffffff;
    z-index: 1;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform 0.4s 0.4s;
    -moz-transition: -moz-transform 0.4s 0.4s;
    transition: transform 0.4s 0.4s;
}
body::before {
    top: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
body::after {
    bottom: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}
body.loading::after, body.loading::before {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.4s 0s;
    -moz-transition: -moz-transform 0.4s 0s;
    transition: transform 0.4s 0s;
}
.nav {
    display: inline-block;
    margin: 0 auto;
    padding: 1em 3em;
    list-style: none;
}
.nav li {
    display: inline;
    margin: 0 1em 0 0;
}
.nav a {
    display: inline-block;
    padding: 0.7em 1.25em;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid gray;
}
h1 {
    font-size: 50px;
    line-height: 60px;
    margin-bottom: 23px;
    margin-top: 0;
    margin-bottom: 35px;
    font-weight: 400;
    word-wrap: break-word;
    text-align: center
}
.page {
    width: 100vw;
    height: 100vh;
    background: #7a60ff;
    background: linear-gradient(to left, #7a60ff, #cd9ffa);
}
.loader {
    /* this is the loding bar - visible while switching from one page to the following one */
    position: fixed;
    z-index: 2;
    left: 50%;
    top: 50%;
    height: 2px;
    width: 90%;
    background-color: #aed6ff;
    visibility: hidden;
    -webkit-transition: visibility 0s 0.4s, -webkit-transform 0.4s 0s ease-in;
    -moz-transition: visibility 0s 0.4s, -moz-transform 0.4s 0s ease-in;
    transition: visibility 0s 0.4s, transform 0.4s 0s ease-in;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.loader::before {
    /* this is the progress bar inside the loading bar */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #ff2e2e;
    /* Force Hardware Acceleration */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
.loading .loader {
    visibility: visible;
    -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -moz-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -ms-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -o-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    transform: translateX(-50%) translateY(-50%) scaleX(0.3);
    -webkit-transition: visibility 0s 0.3s, -webkit-transform 0.4s 0.4s;
    -moz-transition: visibility 0s 0.3s, -moz-transform 0.4s 0.4s;
    transition: visibility 0s 0.3s, transform 0.4s 0.4s;
}
.loading .loader::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition: -webkit-transform 0.8s 0.8s ease-in;
    -moz-transition: -moz-transform 0.8s 0.8s ease-in;
    transition: transform 0.8s 0.8s ease-in;
}

tun712 15 Junior Poster in Training · Answer 2 · 2018-07-16T06:14:41+00:00

Yes I have tried, but not working. I'hve created my function based on this, - tut

Please someone try my code with index.php, about.php & contact .php, to understand exact problem

index.php

<div class="page">
      <main>
        <ul class="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="about.php">About</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
        <div class="main-content">
          <h1>Home</h1>
        </div>
      </main>
      <div class="loader"></div>
    </div>

about.php

    <div class="page">
      <main>
        <ul class="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="about.php">About</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
        <div class="main-content">
          <h1>About</h1>
        </div>
      </main>
      <div class="loader"></div>
    </div>

Contact.php

    <div class="page">
      <main>
        <ul class="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="about.php">About</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
        <div class="main-content">
          <h1>Contact</h1>
        </div>
      </main>
      <div class="loader"></div>
    </div>

Load content without redirecting page using window.history.pushState

Dani AI

Recommended Answers Collapse Answers

All 3 Replies

Recommended Answers