HTML Page <title> element bug?
-
Hi Armin, hope all is well!
I am working on a new site at the moment that uses custom scripts to inject the page title into the project page, by pulling it from the page <title>.
Because I'm using fullpage slider on the homepage, I had to disable the overlay feature for the ABOUT page, since they don't play well together. but i still want users to click in and out of the ABOUT page, wherever they are on the site, so I made a CLOSE button on the about page that uses javascript.window.go(-1).
When navigating back to a project page from the About page (where project titles are injected into the page by pulling from <title>), the title element still reads as ABOUT, which leads to the project title element on the page to display that too. is there an easy fix or way around this? I've tried every event handler to run the function properly on history.back(), thinking the scripts were not loading properly, but then I inspected the page code and realized– it's actually the <title> of the page that still reads as the About page, instead of reflecting the current page title. this happens when you press the browser back button as well. Strangely, my browser tab reads the project title, but the <title> element does not inside the page code if you check!
-
so im on this page:
https://adamc496.sg-host.com/savage-x-fenty/
then i click on "about"
then i click on "close":
-
then i see this:
-
so setting the document title:
https://developer.mozilla.org/en-US/docs/Web/API/Document/title
i guess u do it like this,
maybe that doesn't change the html <title></title>
tag contentbut maybe it only changes the browser tab content, and maybe thats the default behaviour
how about you do
jQuery('head title').text('mytest');
instead of
document.title = 'newTitle';
also maybe if u leave it the way it is now, it wont be problematic?
-
oh and if u go online, i'd love to know, so i can add this website to "made with laytheme" section on laytheme.com ^^
-
i will shoot you an email when the site goes live :)
In response to your jQuery recommendation– my only problem right now is that I am not setting the document title, but rather pulling the project title from the document title and outputting it into a div onto project pages (since laytheme customization is mostly with CSS/JS, I cannot print it with PHP, and that's the only place the project title exists in the front end / DOM that i can pull from). Basically I do not want to have the owner of the site to manually put their project titles into the gridder, just want it automatically injected into the page with javascript like i have it now.
so the issue is that when you click 'close' on the about and go back to a project page, you'll notice that the project page title div reads 'about' on the page instead of 'savage x fenty', because <title> isn't updating even though the browser tab is. is there any other javascript method to pull the browser tab title (or back end project page title), and not from the <title> element, since it's not updating properly? this is sort of where i'm stuck at the moment!
-
@arminunruh Hey Armin! I'm just following up on my last response here, this is the last bug that I have, and I'm wondering if you were able to check the code to see why the <title> element is not updating when you go back? (if i go back from the About page, it continues to still read ABOUT instead of the current page's title, when you hit the browser's back button or the in-page javascript back/close button). You can see this outlined with the neon green boxes in the screenshot:
-
so the issue is that when you click 'close' on the about and go back to a project page, you'll notice that the project page title div reads 'about' on the page instead of 'savage x fenty', because <title> isn't updating even though the browser tab is. is there any other javascript method to pull the browser tab title (or back end project page title), and not from the <title> element, since it's not updating properly? this is sort of where i'm stuck at the moment!
ah now i understand what you mean!
sorry the issue was a little hard to understandok so if you update laytheme now you can do this:
<script> window.laytheme.on('newpageshown', function(layoutObj, type, obj){ console.log(obj.title) }) </script>
this will always give you the title of the page / project / category without the site title and separator
-
Thank you so much Armin, this is a gamechanger and worked like a charm, much better than my original method (: And my apologies for not being able to explain the issue well earlier!
-
thanks!!
its really cool what someone with a lot of development experience can do with lay theme, i think ur website really stands out, good job
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it