Dynamic text box in the footer to displays current project title.

paulcalver

I'm curious if there's a way to have a dynamic text box in the footer which displays the current project title?

I have a page called footer, it's added to the bottom of all of my project pages via the lay options. It include the 'scroll to top' link but I'd also like to include the project title, so I guess this would need to be dynamic, maybe use a class id or some php?

Any help would be amazing!

paulcalver

I've managed to pull the project title using the below:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	
	console.log("obj", obj.slug);
		       
});
</script>

I also have defined a div in which to place this info

<div class="dynamic-project-title">
<p class="_Default">Project title here please</p>
</div>

I believe I need a jquery of some sorts to place this obj.slug into the text area, but I've no idea how to do this!?

Any help would be amazing!

Richard

Dear @paulcalver

Lets do that! :)

The above code is good we just need a step further.
We can make the Object slug a variable first to work with it, in my example i have defined the variable as 'projectname' it could be anything you wish:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	
	var projectname = ("obj", obj.slug);

});
</script>

Next in your footer we need to create an HTML area for this Project title to be placed into. We can do this with the <span> element - In this case i have given the <span> an #ID of 'project-name-container' to be helpful.

In your Footer's Gridder options: Go to +MORE - +HTML & add the following:

<span id="project-name-container"></span>

Back to the JS we will now ask to find this <span> element and insert the Project Title variable we created:

<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	
	var projectname = ("obj", obj.slug);
	
    document.getElementById("project-name-container").innerHTML = projectname;
		       
});
</script>

If you view your page/footer the Project title is there but may not be visible yet as it hasnt been given any CSS to style it - If this is the case we can add some.

In Custom CSS & HTML at the top we could add something like:

#project-name-container{
font-size:20px;
color:red;
margin-left:15px;
padding-bottom:40px;

This CSS can be changed however you wish to suit your design needs.

Hope this helps Paul - Let me know how you go & best wishes!

Richard

paulcalver

Thank you! I applied this method and its worked, however it seems the obj.slug wasn't actually what I wanted, it was the page title (minus the site title). I found some other tips on the forum and it's now working, well!! See below solution:

Custom <head> content:

<script>
window.laytheme.on("newpageshown", function(e,l,t){
	if("project"===l){
	var projectname = document.title.substr(14);
    document.getElementById("project-name-container").innerHTML = projectname;
	}	       
});
</script>

In your Footer's Gridder options: Go to +MORE - +HTML & add the following:

<p class="_Default"><span id="project-name-container"></span></p>

CSS:

#project-name-container {
    position: fixed;
    height: 100%;
    top: 94%;
    left: 5%;
    z-index: 100;

}

Thanks for your help!

Richard

Dear @paulcalver

Awesome! :)
Thanks for the update and best of luck with your project

Richard

paulcalver

Hi, 3 years on and I'm looking for some help to update this a little. is there a way to add the dynamic project title into a menu item at all. So it appears last on the list of the third menu and is blank when you are on a page (meaning, only filled out when viewing a project).

arminunruh

i think when you edit a menu, you can add custom classes to menu icons.

appearance → menus →

on the top right click "screen options"
make sure "css classes" checkbox is active

Screenshot 2024-09-20 at 13.19.05.png

here you can enter a html class and use that to target that element with your js.

document.querySelector(".yourcssclass").innerHTML = projectname;

paulcalver

Thanks @arminunruh. I gave that a try but it's doesn't seem to work, any other ideas? Thanks for any help. Paul.

arminunruh

whats your js code that u used and whats the link?

Lay Theme Forum

Dynamic text box in the footer to displays current project title.

Before you post:

When you post:

Online Users