Nov 10, 2019
White Arrow icon
Back to all Elements

Dynamically Inject current page URL to a Text element

Changing a text element by the page url using JavaScript

Using JavaScript I created a code that takes only the last part of the URL, and injects it to an element in the page.

The code basically creates 2 variables:

  1. Using 'window.location.pathname' it checks the URL and simplify it to get only the part after the Domain name, and any sub directories.
  2. Using 'array.length' checks to see how long the 1st variable is. If it is "0" long (no letters at all) then we must be on the homepage.

Then the code changes the element with the class name '.page-name' to one of the variables, depending on the result of the check we did on the 2nd variable.

Add the code to your site's custom code section before </body> tag, so the code will load on all the pages.

<script>

 var currentPage = window.location.pathname.substr(1).split("/").pop();

 var lngth = currentPage.length;

 

 $(document).ready(function() {

   if (lngth === 0) {

     document.querySelector('.page-name').textContent = "Home";

   } else document.querySelector('.page-name').textContent = currentPage;

 });

</script>

Copy

Now only thing left is to add a txt element (H1-H6, paragraph, txt, span, Link, Rich Text, Quote) on any page with the classname of 'page-name'.

Preview:

Share:

The videos Kurzgesagt channel creates are so beautifully animated, that I almost forget that I learn so much while watching them!

Might also interest you:

Webflow Dashboard Workspaces Hack

Webflow UI Hack
Code
CSS

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
White Arrow icon

Dynamic Height

Code
Tricks
JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
White Arrow icon

Desktop Grid, Mobile Slider

Cloneable
Tricks
Layout

Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.

Read more
White Arrow icon