0

I am trying to figure out a solution for our AEM related pages. I need to change the class of the body tag in our base page based on the logic of a jsp included in a page jsps. I need this so I can style universal widget differently to deal with different height fixed headers.

So I can't really provide code examples as we are talking jsps, controllers and editable content widgets content writers can add to the page. So its hard as I am not sure how to proceed with this.

So let me try to explain what we have here. We have a jsp base page which has the html tags set, head tag set all the meta data, css and js libraries we use, and body tag sets. The base page would also contain included jsps that represent the site wide header and footer used across the site. We also would have optional sub navigations that can be added to the page for sub sections of the site and is activated based on the type of page template used. So this means a universal header plus a sub-navigation.

Then each page jsp extends the above described base page. These are the page jsps that act as different page templates for our CMS to use. Content authors can drag content, and html widgets on to the page.

We also have page templates that contain their own third level sub navigations that can be used either with the universal header alone or the universal header and the sub-navigation.

We also have a new scenario where there could be a 4th level navigation that can come in to play. This navigation would be a draggable widget in the cms.

So what I want to do is based on the page template and based on which combination of sub navigations are in play, class the body tag differently based on if the page is the universal header alone, or different classes for any of the sb navigation combinations. this is needed so as content authors drag widgets to the page or develop content I can offset content or change scroll offsets to get around different fixed header/navigation solutions

jeff werner
  • 829
  • 2
  • 7
  • 14
  • Can you post an example of what you mean exactly? – Jonathan Laliberte Jun 14 '18 at 20:43
  • @JonathanLaliberte I updated the initial question. I can't really add code as we are talking about multiple levels of JSPs, controllers, and css. I hope the new descriptions help explain what I am trying to do. – jeff werner Jun 14 '18 at 21:17

1 Answers1

0

This sounds like a good case for client-side code. One option is to use JavaScript code that runs on DOM content loaded event ("ready" event if you are using jQuery) to alter the CSS class of the body tag. You could make it so each component has a particular, unique class. Then the JavaScript function could examine the page and find all the unique components and then assign the correct class to the body tag based on what it finds and the logic you write in that JavaScript function.

JSPs will be processed top to bottom on the server, so once the JSP containing the body tag has been processed you won't be able to change what was processed to the response in some subsequent JSP that is processed afterwards.

Also see

You could make a call to a tag for writing out the body HTML tag and in the Java code for that tag you could examine the page node and see what other components have been included and then write out the body tag HTML accordingly if you want to do this on the server. But the key point is that you must do this before the body tag is written. Once the JSP has been processed and the body tag has been written to the response it is too late to change it in a subsequent JSP.

For example, in your JSP you would do something like this:

<myCustomTags:bodyOpeningTagBuilder />
<html>
<head>
</head>
<c:out value="${bodyOpeningTagFromBuilder}" />

...other JSPs

</body>
</html>
Shawn
  • 8,374
  • 5
  • 37
  • 60
  • we are currently doing this however the rendering can take some time on the page coming from the server plus the page has a good amount of js already. So the end result is the page starts loading and you wait a few seconds to get all the data, js and css. then the .ready call fires to check if the div is on the page and then class the body. The end result is a page shift after a few seconds. Hence the reason to see can this be done on the server. – jeff werner Jun 16 '18 at 23:00
  • Then perhaps you could make call a tag for writing out the body and in the Java code of that tag you could examine the page node and see which components have been used. I updated my answer with the same. – Shawn Jun 19 '18 at 15:59