History API-nope
How do I make an history api-nope?
What is a history api-nope? How do you make a history api-nope? This script and codes were developed by Danny C on 18 January 2023, Wednesday.
History API-nope - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>History API-nope</title>
</head>
<body> <div class="container"> <div class="row"> <ul class="nav navbar-nav"> <li><a href="home.html" class="historyAPI">Home</a></li> <li><a href="about.html" class="historyAPI">About</a></li> <li><a href="contact.html" class="historyAPI">Contact</a></li> </ul> </div> <div class="row"> <div class="col-md-6"> <div class="well"> Click on Links above to see history API usage using <code>pushState</code> method. </div> </div> <div class="row"> <div class="jumbotron" id="contentHolder"> <h1>Home!</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
History API-nope - Script Codes JS Codes
jQuery('document').ready(function(){ jQuery('.historyAPI').on('click', function(e){ e.preventDefault(); var href = $(this).attr('href'); // Getting Content getContent(href, true); jQuery('.historyAPI').removeClass('active'); $(this).addClass('active'); });
});
// Adding popstate event listener to handle browser back button
window.addEventListener("popstate", function(e) { // Get State value using e.state getContent(location.pathname, false);
});
function getContent(url, addEntry) { $.get(url) .done(function( data ) { // Updating Content on Page $('#contentHolder').html(data); if(addEntry == true) { // Add History Entry using pushState history.pushState(null, null, url); } });
}
Developer | Danny C |
Username | tychoBlender |
Uploaded | January 18, 2023 |
Rating | 3 |
Size | 2,026 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Animation Test | 1,870 Kb |
SOL Republic Styling Test | 2,029 Kb |
Cross Browser Grayscale | 1,780 Kb |
Canvas Click Animation Demo | 1,955 Kb |
Swiper | 2,335 Kb |
Single Page Layout | 3,748 Kb |
CSS Social Media Icon | 3,871 Kb |
Navigation Transition | 1,741 Kb |
A Pen by Danny C | 1,874 Kb |
Outlook 2013 Line Height | 1,765 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Google Chrome Icon using Pure CSS in one DIV | Grssam | 3,627 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
Bootstrap 4 Gridsystem Demo | Rivella50 | 1,535 Kb |
Image grid with captions | Mchernin34 | 2,222 Kb |
Double box-shadow | Daubac402 | 1,436 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
AngularJS Skills | Supro | 3,312 Kb |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!