-
AuthorPosts
-
June 18, 2021 at 6:03 am #1306284
There seems to be a fundamental issue with the Masonry Title settings being preconfigured at H3.
ADA (Americans with Disabilities Act) Section 508 requires that “H” titles be in descending numeric order. For example, h3 cannot be viewable before an item with h2.
So, if I want to place my Masonry content above a section that has an h2 header, I am in violation of the ADA.
My question is, how can I replace the “h3” captions tile in the Masonry app?Thanks!
June 19, 2021 at 7:51 pm #1306525Hey laptophobo,
Thank you for your patience and explaining the situation, it sounds like you may need to change the tags differently on different pages based on the page structure, so there would not be one setting that would work for you across your whole site, I would recommend adding the script to a code block on each page that you will use it on, and changing the tag to suit for that page.<script> (function($) { $(document).ready(function(){ function replaceElementTag(targetSelector, newTagString) { $(targetSelector).each(function(){ var newElem = $(newTagString, {html: $(this).html()}); $.each(this.attributes, function() { newElem.attr(this.name, this.value); }); $(this).replaceWith(newElem); }); } replaceElementTag('h3.av-masonry-entry-title', '<h2></h2>'); }); }(jQuery)); </script>
Please note that the script is wrapped with
<script>
tags, this is so it will work in a code block element.
Please give this a try and if you have any issues getting it to work please link to the page so we can see.Best regards,
MikeJune 20, 2021 at 8:05 am #1306551Hi Mike,
Thanks for the script. However, I was not able to get it to work. What I did was add a Code Block just above the Masonry Gallary. But the captions remain at <h3>.
Please see “private” for link to the page.June 20, 2021 at 4:40 pm #1306564Hi,
Thank you for the feedback and the link to your site, I see that you are getting this error in your console:Uncaught ReferenceError: jQuery is not defined
I believe this points to you having the Load jQuery in your footer setting enabled in your theme settings, so the script runs before the jQuery library is loaded.
To correct this you could disable the setting so the JQuery library is loaded in the head, but I assume you would prefer to not allow this so try this script instead, it will try to wait until after the DOM is loaded before running the script:<script> window.addEventListener('DOMContentLoaded', function() { (function($) { $(document).ready(function(){ function replaceElementTag(targetSelector, newTagString) { $(targetSelector).each(function(){ var newElem = $(newTagString, {html: $(this).html()}); $.each(this.attributes, function() { newElem.attr(this.name, this.value); }); $(this).replaceWith(newElem); }); } replaceElementTag('h3.av-masonry-entry-title', '<h2></h2>'); }); }(jQuery)); }); </script>
Best regards,
MikeJune 20, 2021 at 5:40 pm #1306569This will work on masonry and masonry galleries aswell.
both masonry default h3 got the class : av-masonry-entry-titleBy the way the code-block element is not necessary to have it on top of the page.
if you got one masonry on top and one on the bottom you can differ between them on having custom class f.e. on the masonry element itself ( in my test page the masonry on top got custom class: is-h2
and the script in that case is:
https://webers-testseite.de/abcdef/<script> (function($) { $(document).ready(function(){ function replaceElementTag(targetSelector, newTagString) { $(targetSelector).each(function(){ var newElem = $(newTagString, {html: $(this).html()}); $.each(this.attributes, function() { newElem.attr(this.name, this.value); }); $(this).replaceWith(newElem); }); } replaceElementTag('.is-h2 h3.av-masonry-entry-title', '<h2></h2>'); }); }(jQuery)); </script>
- This reply was modified 3 years, 6 months ago by Guenni007.
June 21, 2021 at 2:57 am #1306629Thank you Mike (and Guenni),
I tried your solution first, Guenni, but it did not change my problem. However, Mike’s alternative solution did. (I replaced h3 with P).
I am curious why Enfold would choose to use a Title element in something that is generally not a title. It’s a caption. Perhaps this will be addressed in the next Enfold iteration.
Anyway, thank you very much for the support.
June 21, 2021 at 11:12 am #1306698Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘change Masonry title from h3 to’ is closed to new replies.