in this blog post we will discuss how to add an off canvas effect to a bootstrap sidebar along with a dynamic page changing effect
About OffCanvas Bootstrap Effect With Dynamic Page Changing Using JavaScript
In this blog post we will be discussing how to add an off canvas effect to a bootstrap sidebar along with a dynamic page changing effect without requiring the browser to reload the page. This feature will help you make your website look like an application that works smoothly on the client side without any page reloading. The sidebar will give you an understanding of the off canvas effect.
Let's break down the project into smaller parts so we can better understand the logic behind it. Our first step will be to write HTML code and incorporate Bootstrap using CDN links for both the CSS and JS. After that we can move on to creating a bootstrap offCanvas Effect.
Bootstrap Offcanvas Effect (Smooth Sidebar)
To add Bootstrap to your HTML page you first need to set up the CSS and JS files. Once you have set them up you can copy and paste the code directly from the Bootstrap website. This will give you a button and anchor tag which you can customize by writing your own CSS code. After this we can move on to the next step where we will learn how to dynamically change our pages using JavaScript.
Setting Up Default Pages With Links
We are planning to incorporate web pages such as About Us Contact Us Sign up and Sign in etc. by adding links in their href attribute. Once we are done with this we will test our pages to ensure they are redirecting properly. The next step will be to integrate JavaScript logic to enable dynamic page changes.
Dynamically Change Pages Using JavaScript
To implement a feature across all pages we first integrate a JavaScript file. Then we attach a click event to the document to verify whether the event targets all tags (including href) that contain links. Finally we use the JavaScript history API object to handle URLs in real time.
To save the targeted Atag href content we assign it to the href variable. Then we use `e.preventDefault()` to stop the browser from reloading and call the `updateContent` function passing the href value as an argument. Before this we used `history.replaceState({url:href} "" URL)` to update the URL without reloading the page.
PopState Event Listener & Fetch API Request
In our next discussion we will cover how to use the window.popstate() event to update the current history entry state. This feature also enables us to add an entry by using pushState but for the purposes of our discussion we will only be updating the current entry in the history. When the popstate event is fired we check whether the event.state.URL exists and if it does we call the updateContent function once again.
Next we implement the logic to update the page content based on the URL. To achieve this we use the Fetch API in JavaScript to make a request with async and await. This approach returns a promise to wait for the request and then move on to the next step.
This will get the content and save it in the text format in the data variable if the content is not null we will display the content in the body element with a little opacity effect that makes a glow when we change pages from frontend.
We are almost finished but last we also loop all the scripts of the content and paste them in the new script tags. Know our dynamic page changing effect is fully implemented with bootstrap off canvas effect.
Steps to Follow
1. Write the HTML code.
2. Create a beautiful layout using CSS.
3. Paste the off canvas code from Bootstrap.
4. Set up pages with their respective links.
5. Integrate the JavaScript part.
6. Target the A tags.
7. Prevent the default browser reloading by writing e.preventDefault() to that clicked element.
8. Use replacestate to update URLs.
9. Call the function updateContent(passing href).
10. Add the Popstate Event and again call updateContent(passing e.state.url) or window.location.href.
11. Integrate the Fetch API to fetch the content from the targeted URL.
12. Add opacity effect.
13. That’s it!
Final Conclusion
After reading this complete blog post you will get a high level overview of what we are creating in this blog post I simplify each step with clear wording so it helps you to understand everything in depth. See YouTube Video if a blog post is not enough
